vue系列（1）：vuecli-项目搭建全过程

版本说明

• vue：2.6.11
• vuecli：4.5.7

前提

已安装node.js、npm/cnpm

---

一、node.js、npm/cnpm安装配置

1、Node.js 官方网站下载安装：Node.js；

2、系统变量path添加：“D:\Program Files\nodejs\”

3、配置npm：

   D:\Program Files\nodejs\下新建node_cache、node_global文件夹

（1）全局模块路径：

npm config set prefix "D:\Program Files\nodejs\node_global"

（2）缓存cache的路径:

npm config set cache "D:\Program Files\nodejs\node_cache"

（3）系统变量新建变量名为 “NODE_PATH”，

值：“D:\Program Files\nodejs\node_global\node_modules”，

系统变量path添加 D:\Program Files\nodejs\node_global

4、淘宝镜像cnpm：

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

---

二、安装全局vue cli：

//全局安装vue-cli
npm install -g @vue/cli
//或者使用cnpm
cnpm  install -g @vue/cli
//检查项目是否安装
vue --version

---

三、新建项目：

命令提示符 进入项目文件夹

vue create project-name

之后进行preset配置，详情参考vue.js开发环境搭建 - 简书；

---

四、安装elementUI

vue add element

安装完成后 npm run serve 测试是否安装完成

---

五、运行项目：

npm run serve

---

六、项目打包、tomcat中发布：

1）在vue.config.js里面填入：

// vue.config.js
module.exports = {
publicPath: './'
}

2）将src=>router目录里的index.js（history 改为 hash）

const router = new VueRouter({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes
})

3）执行命令：

npm run build

4）将运行结果 dist文件夹放在tomcat webapp下 即可：