vue2.0组件

vue2.0的组件需要配合webpack的使用

webpack的配置如下

//webpack.config.js
module.exports=function(env,args){
	env=env||{};
	return {
		entry:'./src/main.js',
		module:{
			rules:[
				{test:/\.css$/i,use:['vue-style-loader','css-loader']},
				{test:/\.vue$/i,use:'vue-loader'}
			]
		},
		...env.development?require('./config/webpack.development'):require('./config/webpack.production')
	}
}

这里用了这句话 …env.development?require(’./config/webpack.development.js’):require(’./config/webpack.production.js’)在主要是webpack开发版本和生产版本之间都能用

//package.json
"start": "webpack-dev-server --env.development",
"build": "webpack --env.production"

//webpack.development.js
const htmlWebpackPlugin=require('html-webpack-plugin');
const vueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={
	mode:'development',
	output:{
		filename:'bundle.js'
	},
	plugins:[
		new htmlWebpackPlugin({
			template:'index.html'
		}),
		new vueLoaderPlugin()
	]
}

const htmlWebpackPlugin=require('html-webpack-plugin');
const vueLoaderPlugin=require('vue-loader/lib/plugin');
const pathlib=require('path');
module.exports={
	mode:'production',
	output:{
	    path:pathlib.resolve(__dirname,'build'),
		filename:'bundle.js'
	},
	plugins:[
		new htmlWebpackPlugin({
			template:'index.html'
		}),
		new vueLoaderPlugin()
	]
}

main.js内容如下：

import Vue from 'vue';
import parent from './parent.vue';

let vm=new Vue({
    el:'#box',
    data:{},
    components:{
        parent
    },
    template:`
        <div>
            <parent></parent>
        </div>
    `
});

parent.vue内容如下

<template lang="html">
    <div>
        <div class="mod1">我是第一个数据{{msg}}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:'哈哈'
        }
    },
}
</script>

<style lang="css" scoped>
.mod1{
    width: 200px;
    height: 200px;
    background:-webkit-linear-gradient(red,yellow);
}
</style>

执行npm run start后就会打包完毕，打开html文件即可