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‘]
            }
完整的配置文件如下:
webpack开发vue
 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文件

webpack开发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>

 

webpack开发vue

上一篇:爬取一张网页(retrieve)


下一篇:Flume基础(七):企业开发案例(四)