Vuejs--认识脚手架__Vue.js
发布于 4 年前 作者 banyungong 1696 次浏览 来自 分享
粉丝福利 : 关注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

回到顶部