Vue框架学习 ----2.vue-cli构建项目，打包，发布

一、相关技术

技术	说明
Node.js	简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js = 运行环境+ JavaScript库
npm	是随同NodeJS一起安装的包管理工具，新版的nodejs已经集成了npm
Webpack	是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
Vue	渐进式 JavaScript 框架
Vue Dev-Tools	Vue 在浏览器下的调试工具。写 vue 必备的一个浏览器插件，提高调试效率。
vue-cli	是官方提供的一个 vue 项目脚手架，减少环境搭建花费的精力。
eslint	代码规范检查工具

二、vue-cli 创建模板项目

2.1创建项目

#安装模块
npm install -g vue-cli
#创建项目
vue init webpack vue_demo
#进入文件夹
cd vue_demo
#安装依赖
npm install
#启动项目
npm run dev
#访问
http://localhost:8080/

2.2目录结构

整体结构

图片出自于：https://blog.csdn.net/chao2458/article/details/81284522

2.3打包发布

方式一：使用静态服务器工具包

#打包，运行此命令后会多一个dist文件夹
npm run build
#安装组件
npm install -g serve
#发布
serve dist
#访问
http://localhost:5000

方式二：使用动态 web 服务器，如tomcat
1.修改配置: webpack.prod.conf.js
output: {
publicPath: ‘/xxx/’ //打包文件夹的名称
}
2.重新打包:
npm run build
3.修改dist文件夹为项目名称: xxx
4.将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
5.访问: http://localhost:8080/xxx