Vue.js安装发布详细流程

       建议Download或者手动搭建一个完整的项目基础（包含vuex、axios、vue-router、express、mock.js以及一个良好的项目文件目录），留存备份，以后开新项目可以npm install安装依赖后直接使用。

       npm install xxx -g /-s/-d 等区别见文末补充

1. 安装node.js，自行搜索下载(http://nodejs.cn/)，建议安装稳定的高版本。

2. 安装完node.js会附带安装npm（包管理工具），命令提示符里 npm -v 能显示版本则npm安装成功。通过npm install npm -g进行npm的升级。

3. 安装npm的淘宝镜像
   npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 安装webpack npm install webpack -g

5. 安装vue脚手架 npm install vue-cli -g (vue -V查看vue版本，v是大写的V)

6. 在本地硬盘创建目录，例如D:/workspace/ 。cd进入该目录。

7. 创建模板项目 vue init webpack myVueProject 此时会有一些初始化的设置如下:
   （注：此配置是针对低配向，关于ESLint等选项如果有此习惯可自行开启并配置）
   

   

   image.png

此时工程已建立完毕，cd进入该目录下(例如 cd D:/workspace/MyProject)。

8. 安装项目依赖与vue-router模块 （如果在第7步已经有vue-router安装选项则可以跳过vue-router的安装，当然重复安装也不会有问题）

cnpm install
cnpm install vue-router --save

9. Vue-resource已经过时，所以我们安装axios,cd到项目下 cnpm install axios

10. 基础环境搭建完毕，cd到项目下 npm run dev运行项目（如果出现某些环境问题重新安装出问题的环境即可，例如出现Vue-Router not found，重新安装vue-router）

11. 发布项目：npm run build（关于打包后无法直接点击运行的问题：到项目目录下的config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“/”，改为“./”即可） 然后会在你的项目里出现dist文件夹，你的打包内容就在这里(版本不同布局方式不一样，无伤大雅。基于我的版本包含一个index.html和static文件夹，内容如下)

    

    image.png

12. 然后，把dist扔到服务器端tomcat的webapps文件夹中或者把dist文件夹的内容拷贝到webapps的ROOT文件夹内即可挂载成功。注意，如果直接挂载大几率出现空白页面，即404错误，请修改index.html里的路径由绝对改为相对。

       修改方式如下：

修改前

修改后

13. 如果使用express写了跨域服务（服务器以pm2为例），将express文件夹整个扔到服务器端www下，执行pm2 restart all命令即可。

  我的版本： 
node.js：8.9.1
vue：2.9.1  
webpack：3.8.1  
cnpm&npm：5.1.1  
npminstall：3.2.1  
atom：1.6.9   

关于命令参数

•        npm install axios -g (全局安装)和 npm install axios （本地安装）
         其中参数-g的含义是代表安装到全局环境里面，即安装在Node安装目录下的node_modules文件夹中，一般在 \Users\用户名\AppData\Roaming\ 目录下，可以使用npm root -g查看全局安装目录。
         在js实例代码中，默认下node.js会在NODE_PATH和目前js所在项目下的node_modules文件夹下去寻找模块，因此，如果只是全局安装，不能直接通过require()的方式去引用模块，需要手动解决包路径的配置问题，当然你也可以复制全局安装的node_modules文件夹到项目下，还有办法可以选择将环境变量的NODE_PATH设置为C:\Program Files\nodejs。所以如果采用全局安装，如果项目转移的话会存在找不到包的情况。
  因此，不推荐只全局安装（如果是工具插件可以全局安装，如果是项目需要的依赖则选本地安装）。据node团队介绍，本地安装包对于项目的加载会更快。
•        npm install axios 和npm install axios -S (npm install axios --save的简写)
         参数-S代表的含义是在安装axios时会修改package.json，默认在dependencies中添加项目生产依赖。这样以后就不用一个个的用npm去安装了，直接执行npm install 会安装dependencies下所有的依赖。
•        npm install -S和 npm install axios -D （同npm install axios --save -dev）
         -D是package.json中的devDependencie中添加项目开发阶段的依赖。在node package有两种依赖，一种是dependencies一种是devDependencies，其中前者依赖的项该是正常运行该包时所需要的依赖项，而后者则是开发的时候需要的依赖项，像一些进行单元测试之类的包。这里只会在devDependencies中添加依赖
•        uninstall 和 update 的使用
  uninnstall 和 update 用法基本同install 如卸载开发版本的模块
  m uninstall gulp --save-dev
•        npm install xxxx --save 可以缩写为npm i -S
•        npm run start 可以缩写为 npm start