webpack开发vue

　　一.接上一篇，配置vue环境。

1.安装vue-loader。

npm install vue-loader vue-template-compiler --save-dev

2.在webpage.config.js中修改module--》rules下添加一个规则。

{

test:/.vue$/,

use:['vue-loader']

}

完整的配置文件如下:

 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 }

View Code

二.使用

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>

View Code

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>