小白学习Vue(11)--环境安装及项目构建 | webstorm构建vue项目

11. 环境安装及项目构建：

vue项目快速构建需要脚手架（vue-cli）的支持，类似web项目可以通过maven快速构建；vue项目构建需要Node.js环境的支持

 11.1. node.js下载安装：

 从Node.js官网下载对应电脑位数的Windows 安装包 (.msi)，然后打开一直Next即可完成安装

 【安装成功检查】：

 在cmd中分别输入node -v、npm -v 显示对应的版本号

 11.2. npm修改全局下载和缓存路径(可选)：

 正常安装Node.js后，当npm依赖包下载时，会下载到C盘（C:\Users\Mr.zhong\AppData\Roaming\npm），这会占据C盘空间

 【修改】：cmd执行以下命令

 npm config set prefix “D:\nodeVueFile\npm_global”
 npm config set cache “D:\nodeVueFile\npm_cache”
 npm config set registry=http://registry.npm.taobao.org

 // 设置registry淘宝的npm镜像库下载会快点
 // 注意修改的路径尽量不能有空格，不然webstorm新建项目会报错

 本处修改到自定义的npm_global、npm_cache目录，修改后可在‪C:\Users\Mr.zhong.npmrc文件看到设置的变化

 11.3. vue-cli相关插件下载：

  11.3.1. vue.js安装：

 cmd执行：npm install vue -g

  11.3.2. vue-cli安装：

 cmd执行：npm install vue-cli -g

  11.3.3. 设置vue环境变量：

 安装vue-cli后在globa目录（此处为上述修改后的目录）会有vue.cmd，将该目录添加到环境变量path即可

 设置好环境变量，在cmd输入vue -V 显示版本号即设置正确，注意后面的是大写的V

 11.4. 项目构建：

 cmd跳转到欲建项目的目录（在该目录地址栏输入cmd即可），然后执行 vue init webpack 项目名称

vue-route按需设置，回车即可，后面的几个选项一般都选no

 11.5. 项目启动：

 构建完，上图黄色字体提示很清楚如何启动，
  cmd进入vue项目目录
  执行vue install命令
  执行npm run dev命令

 上述显示则启动成功，访问http://localhost:8080即可浏览demo

 11.6. webstorm构建vue项目：

 webstorm毕竟针对前端，前端开发还是挺方便的，不像idea那么重量级，也可以与idea进行前后端联调

 软件下载安装激活就不说了，你懂的，webstorm构建vue项目可以选择node.js和vue-cli的版本，
 默认会采用以下的vue-cli，可见这是个高版本的vue-cli，如果需要使用vue-cli 2.X，大家百度吧，或者用11.4的命令来构建

 如果构建报错：Could not install from "Files… …，检查一下全局路径是否有空格，不能有空格的

 使用webstorm使用3.0+的vue-cli构建项目，项目结构有如下变化，3.0+的配置文件使用vue.config.js；webstorm构建不会添加。