vue-cli创建vue项目基本流程

1、vue-cli基本介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，为创建vue项目提供巨大便捷。主要有三大组件

1. CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

2. CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

3. CLI 插件：给Vue 项目提供可选功能的 npm 包

4. vue-cli3 创建项目官方文档给出了详细的步骤，移步
   https://cli.vuejs.org/zh/guide/prototyping.html
   

2、vue-cli2创建项目

注意：在执行下列命令时，需要先安装node
http://nodejs.cn/download/

1. 全局安装vue-cli

npm install -g vue-cli   或者  npm install -g @vue/cli

2.创建vue项目

注意：使用的vue-cli3不能使用 vue init 命令需要安装一个桥接工具

npm install -g @vue/cli-init

使用webpack模板创建项目明为vue_demo的测试项目

vue init webpack vue_demo

进入vue_demo目录安装相关npm包

cd vue_demo
npm install

启动

npm run dev

命令行会给出对应提示，访问本地8080端口就行了
效果图

3、使用vue-cli2项目的模板项目结构

1. build : webpack相关的配置文件夹
2. config:webpack相关配置文件夹，其中index.js 包含指定默认访问的端口号8080，静态资源位置static等
3. node_modules : 模块库目录
4. src ： 源码
5. static: 静态资源位置
6. .babelrc: babel运行控制文件
7. .eslintignore: eslint检查忽略的配置
8. .eslintrc.js: eslint 规则控制的配置文件（注意eslint语法严格 哎~）
9. index.html 入口主页面
10. package.json:项目描述文件，依赖配置文件

4、项目发布

1. 需要修改webpack.prod.conf.js
   output: {
   //添加这一行
   publicPath: ‘/我的项目名/’
   }
2. 项目打包

npm run build

生成dist文件，将该文件夹名字改为 publicPath中 '/我的项目名/'即可

3. 将该项目放入tomcat webapp目录下
4. 启动tomcat

catalina run

访问
localhost:8080/我的项目名 即可。一般做测试用

个人博客：https://www.xiaoxuya.top/