作者:陈可不能哭 | 来源:互联网 | 2023-08-12 08:16
增加loaderwebpack只能识别.js结尾的文件,这时就需要增加loader运行npmivue-loadervue-template-compiler-D在
增加loader
webpack只能识别.js结尾的文件,这时就需要增加loader
-
运行npm i vue-loader vue-template-compiler -D
-
在webpack.config.js
添加rules匹配规则:
{ test: /\.vue$/, use: 'vue-loader' }
3. 在webpack.config.js
中导入并配置插件:
// 导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// new 一个插件的实例对象
const vuePlugin = new VueLoaderPlugin()
// 把 new 出来的插件实例对象,挂载到 `plugins` 节点中:
plugins: [...其它插件, vuePlugin]
自定义全局组件
01.vue文件
index.js
// 导入自定义组件模板
import nothing from './01.vue'
// 把 .vue 文件注册为全局组件
Vue.component('nothing',nothing)
index.html以标签的方法使用组件
<div id="app">
<nothing>nothing>
div>
自定义私有组件
01.vue 同上
index.js
// 导入vue
import Vue from 'vue/dist/vue.js'
// 导入自定义组件模板
import nothing from './01.vue'
const vm = new Vue({
el: '#app',
components: {
"nothing": nothing
},
data: {
flag: false,
msg: 'Vue in webpack'
},
})
index.html以标签的方法使用组件,同上