十六、webpack转换Vue模板
2019-06-11 本文已影响0人
Epat
一、Vue-Loader介绍
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
二、Vue-Loader配置
- 下载Vue相关依赖
npm install vue vue-loader vue-template-compiler
2.增加src/view/app.vue文件，并增加如下代码
<template>
<h1>
hello Vue
</h1>
</template>
<script>
export default {
}
</script>
<style lang="styl" scoped>
h1
font-size 50px
text-align center
</style>
- 修改src/index.js，增加如下代码
// 引入Vue组件
import App from './view/app.vue'
import Vue from 'vue'
// 初始化Vue对象，并挂载到 '#app' 这个dom节点上
new Vue({
el: '#app',
render: h => h(App)
})
- 修改src/index.html文件，增加如下代码
<body>
<div id="app"></div>
</body>
- 修改webpack.config.js，增加Vue相关配置
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
rules: [
{
test:/\.vue$/,
loader:'vue-loader'
}
]
} // 处理对应模块
plugins: [
new VueLoaderPlugin()
],
-
编译打包后，打开浏览器可以看到如下界面
webpack-vue
