1、vue-cli基本介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,为创建vue项目提供巨大便捷。主要有三大组件
-
CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)
-
CLI 服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供 如:serve、build 和 inspect 命令)
-
CLI 插件:给Vue 项目提供可选功能的 npm 包
-
vue-cli3 创建项目官方文档给出了详细的步骤,移步
https://cli.vuejs.org/zh/guide/prototyping.html
2、vue-cli2创建项目
注意:在执行下列命令时,需要先安装node
http://nodejs.cn/download/
- 全局安装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项目的模板项目结构
- build : webpack相关的配置文件夹
- config:webpack相关配置文件夹,其中index.js 包含指定默认访问的端口号8080,静态资源位置static等
- node_modules : 模块库目录
- src : 源码
- static: 静态资源位置
- .babelrc: babel运行控制文件
- .eslintignore: eslint检查忽略的配置
- .eslintrc.js: eslint 规则控制的配置文件(注意eslint语法严格 哎~)
- index.html 入口主页面
- package.json:项目描述文件,依赖配置文件
4、项目发布
- 需要修改webpack.prod.conf.js
output: {
//添加这一行
publicPath: ‘/我的项目名/’
} - 项目打包
npm run build
生成dist文件,将该文件夹名字改为 publicPath中 '/我的项目名/'即可
- 将该项目放入tomcat webapp目录下
- 启动tomcat
catalina run
访问
localhost:8080/我的项目名 即可。一般做测试用