说在前面
在 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
开发环境的搭建。