Vue CLI 脚手架
初识Vue CLI
1.1 脚手架介绍
如果你只是写简单的demo程序,不需要用脚手架
如果开发大型项目,你必然需要使用脚手架
■ Vue CLI
CLI 是Command-Line interface,即命令行界面,俗称脚手架
Vue CLI是一个官方发布vue.js 项目脚手架
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
1.2 脚手架使用前提—Node、Webpack
1.安装nodejs
2.检测安装版本
3.npm:是包管理和分发工具
cnpm安装
由于国内直接使用npm的官方镜像是很慢的,这里推荐使用淘宝NPM镜像
可以使用淘宝定制的cnpm命令行给工具代替默认的npm:
npm install -g cnpm --registry=https://registrty.npm.taobao.org
便可以使用cnpm命令来安装模块了
cnpm install [name]
■ Vue.js 官方脚手架用的是webpack模板
对所有的资源进行压缩等优化操作
它在开发过程中提供了一套完整的功能,能够使得我们的开发更加高效
1.3 脚手架的使用
1.安装Vue脚手架全局安装
-g:global
npm install -g @vue/cli
**2.检测安装版本 **
vue --version
1.4 创建项目
终端输入
npm run dev
执行package.json中“dev”的内容
ESLint
ESLint是代码标准
若想取消此标准限制,将index.js中的useEslint改为false即可
runtime-compiler和runtime-only区别
runtime-compiler的步骤:
template -> ast -> render -> virtual dom -> 真实dom
runtime-only的步骤
render -> virtual dom -> 真实dom
所以就可看出runtime-only相比runtime-compiler
1.运行效率高
2.源代码量更少
创建CLI3项目
vue create webpack 项目名 --save
3.1 CLI3目录分析
3.2 CLI3配置文件的查看和修改
方式一
■ UI方面的配置
启动配置服务器 vue ui (终端输入)
服务器自动跳转,显示当前项目所用插件,即package.json中显示的插件
方式二
新建一个 vue.config.js 文件夹,加入到git文件夹中
修改完文件后需:
在终端输入 git add .
git status
git commit -m ‘修改配置文件’