1、概念:CLI(Command-Line Interface),命令行界面,俗称脚手架。通过配套的图形化界面创建、开发和管理你的项目。Vue CLI 完全是可配置的,无需 eject。这样你的项目就可以长期保持更新了。使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。
2、环境安装(需要node、webpack的环境支撑):cnpm install -g @vue/cli 进行全局安装即可
官网介绍:
通过cnpm install -g @vue/cli 命令安装完后,用vue --version 进行版本查看:
现在的版本已经是4.5.3了,如果仍然需要使用旧版本的vue init 的功能,则可以全局安装一个桥接工具:
通过命令:cnpm install @vue/cli-init -g
这样我们既可以用2的脚手架创建项目,也可以通过4的脚手架创建项目:
Vue CLI2初始化项目:vue init webpack my-project
安装过程的选项配置:
project name --项目名称,不能包含大写
project description --项目的信息
author --作者的信息,默认从git中读取信息
vue build --在项目编译的时候,选择什么方式来进行runtime + compiler 或 runtime-only(用上下键 来选择相应的方式)
install vue-router? --是否安装路由
use ESLint to lint your code? --是否用ESLint 检测代码规范,根据自己情况选择
set up unit tests --是否进行单元测试
setup e2e tests with Nightwatch? --是否e2e端到端测试,安装Nightwatch进行自动化测试框架,如果有需要,可以选择selenium环境
should we run ‘npm install’ for you after the project has been Created? --选择npm后yam命令安装
最后会根据配置,进行整个项目的安装配置:
成功安装后,生成一个新项目:
CLI2的目录结构解析:
package.json:
项目打包:"build": "node build/build.js" (node命令直接可以运行js文件,直接让js文件在终端可以执行相应的代码,无需浏览器来进行解析)
这个目录下,配置一些基础的变量,变量名称可以根据自己的实际情况命名:
src开发目录
static静态页面,里面的文件会原封不动打包到dist文件夹中
babelrc适配:在ES6转换为ES5的代码读取的配置文件。浏览器市场份额大于等于>1%,且是最后两个版本,并排除IE小于8的版本浏览器:
代码规范配置:root = true 打开此设置
配置需要忽略上传的文件:
PS:如果安装比较慢,建议用淘宝镜像:npm install -g cnpm --registry=HTTPS://registry.npm.taobao.org ,这样后面安装的时就可以用cnpm install [name] 来安装想要的环境了。