vue：运行环境准备

第一步：安装node.js

直接去官网下载对于版本安装即可，默认会安装npm

然后配置nodejs环境变量：

1：nodejs的home目录（D:\nodejs）创建两个目录：node_cache,node_global

2：执行如下命令设置

// 该目录用于全局安装模块的位置
$ npm config set prefix "D:\nodejs\node_global"
// 缓存目录
$ npm config set cache "D:\nodejs\node_cache"

新建变量名称：NODE_PATH，值为：D:\nodejs\node_modules3：【系统环境变量】配置：

path中新增配置：D:\nodejs; D:\nodejs\node_global;

第二步：安装webpack

1、npm安装webpack

webpack安装：

$ npm install webpack -g        //-g 全局,安装到目录：D:\nodejs\node_global\node_modules
$ npm install webpack -s        //-s 局部

$ npn install webpack@x.xx -g   //x.xx 版本号

webpack卸载：

$ npm uninstall webpack -g    // 全局卸载

$ npm uninstall webpack -s    // 局部卸载

2、cnpm安装webpack

注意：
npm  install（需从国外的谷歌的而服务器下载，对于中国国内，受网络影响大）
cnpm install（淘宝团队做的，服务器再国内，用法与npm用法完全一致，“这是一个完整npmjs.org镜像，你可以用此代替官方版本（只读），同步频率目前为10分钟一次以保证尽量与官方服务同步”）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org第一步：通过npm安装cnpm,并配置淘宝镜像（目的是解决访问国外网站速度太慢或直接失败的原因）

webpack安装：

$ cnpm install webpack -g        //-g 全局,安装到目录：D:\nodejs\node_global\node_modules
$ cnpm install webpack -s        //-s 局部

$ cnpn install webpack@x.xx -g   //x.xx 版本号

webpack卸载：

$ cnpm uninstall webpack -g    // 全局卸载

$ cnpm uninstall webpack -s    // 局部卸载

Eg: 安装webpack，安装webpack-dev-server

$ cnpm install -g webpack@3.12.0

$ cnpm install -g webpack-dev-server@2.11.2

关于webpack与webpack-dev-server版本匹配的问题：

实测可用的匹配：

第三步: 安装vue脚手架vue-cli：

$ cnpm install vue-cli -g    // 全局安装

初始化vue项目：

$ vue init webpack  项目名

进入项目文件夹，启动项目

$ cd  项目名-文件夹

$ npm install

$ npm start  或 npm run  dev

如下图所示表示：启动成功

第四步：打包部署

1、修改配置: webpack.prod.conf.js

output: {
    publicPath: ‘/xxx/‘ //打包文件夹的名称
}

2、项目开发完成之后，可以使用npm run build进行打包工作 

$ npm run build

或者直接使用IDEA开发工具中的npm拦点击build进行打包

打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了。

3、修改 dist 文件夹为项目名称: xxx

将 xxx 拷贝到运行的 tomcat 的 webapps 目录下 访问: http://localhost:8080/xxx 

vue：运行环境准备

原文：https://www.cnblogs.com/outpointexception/p/13157032.html