1准备工作
1.1安装nodejs
Nodejs官网下载最新版本，并进行下一步式的安装。安装完成后，进入命令行，查看。
1.2安装cnpm
Npm因为是老外的东西，所有下载依赖时有时会很慢、或者压根404.所以在这里我们使用淘宝的npm镜像，在命令行中使用cnpm代替npm 其他指令不变。更多请点击taonpm官网
命令：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
-g 意思是 全局安装global
1.3安装vue-cli脚手架模板
命令：cnpm install –g vue-cli
1、 使用vue-cli初始化一个demo工程
1） D盘建立helloVue目录
2） 命令行进入该目录
3） 初始化helloVue工程
命令：vue init webpack helloVue
稍等几分钟，出现下图结束。
4） 运行helloVue
命令：cnpm run dev
浏览器中访问：localhost:8080
初始化成功！
2我的工程
我的demo工程是基于vue2 + elementUI构建的管理系统。页面截图
2.1源码下载
源码地址：https://download.csdn.net/download/u012488189/10297683
将源码下载到D:\VSCode-project\hellovue
1、 安装依赖
命令：cnpm install
2、 运行工程
命令：cnpm run dev
3、访问地址：http://localhost:8080/#/login
2.2目录结构
.hellovue
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- node_modules // 项目依赖的模块
|-- dist // 发布默认文件夹
|-- src // 源码目录
| |-- api // 调用外部接口，本地模拟数据
| |-- assets // 资源目录，这里的资源会被wabpack构建
| |-- common // 公用js
| |-- components // vue公共组件
| |-- style // 三方样式表
| |-- views // vue页面文件
| |-- vuex // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
| |-- routes.js // 路由文件
|-- static // 静态文件.不会被wabpack构建
| |-- ue // 百度ue编辑器组件
| |-- ztree // vue-ztree组件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
.
2.3组件介绍
1、elementUI
http://element-cn.eleme.io/#/zh-CN/component/installation
2、vue-ztree
https://github.com/lisiyizu/vue-ztree-2.0
3部署到tomcat
1、执行命令
cnpm run build
2、 将dist目录下的文件copy到webapps目录即可
4参考来源
http://blog.csdn.net/qq_34543438/article/details/72868546?locationNum=3&fps=1