Vue.js
Vuejs--认识脚手架__Vue.js
发布于 4 年前 作者 banyungong 2004 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

什么是脚手架

cli，俗称脚手架。全称是command line interface. vue-cli 是vue官方发布的开发vue项目的脚手架。

脚手架的作用

在生活中，脚手架是我们为了建房子搭的架子。为了我们建房子做的准备工作。同样，cli，就是为了我们开发项目，搭建环境。它的作用主要是

  • 搭建Vue开发环境。
  • 配置webpack。尤其是这个。之前我们都是手动配置webpack。首先是特别的繁琐，而且有一个很明显的问题是版本问题。版本不对可能就报错。以后这些事儿都交给我们的cli，他会自动帮助我们配置webpack。

使用脚手架的前提

  1. webpack.vue-cli使用了webpack的模板 所以我们需要安装webpack
  2. node webpack又依赖node所以我们也需要安装node

安装cli

npm install @vue/cli@3.2.1  -g

脚手架全局安装即可，没必要局部安装，这样安装的是脚手架3的版本，如果想使用cli2的内容我们需要再拉一个模板

npm install @vue/cli-init -g

vue-cli2初始化vue项目

命令是

vue init webpack my-project-name

初始化项目时的一些配置

  1. Project name --项目的名称，默认使用刚刚init的my-project-name（my-project-name其实这个应该是项目文件夹的名称）
  2. Project description 项目的描述
  3. Author 作者 默认会去电脑中的.gitconfig去找作者名
  4. Vue build 选择vue的版本是使用runtime+compiler还是使用runtime+only.
  5. Install vue-router? 是否安装前端路由
  6. Use ESlint to lint your code? 是否使用ESlint来规范你的代码
  7. Set up unit tests 是否设置单元测试
  8. Setup e2e tests with Nightwatch 是否设置端到端测试
  9. 使用npm还是使用yarn

配置好后将会为我们生成一系列的文件。 这些文件很多我们之前都自己手动实现过，但是这个脚手架工具可以自动帮助我们生成，就很牛皮。

分析脚手架生成项目文件结构

runtime-only和runtime+compiler的区别

  • 大小不同，runtime+compiler更大，多出来的部分就是compiler的代码，这部分代码是用来编译template模板的。
  • 性能不同，runtime-only的性能更高

为什么runtime-only版本性能更高

要了解runtime-only为什么会性能更高，需要了解template的编译过程。

vue实例或vue组件的template编译的过程

  1. vm.options.template—>ast.第一步，将template解析（parse）为抽象语法树
  2. ast—>render函数（将我们的ast编译成render函数）
  3. render函数—>virtual dom(将render函数渲染（render）成虚拟DOM)
  4. vitual dom --> 真实dom（将虚拟dom挂载到页面中）

实际上刚刚runtime+compiler多出来的代码就是来帮我们编译模板的，也就是完成我们的第一，第二步。将我们的template模板编译成render函数。
但是其实实际项目中，如果我们使用.vue文件开发.我们的vue版本根本不需要实现compiler，原因是什么呢？
前面我们讲过webpack可以通过安装两个东西帮我们打包.vue文件，一个是vue-router，一个是vue-template-compiler.vue-router是帮我们加载.vue文件，**而vue-template-compiler是来将我们.vue文件中的template编译成render函数。**也就是实际上通过webpack打包，导出的组件根本不存在template.因为它的template已经编译成了render函数。换句话说，你从任何.vue文件导出的组件，模板已经编译好了根本不需要你实现。你只需要完成后面两步就行了。这里我们可以输出一下我们的组件到底是个什么。 这个组件已经被处理成了一个普通的object对象。而并不存在template模板。并且这里我们可以发现他有一个render方法。

总结

当我们使用.vue文件开发vue的项目的时候，实际上输出出来的组件已经被渲染成了render函数，所以我们的vue不需要对模板进行编译，我们应该选择runtime-only的版本，这样代码更少，性能更高。 但是当我们开发vue项目是使用template模板的形式，我们就需要安装runtime+compiler的版本，帮助我们解析template。

vue-cli3初始化项目

vue-cli3的特点

  • 零配置，之前关于webpack的配置全部被隐藏。
  • vue-cli2基于webpack3，vue-cli3基于webpack4
  • 移除static文件夹，添加了public文件夹，并且将index.html 移入public文件夹
  • vue-cli3提供了vue ui命令，提供可视化配置

初始化项目

使用vue-cli3初始化vue项目，是下面这个命令

vue  create my-project-name

生成这么多配置选项

vue-cli3生成的项目结构

vue-cli3和vue-cli2生成的项目的细小差别

  1. 以前是npm run dev命令 而现在是npm run serve命令，原因是package.json的scripts发生了变化。
  2. main.js有了小许不同
    vuecli3的main.js:
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

vuecli2的main.js:

import Vue from 'vue'
import App from './App'
console.log(App);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

其实本质上他们是一样的，vue的源码会判断你的vue实例是否存在el属性，如果存在，就将实例挂载到该元素上面。vuecli3的代码就是直接将实例挂载到元素上。

vue-cli3生成的项目配置怎么修改

当我们使用vue-cli3生成项目之后，webpack的配置就被隐藏了。如果想查看或者修改webpack的相关配置该怎么办呢？

  1. vue ui。 之前我们说过，vuecli3脚手架通过vue ui命令帮助我们实现了图形化管理。原理是创建了一个本地服务器，我们可以在本地服务器中导入我们的vue项目，里面会有一系列配置可以进行配置。
  2. 找到隐藏的配置文件。路径是node_modules/@vue/cli-service/webpack.config.js 这个webpack.config.js本身也没啥东西，他是导入'./lib/Service'文件夹的内容。
  3. 如果想对webpack配置文件进行修改的话，可以在自己的项目中新建一个文件：vue.config.js。这个名字是固定的不能随便命名。你可以在这个文件中对webpack进行配置，到时候他会将你的配置和它隐藏的配置合并。

    版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: 羅藝 原文链接：https://juejin.im/post/6869067224465408008

回到顶部