一.接上一篇，配置vue环境。
1.安装vue-loader。
npm install vue-loader vue-template-compiler --save-dev
2.在webpage.config.js中修改module--》rules下添加一个规则。
{
test:/\.vue$/,
use:[‘vue-loader‘]
}
完整的配置文件如下:
View Code
View Code
1 const path = require(‘path‘) 2 const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘) 3 4 module.exports = { 5 entry: ‘./src/main.js‘, 6 output: { 7 //path:‘D:\\12.vue\\01-webpack的使用\\02-webpack的配置\\dist‘, 8 path: path.resolve(__dirname, ‘dist‘), 9 filename: ‘bundle.js‘, 10 publicPath:‘dist/‘ 11 }, 12 mode: ‘development‘, //production,development 设置mode 13 14 module: { 15 rules: [ 16 { 17 test: /\.css$/, 18 use: [‘style-loader‘,‘css-loader‘] 19 }, 20 { 21 test: /\.(png|jpg|gif)$/, 22 use: [ 23 { 24 loader: ‘url-loader‘, 25 options: { 26 name:‘img/[name].[hash:8].[ext]‘, 27 limit: 20000 28 } 29 } 30 ] 31 }, 32 { 33 test:/\.vue$/, 34 use:[‘vue-loader‘] 35 } 36 ] 37 }, 38 resolve:{ 39 alias:{ 40 ‘vue$‘:‘vue/dist/vue.esm.js‘ 41 } 42 }, 43 plugins:[new VueLoaderPlugin()] 44 }
二.使用
1.创建.vue文件
<template>
<div>
<h1>{{message}}</h1>
<button @click=‘btnClick‘>按钮</button>
</div>
</template>
<script>
export default {
name:‘App‘,
data(){
return {message:‘Hello word!!‘}
},
methods:{
btnClick(){
console.info("点击了按钮");
}
}
}
</script>
<style scoped>
.title{
color:green;
}
</style>
2.在mian.js中添加.Vue文件的引用。
import App from ‘./vue/App.vue‘
完整的代码如下：
import Vue from ‘vue‘ import App from ‘./vue/App.vue‘ const app = new Vue({ el:‘#app‘, template:‘<App/>‘, components:{ App } });
3.在html页面中添加vue组件的引用。
<html> <head> <meta charset="utf-8" > <title>Hello</title> </head> <body> <div id=‘app‘></div> <script src="./dist/bundle.js"></script> </body> </html>