Vue学习3：Vue CLI

Vue学习3：Vue CLI

一、认识Vue CLI

CLI是Command-Line Interface，命令行界面，俗称脚手架，vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。
vue CLI使用前提：node、npm、webpack

Vue CLI使用

• 安装：npm install -g @vue/cli 安装的是CLI3的版本
• 拉取CLI2版本：npm install -g @vue/cli-init
• Vue CLI2初始化项目：vue init webpack my-project
• Vue CLI3初始化项目：vue create my-project

如果说npm install -g @vue/cli 不行的话，首先考虑是用管理员身份打开，不行的话可以输入npm clean cache -force 实际上清空的是以下目录里的所有内容。如果还不行就要考虑重装node等等解决办法

二、Vue CLI2的使用

1. 基本使用

遇到问题：

禁止运行脚本的解决办法
执行策略的问题

步骤：

• vue init webpack vuecli2test 并设置相关的选项
• 运行：npm run dev开发，npm run build构建发布
  
  然后生成了vuecli2test的文件夹，目录结构如下
  

2. ESlint

注意，在创建时，如果选择了使用ESlint会有严格的规范，代码很容易报错，譬如严格的空格、缩进还有分号，如果想禁用，可以在config目录的index.js文件中修改其中：useEslint: false

3. runtime-compiler与runtime-only的区别

先了解：
vue程序运行过程：template->ast->render->vdom->ui

runtime-compiler：template -> ast -> render -> vdom -> ui
runtime-only：render -> vdom -> ui 性能更高、代码更少

• h实际上是createElement这个函数

	render: function(createElement) {
     
		//createElement('标签', {标签属性}, ['内容'])
		//return createElement('h2', {class: 'box'}, ['Hello world']);
		//可以传入组件
		return createElement(App); //这里的App中的template已经由vue-template-compiler转成成render了
	}

4. npm-run-build/dev

了解一下

三、Vue CLI3的使用

cli3和cli2的区别

步骤：
vue create vuecli3test
运行：npm run serve开发，npm run build 构建发布

目录结构：

修改配置三种方法：

• vue ui 使用可视化页面进行配置
• 在@vue -> cli-service -> lib里有配置文件
• 自己创建一个文件vue.config.js，通过module.exports = {}添加新的配置，会与已有的配置合并