视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。

Vue CLI详解

Vue CLI

Command-Line Interface

Vue CLI使用前提：Node、webpack、npm

安装：npm install -g @vue/cli

安装CLI2：npm install @vue/cli-init -g

Vue CLI2初始化项目：vue init webpack my-project

Vue CLI3初始化项目：vue create my-project

Vue CLI2

VueCore+vue-router+vuex

ES(js)-Lint——对js代码进行限制，之后都必须写规范。不能有任何错误（多个逗号、分号、函数和括号少空格了、定义了函数没有用），否则会报错。

可以在config文件夹里的修改useEslint为false

ctrl + S保存程序

e2e——end to end端到端测试->selenium

image-20210709100646643

js ->字节码 ->浏览器

V8引擎：js ->二进制代码

static静态资源文件夹，编译后会原封不动地放到dist文件夹

CLI2生成的目录结构解析

image-20210709150414397

Runtime-Compiler和Runtime-only的区别

箭头函数：

render: h => h(App)

等价于

render: function (h) {
  return h(App)
}

Vue程序运行过程：

image-20210709151857174

template - >ast ->render ->virtual dom ->真实dom

==runtime-complier：==

image-20210709152323442

template - >ast ->render ->virtual dom ->UI

==runtime-only：==

image-20210709152651266

image-20210709153213535

render ->virtual dom ->UI

流程少，性能更高，代码量更少（轻6kB）

1.createElement('标签',{标签的属性},['标签里的内容'])

new Vue({
 el: '#app',
 render: function (createElement) {
    return createElement('h2',
      {class:'box'},
      ['Hello World',createElement('button',['按钮'])])
  }
})

2.传入组件对象：这样就不用写template了

new Vue({
 el: '#app',
 render: function (createElement) {
    return createElement(cpn)
 },
 components: {
    cpn
  }
})

相似于runtime-only

那么，.vue文件中的template是由谁处理的呢？

loader-template-complier

App对象：没有template，只有render

image-20210709160925836

image-20210709170114602

image-20210709170125903

Vue CLI3

vue2.5.21 ->vue2.x ->flow-type(facebook)

Vue3.x ->TypeScript(microsoft)

设计原则：“0”配置

vue ui 可视化

preset：配置

manually：手动的

按空格是选择/取消

配置：

image-20210709172800096

Users/YY/全局配置文件.vuerc保存了个人配置

vcs -> version control system 版本控制错误

之前的dev变成serve了。"serve": "vue-cli-service serve",

el也不用写

配置：

1.在终端/cmd：vue ui

导入文件夹后，可以显示项目仪表盘

2.项目中创建文件：vue.config.js 必须这个名

使用git添加进去：git add .，git commit -m '修改配置文件'

总目录：
总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战

Vue学习笔记——Vue CLI详解