使用vue-cli创建工程

安装好vue-cli脚手架之后，使用如下命令即可生成vue的模板工程：

vue init webpack vue_demo

　

其中vue-demo是工程名称

|-- build : webpack 相关的配置文件夹(基本不需要修改)
　　|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
　　|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
　　|-- components: vue 组件及其相关资源文件夹
　　|-- App.vue: 应用根主组件
　　|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

　　

运行模板工程vue-demo

cd vue-demo  # 进入工程根目录 

npm run dev  # 运行dev环境 

　　

访问工程： localhost:8080

 

打包vue-demo

npm run build

　　

执行以上命令会生成一个dist目录 

 

发布1：: 使用静态服务器工具包

npm install -g serve
serve dist
访问: http://localhost:5000

 

发布2： 使用tomcat等web服务器

修改配置: webpack.prod.conf.js
output: {
　　publicPath: '/xxx/' //打包文件夹的名称
}
重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
访问: http://localhost:8080/xxx