热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【VUE.JS】安装部署篇:验证开发环境:NODE+Express+VUE+WEBPACK

通常,对于一项新技术的初学者,在开发的前期环境部署中,因为不熟悉,安装了很多文件,过一段时间后也不确定系统中是
通常,对于一项新技术的初学者,在开发的前期环境部署中,因为不熟悉,安装了很多文件,过一段时间后也不确定系统中是否已经安装了需要的的开发环境。例如部署安装VUE+NODE.js +WEBPACKWindows开发环境。


1、Check系统中是否存在NODE.JS 文件及其版本号, 以“管理员的身份运行“CMD”命令,打开命令行窗口;

输入:node -v



2、安装验证Express的使用

npm init



npm install express

   

 安装成功后,写index.js,可以测试Express是否正常Work.

index.js 内容如下:

const express = require('express')  //引入express模块

const app = express()  //实例化express

app.get('/',(req,res)=>res.seng('Hello, Jane')) //设定跟路由显示

app.listen(3000,()=>console.log('The port 3000 is listening now!'))  //侦听3000端口

运行,测试;

命令行执行: node  index.js

网页地址访问: http://localhost:3000/ 

3、安装验证VUE.JS 

VUE.js的使用有两种方式:

(1)、通过CDN方式或引入静态文件;

(2)、通过命令行安装;

npm install vue 

安装完成后,文件目录中便有了"node_modules"文件夹

 4、安装Webpack

       执行如下一些命令:

        npm install webpack

        npm install webpack-cli

        npm install vue

        npm install vue-loader

        npm install vue-template-compiler

命令全部执行完成后,检查package.json文件:

 

刚才安装的依赖项已经全部加载。 

概念解释: 

1、Node.js:Javascript的运行环境;Javascript语言运行的一个壳,有了Node.js, Javascript

                      从原来只能运行在web浏览器中,现在可以运行在任何地方,可以和PHP,Python                          等语言相媲美。

2、Express: 基于Node.js的一个后端框架,是对Node.js中的HTTP模块进行的一层抽象。

3、VUE.js:  用于构建Web用户界面的渐进式Javascript前端框架。

                      基于标准HTML,CSS,和Javascript构建,并提供了一套声明式的、组件化的编程                        模型。  

4、Webpack:打包工具,将*.vue文件编译成普通的Javascript文件。

 


推荐阅读
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • node.jsrequire和ES6导入导出的区别原 ... [详细]
  • vue使用
    关键词: ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 本文介绍了Sencha Touch的学习使用心得,主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性,并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用,以及如何通过链接样式表来改变全局风格。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • DSP中cmd文件的命令文件组成及其作用
    本文介绍了DSP中cmd文件的命令文件的组成和作用,包括链接器配置文件的存放链接器配置信息、命令文件的组成、MEMORY和SECTIONS两个伪指令的使用、CMD分配ROM和RAM空间的目的以及MEMORY指定芯片的ROM和RAM大小和划分区间的方法。同时强调了根据不同芯片进行修改的必要性,以适应不同芯片的存储用户程序的需求。 ... [详细]
  • 本文讨论了将HashRouter改为Router后,页面全部变为空白页且没有报错的问题。作者提到了在实际部署中需要在服务端进行配置以避免刷新404的问题,并分享了route/index.js中hash模式的配置。文章还提到了在vueJs项目中遇到过类似的问题。 ... [详细]
author-avatar
Song_Rr
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有