vue.js模块化开发

//下面是导入app.vue
import app from './vue/app.vue'

new Vue({
    el:'#app',
    // tempalte会完全替换掉id为app的div里面的内容，所以使用了<app/>
    template:'<app/>',
    components:{
        app
    }
})

　　上面是main.js中的代码

<template>
<div >
    {{msg}}
    <button @click="btnclick()">hello world</button>
    <h2 class="title">....</h2>
</div>
</template>

<script>
export default {
    name:'app',
    data(){
        return{
            msg:'hello world'
        }
    },
    methods:{
        btnclick:function(){
            alert('hello world')
        }
    }
}
</script>

<style>
.title {
    background-color: brown;
}
</style>

　　上面是app.vue中的代码

运行时需要先安装npm install --save-dev vue-loader vue-template-compiler（vue-loader）

这个完成后再运行npm run build会出现

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

需要在webpack.config.js中引入文件

 

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry:'./src/main.js',
    output:{
        //动态获取路径
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:"dist/"
    },
    module:{
        rules: [
            {
                // $表示结尾
              test: /\.css$/,
              //style-loader负责将样式添加到DOM中
              //css-loader只负责加载，不负责解析
              //使用多个loader时，是从右向左的
              use: ['style-loader',  'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options:{
                        //当图片的体积大于limit时，会自动使用file-loader转换成文件形式，而不会转换成base64格式
                        limit:1000,
                        //[]是一个变量
                        name:'img/[name].[hash:8].[ext]'
                    }
                  },
                ]
            },
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    resolve: {
        //alias:别名
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}