从零开始搭建一个前端框架（五）搭建简单的vue开发体系

说在前面

在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本，到底哪个是符合我们实际开发情况的？

有过vue开发经验的小伙伴肯定会用到.vue的单文件组件，到底要如何才能让项目识别特别的.vue结尾的文件？

让我们带着问题阅读后面的文章。

抛出一个问题

细心的小伙伴可能会发现，在引入Vue时，我们使用的是

const Vue = require('vue')

包括之前接触到的，其实我们更习惯使用import来完成引入，对于vue3.x，写法应该是这样：

import {createApp} from 'vue';  // 新增createApp api

但是第二种写法，在当前情况下并不能够正常运行。

报错提示：Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

我们现在就致力于解决这个问题，看看如何让这个import能够正常运行，之所以强调这个，是因为import './index.css'是可以正常运行的，首先我们简单了解下require和import的区别。

require vs import

首先require和import分别是不同模块化规范下引入模块的语句，require/exports对应import/export，前者是CommonJS模块化方案，运行时动态加载，后者是ES6规范，静态编译。

require/exports 用法

const fs = require('fs')
exports.fs = fs  // 与module.exports无明显区别
module.exports = fs

import/export 用法

import default from 'app.js'
export default {url="www.baidu.com"}
---------------------------------------------
import {width,length} from 'app.js'
export var width = 5;
export var add = 10

方案限制：

require/exports 原生浏览器不支持，需要使用webpack等打包工具将语法转换成在浏览器中使用的代码。

import/export 在浏览器中无法直接使用，解决方案是在引入模块的<script>标签中添加 type="module"属性，大家可以尝试在index.html中引用的bundle.js中添加这句话，亲测可用。

寻找正确的构建版本

其实，vue的官网已经给出了原因，在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本，没有特别声明，使用的版本是vue(.runtime).global(.prod).js。

如果使用webpack构建工具，我们需要指定使用这个版本。

编辑webpack.config.js文件：

module.exports = {
    ...
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js'  // 如此一来，import from 'vue'就会指向这个版本了
        }
    },
}

创建单文件组件

单文件组件的介绍。好了，我们了解到单文件组件需要借助 @vue/compiler-sfc,通过package.json文件可以查看安装的版本是否与vue一致,如果没有此依赖，可以自行安装：

npm install -D @vue/compiler-sfc

然后，我们还需要安装vue-loader来解析.vue文件。

npm install -D vue-loader

然后我们修改webpack.config.js文件

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

此时在根目录新建App.vue文件并修改index.js内容，详情可参考源代码。重新执行项目，发现可以正确加载App.vue页面。

说到最后

至此，我们已经完成了一个简单的vue开发环境的搭建。