[vue]10-vue脚手架

vue-cli

什么是Vue CLI

• 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
• 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
  • 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
  • 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
• CLI是什么意思?
  • CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
  • Vue CLI是一个官方发布 vue.js 项目脚手架
  • 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.
• 脚手架长什么样子?

Vue CLI使用前提 - Node

安装 NodeJS

• 可以直接在官方网站中下载安装.

• 网址: http://nodejs.cn/download/

检测安装的版本

• 默认情况下自动安装Node和NPM

• Node环境要求8.9以上或者更高版本

什么是NPM呢?

• NPM的全称是Node Package Manager

• 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

• 后续我们会经常使用NPM来安装一些开发过程中依赖包.

cnpm安装

• 由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
• 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
• npm install -g cnpm --registry=https://registry.npm.taobao.org
• 这样就可以使用 cnpm 命令来安装模块了：
• cnpm install [name]

Vue-CLI使用前提 - Webpack

Vue.js官方脚手架工具就使用了webpack模板

• 对所有的资源会压缩等优化操作
• 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

Webpack的全局安装

• npm install webpack -g

Vue CLI的使用

安装Vue脚手架

• npm install -g @vue/cli # 全局安装，只需要安装一次

全局删除脚手架

npm uninstall @vue/cli -g

全局安装脚手架3

npm install @vue/cli@3 -g

注意：上面安装的是Vue CLI3的版本

Vue CLI2初始化项目

• vue init webpack my-project

Vue CLI3初始化项目

• vue create my-project

Vue CLI2详解

当运行了 vue init webpack my-project以后，我们会遇到选项，下面是选项的详解

生成的目录详解

如何关掉代码规范eslint？

• 在config文件夹里面找到index,在找到useEslint，然后改成false

如果选择了代码规范如何取消呢？

• 创建一个文件，这个文件名是固定的

Runtime-Compiler和Runtime-only的区别

这里也就是我们在创建创建的时候需要选择的两个选项

简单总结

• 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
• 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

vue CLI流程

import Vue from ‘vue’ 是引入vue 就像 <script src=“vue.js’>

import App 是引入一个组件

我们在app.vue中写内容

spa：上面的应用属于单页面应用

单页面应用只有一个html,上面有体现出

特点：

• seo优化不好
• 首屏加载过慢 首屏白屏
• 页面切换过程中的用户体验好

mpa：多页面应用 多个html

有一些带html标签的字符串就是富文本

vue既可以做单页面应用，也可以做多页面应用，只是脚手架创建出来的就是单页面应用。

render和template

Runtime-Compiler 和 Runtime-only

前面我们选择的时候有这个选项，现在我们来说一下他们的区别

选择Runtime-Compiler后，在main中是这样

选择Runtime-only后，在main中是这样

为什么存在这样的差异呢？

• 我们需要先理解Vue应用程序是如何运行起来的。
• Vue中的模板如何最终渲染成真实DOM。

vue脚手架在解析的时候的过程

如果选择 runtime+compiler，就会执行这种步骤

• template（模板） -> ast（抽象语法树） -> render（render函数） -> virtual dom（虚拟dom） -> 真实DOM

当我们使用vue的时候

vue内部会做一个保存，保存到vm.options中

然后会解析这个文件，解析成ast文件

解析完后，会编译这个文件，编译称为一个render函数

编译完以后，在解析为virtual dom这种虚拟dom（虚拟dom树）

再渲染为真实dom

如果选择 runtime-only，就会执行这个步骤，这个性能更高

render（render函数） -> virtual dom（虚拟dom） -> 真实DOM

new Vue({
  render: h => h(App),		//这个h其实是内部传过来的一个参数，叫createElement
  router,
  store
}).$mount('#app')


render: function (h) {
    return
}

render: function (createElement) {
    //1、createElement(标签， {class: 'ha'}， ['']),就会用这个标签替换掉当前挂载的标签。,第二个参数
是标签的一个class属性,第三个标签表示内容
    return createElement(h2)
//<h2 class="ha">内容</h2>
}

render: function (createElement) {
   return createElement('h2', {class: 'box'}, ['hello', createElement('button', ['按钮']]
}

render: function (createElement) {
   return createElement(app)
        //也可以把app传过去，直接渲染，这样效率高
}

上面的这个h其实是内部传过来的一个参数，叫createElement

那么template函数是由谁处理了呢？

是由vue-template-compiler把他编译成了render，所以，再引用这个app的时候，它的template已经被解析成app对象了，可以直接被render函数解析了，然后可以覆盖挂载的标签

这个选择的是runtime-only,执行的顺序是，render（render函数） -> virtual dom（虚拟dom） -> 真实DOM

真实DOM种执行的效率更高，代码更少

所以以后再创建脚手架的时候要选择runtime-only

render函数的使用

直接在createElement里面写代码，但是这样写的话，更不好写，这里写的是虚拟dom

第一个参数是标签，第二个参数是attribute，第三个参数是，可以是text，也可以是children

也可以往里面传一个组件对象

上面的方式其实是jsx的方式，

npm run build

npm run dev

修改配置：webpack.base.conf.js起别名

通过这样处理以后，就可以在引入的时候直接使用这里面的别名

例如 要引入src里面的app

import app from ‘@/app’

认识Vue CLI3

2019年8月份发布

vue-cli 3 与 2 版本有很大区别

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

• vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

Vue CLI3初始化项目

• vue create my-project

这里是在建立的时候需要选择的配置的详解

选择自己配置cli3

选择cli3

代码规范

检查代码

是否将上面的配置保存为模板

这里是保存的模板

目录结构详解

vue脚手架搭建的项目中的文件说明

node_modules 这个是npm安装的模块，此文件夹是不需要提交到代码仓库的。发给别人的时候，此文件夹是需要删除。我们可以直接在项目中使用npm i安装所有的依赖，会自动生成此目录

public 表示项目的静态资源目录，里面有一个index.html是我们vue实例的挂载节点所在的页面src 是我们的源代码目录，以后写代码都是在这个文件夹里

.browserslistrc 配置我们css文件兼容的浏览器版本信息，会自动加浏览器内核前缀

.editorconfig 是我们编辑器的配置文件，设置了编辑器的代码换行，缩进等规则

.edlintrc.js 是eslint插件的配置文件，作用是代码规范性检测

.gitignore 过滤不需要提交到代码仓库中的文件

.prettierrc 文件作用是设置

prettier插件格式化代码时的一些规范

babel.config.js 是babel插件的配置文件

package.json nodejs项目的包信息

package-lock.json npm5之后的版本中，安装依赖项之后自动生成的文件，目的是锁定依赖项的版本信息。此文件可以手动删除，每一次执行npm i 之后会自动生成README.md 是每一个vue项目自动生成的说明文件，在github等代码仓库中会自动的读取为项目的第一个显示页面

一大堆配置文件去哪里了？

配置去哪里了？

自定义配置：起别名