windows下安装配置vue开发环境，并使用vue-cli脚手架搭建一个基于 webpack 模板的vue项目（创建-打包-构建解释）

写在前面：

本人后端dog，项目开发可能要涉及前端vue，遂学。下面主要从两个部分，基于实际开发需求，以前端小白的心态做一些学习和实践的记录和总结：

• 第一部分，详细描述Windows 下vue开发环境的安装配置
• 第二部分，超详细且浅显讲如何使用vue-cli脚手架搭建一个基于 webpack 模板的vue工程

一、鸟瞰Vue开发的环境需求

vue.js所有的环境基础包括：

• Node.js ：这是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时，(运行时：可以理解为运行环境)
• npm：这是node.js的包管理工具
• webpack：前端资源模块化管理和打包工具
• vue-cli：脚手架构建工具
• cnpm：npm的淘宝镜像

二、安装配置vue的开发环境

如果不确定自己之前是否安装过上面这些东西，可以先确认一下，例如下面我想确认一下我是否已经装了node.js:

• 菜单栏-->输入cmd-->找到-->右键管理员方式打开
• 输入 node -v  ,回车：

如果像上面这样显示出版本号，则代表已经装过了，在版本满足你需求的情况下就无须再装了。如果没有装过，会提示你"xx不存在"类似的指令。

1、安装node.js

到node.js官网下载你所需要的版本，双击下载后的安装包，按照提示一路点"下一步"（和安装普通软件一样）即可。

安装完以后，检查一下PATH环境变量 是否已经自动配置了node.js。

点击开始=》运行=》输入"cmd" => 输入命令"path"(下面是我cmd查出来后放记事本格式化后展示出来的样子):

可以看到PATH环境已经安装成功。

现在我们再来cmd查一下node.js版本：

没毛病。

2、npm

npm是随同Node.js一起安装的包管理工具,直接在命令行敲出npm -v就可以查看是否安装成功：

3、安装淘宝的国内镜像

因为npm包管理器需要依赖包的服务器地址是国外的，资源下载及访问会很慢，所以我们需要安装淘宝的国内镜像来提高速度。
安装淘宝的国内镜像的指令：

npm install -g cnpm --registry=http://registry.npm.taobao.org

cmd信息如下：

以后安装其他依赖，你就可以使用这个命令了：

cnpm install [依赖的name]

4、安装webpack

安装指令：

cnpm install webpack -g

cmd信息如下：

提示安装成功

5、安装vue 脚手架

第一次使用npm指令安装失败

第二次使用cnpm指令：

cnpm install --global vue-cli

成功

三、使用vue-cli构建一个基于 webpack 模板的vue项目并启动

 不同于创建一个java后端工程，创建一个vue工程，需要在命令行编写指令一步步完成（嗯，，反正我目前只会这种方式，，）。你可以使用电脑自带的cmd命令行窗口，也可以装一个vscode（两个工具指令和步骤都一样）。使用它的终端窗口，长下面这样：

1、初始化一个vue工程。

1.1 先cd到你想要的目录下，我放到了我的aigovProject文件夹下：

1.2 初始化vue环境：

1.3 提出vue的初始化指令解释一下：

vue init webpack name(项目名)

这个指令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。

1.4 在安装过程会有一些初始化的设置提示，如下是我的操作及解释：

 

• Project name ：你可以在这填写和修改初始的项目名称，注意我上面图片上的注意事项哈
• Project description ：  项目的自我介绍，你可以写：这是全球最np的Vue项目
• Author ：项目作者，你的小名-狗子
• Vue build (Use arrow keys)
  Vue build standalone   这两个选它推荐的那个，好像是运行加编译的意思
• Install vue-router? (Y/n) ： 是否安装Vue路由，这是Vue的核心必须要，后面专门写一下这个路由。
• Use ESLint to lint your code? (Y/n) ：使用 ESLint 到你的代码？这是个代码风格管理工具，选一下。
• Pick an ESLint preset (Use arrow keys) ：选择一个预置ESLint，这个就是接在上面那个问题下的，意思让你选一个代码风格。
• Setup unit tests with Karma + Mocha? (Y/n) ：是否安装单元测试 
• Setup e2e tests with Nightwatch? (Y/n) ：是否安装e2e测试 
• Should we run `npm install` for you after the project has been created?：这个是问你，要不要项目创建后，自动为你执行 npm install命令，你不选的话，项目创建后，你需要进入[项目文件夹]手动执行npm install。（我这里选了自动install,之前我用cmd创建项目好像没问我这个，，） 

注：

npm install 指令是为项目安装模块，在install 后面输入模块的名字可以安装指定模块，比如：安装路由模块vue-router和网络请求模块vue-resource：

npm install vue-router vue-resource --save

如果不指定模块，直接执行npm install，就会按照根目录下的package.json文件中依赖的模块安装，这里我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。

1.5、上面所有配置完成后，没有ERRO报错的话，是这样的：

2、启动项目 

2.1 依次次执行下面命令启动vue项目：

  cd vueDemo   //记得先进入你的项目文件夹
  npm run dev

2.2 运行成功是这样的：

 

 2.3、浏览器输入上面地址：

3、 在VSCode中查看项目架构及一些配置文件解释

3.1 项目结构解释

自己的新增项目文件都需要放到下面的 src 文件夹下 。

3.2 超详细的vue-cli webpack配置分析（转）

4、Vue项目打包上线

开发完成，输入以下指令打包Vue项目，打包完成后，会在本地指定文件目录生成 dist 文件，随后将其丢到服务器上即可。

npm run build

注1：可能会遇到的错误和解决办法：

• 创建Vue项目报错“npm ERR! code EPERM npm ERR! errno -4048”
• 'eslint' 不是内部或外部命令，'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序

注2：一些指令的使用：

• npm run dev 启动项目后，使用 ctrl+c 可退出或关闭Vue程序
• --save-dev指令 可自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
• --save     安装包信息将加入到dependencies（生产阶段的依赖）
• --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它