Vue系列十四：创建vue项目

一、说明

1. vue-cli 是 vue 官方提供的脚手架工具
2. github:https://github.com/vuejs/vue-cli
3. 作用: 从 https://github.com/vuejs-templates 下载模板项目

二、创建 vue 项目
1、npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息。

2、输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖。

3、安装vue-cli脚手架构建工具，输入命令npm install -g vue-cli，安装完成即可。

4、选定路径，新建vue项目，这里我是新建到桌面上。

5、在上一步的目录下新建项目，指令vue init webpack 项目名称。

6、进入到项目的文件夹下。

7、运行项目，指令npm run dev。

8、在浏览器中打开这个网址。

三、vue项目结构

|–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项目的打包与发布
1、打包：npm run build
2、 发布方式1：使用静态服务器工具包
 npm install -g serve
 serve dist
 访问:http://localhost:5000
3、 发布方式2：使用动态 web 服务器(tomcat)
 修改配置：webpack.prod.conf.js
  output:{
   publicPath:’/xxx/’ //打包文件夹的名称
  }
 重新打包:
  npm run build
 修改 dist 文件夹为项目名称：xxx
 将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
 访问:http://localhost:8080/xxx