开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情

脚手架大家都很熟悉，我们在创建vue项目的时候必不可少都要使用它，其实脚手架里面还有很多我们容易忽略的地方。

使用脚手架创建项目

1. 如何选择vue cli版本

众所周知，vue分为2.x和vue3.x版本，同样vue的脚手架vue cli也分为好几个版本，有：1.x, 2.x, 3.x, 4.x, 5.x。我们在使用的时候遵循最新匹配最新的原则，如果vue 3.x那么首选vue cli 4.x。当然 vue 2.x也可以选择vue cli4.x。具体还是要参考项目实际情况。

具体信息参考vue cli官方文档

2. 创建项目

下载好node和vue cli之后，我们就可以开始创建项目了。主要执行命令就是

vue create my-vue2

具体可以参考我的另外一篇文章：vue2之初始化项目，这篇文章里面会有详细的介绍。

脚手架项目目录

当我们创建好项目之后，我们可以得到如下项目目录：

├─node_modules

├─public

│ ├─favicon.ico: 页签图标

│ ├─index.html:主页面

├─src

│ ├─assets:存放静态资源

│ │ └─logopng

│ ├─component: 存放组件

│ │ └─HelloWorld.vue

│ ├─App.vue: 汇总所有组件

│ ├─main.js: 入口文件

├─·gitignore: git版本管制忽略的前置

├─babel.config.js: babel的配置文件

├─jsconfig.json: JavaScript 项目的根目录。该jsconfig.json文件指定了JavaScript 语言服务提供的功能的根文件和选项。

├─package.json: 应用包配置文件

├─package-lock.json: 包版本控制文件

├─README.md: 应用描述文件

├─babel.config.js: vue配置文件

项目中vue版本

1. vue项目默认引入的版本

首先我们来看一下下面这块代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

我们之前在创建vue的时候都是配置template来配置模板的，如果我们把代码改成下面的这种形式。

import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  // render: h => h(App),
  template: '<h1>hello world</h1>'
}).$mount('#app')

结果会出现报错：

这是因为我们引入的Vue是import Vue from 'vue'，查看vue依赖代码鼠标移上去显示：module "/node_modules/vue/types/index"

"exports": {
    ".": {
      "import": {
        "node": "./dist/vue.runtime.mjs",
        "default": "./dist/vue.runtime.esm.js"
      },
      "require": "./dist/vue.runtime.common.js",
      "types": "./types/index.d.ts"
    },
    "./compiler-sfc": {
      "import": "./compiler-sfc/index.mjs",
      "require": "./compiler-sfc/index.js"
    },
    "./dist/*": "./dist/*",
    "./types/*": "./types/*",
    "./package.json": "./package.json"
  },

从上述代码可以看出import Vue from 'vue'最终引入的是vue.runtime.common.js。也就是说这个版本是不含模板编译器的，必须借助render函数才能编译模板

render函数

render函数里面有个参数，这个参数和普通参数不一样，是一个函数。

// 如果传入的是组件
const render = (createElement) => {
    return createElement(App)
},
// 如果传入的是元素
render: (createElement) => {
    return createElement('h1', 'hello world')
},

vue的多个版本

通过查看vue的依赖文件我们可以看出来vue有很多版本

不同版本的Vue的区别:

vue主要分为两类：vue.js是完整版，含有runtime的都是非完整版

vue.js是完整版的Vue，包含: 核心功能+模板解析器。
vue.runtime.xxx.js是运行版的Vue，只包含: 核心功能:没有模板解析器

vue.config.js文件项目配置

vue内部使用webpack来配置项目运行及打包相关的内容的。但是具体配置文件我们都无法从vue文件中直观地看出。这时候需要使用以下命令：

vue inspect > output.js

这时vue项目根目录下就会有一个output.js文件，里面就是vue脚手架相关的配置

修改vue脚手架相关配置

上面我们输出了脚手架相关配置文件，但是我们不能在里面配置，即使配置了也是不生效的。如果需要自定义配置vue脚手架，需要在vue.config.js中配置。

vue.config.js默认配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

具体配置内容可以参考vue cli相关配置项，这里我们就不详细介绍了。vue cli官方文档

vue2之分析脚手架