单个Vue组件通过webpack创建Vue工程

背景描述：Vue.js是一个渐进式的JavaScript框架，在使用webpack构建Vue项目时，可以使用新的构建模式：.vue单文件组件。

在webpack中使用vue-loader可以对.vue格式的文件进行处理；

.vue文件一般包含3部分，<template>（该组件的模板HTML，使用html语法）、<script>、<style>（CSS样式）。

项目目录

1.安装依赖、加载器配置

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader 
npm install --save-dev vue-template-compiler 
npm install --save-dev vue-hot-reload-api 
npm install --save-dev babel 
npm install --save-dev babel-loader 
npm install --save-dev babel-core 
npm install --save-dev babel-plugin-transform-runtime 
npm install --save-dev babel-preset-es2015 
npm install --save-dev babel-runtime

查看配置文件的版本信息，package.json文件

"devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.23.1",
    "vue-hot-reload-api": "^2.3.3",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "vue": "^2.6.10"
  }

2.修改配置文件webpack.config.js来支持对vue文件及ES6的解析

var path=require('path');
//导入插件
var ExtractTextPlugin=require('extract-text-webpack-plugin');
const VueLoaderPlugin=require('vue-loader/lib/plugin');
var config={
    entry:{
        main:'./main'
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist',
        filename:'main.js'
    },
    module:{
        rules:[
            //支持对.vue文件的解析
            {
                test:/\.vue$/,
                loader:'vue-loader',
                //options进一步对不同语言进行配置，对css进行处理时，
                // 先通过css-loader解析，然后把处理结果再交给vue-style-loader处理
                options:{
                    loaders:{
                        css:ExtractTextPlugin.extract({
                            use:'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            //支持对ES6文件的解析
            {
              test:/\.js$/,
              loader: 'babel-loader',
              exclude:/node_modules/
            },
            //支持对css文件的解析
            {
                test:/\.css$/,
                use:ExtractTextPlugin.extract({
                    use:'css-loader',
                    fallback:'style-loader'
                })
            }
        ]
    },
    plugins:[
        //重命名提取后的css文件
        new ExtractTextPlugin("main.css"),
        //vue-loader在15.*后的版本需要伴生VueLoaderPlugin的，否则启动报错
        new VueLoaderPlugin()
    ]
};
//相当于export default config,由于未安装支持ES6的编译插件，不能直接使用ES6的语法
module.exports=config;

3.创建.babel文件，写入babel的配置，webpack会依赖此配置文件来使用babel编译ES6代码

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

4.创建.vue文件，每个.vue文件代表一个组件，组件之间可以相互依赖；本例三个vue文件，app.vue，title.vue，button.vue，其中app.vue组件是根实例，其他两个为子组件。

title.vue

<template>
<h1>
    <a :href="'#' + title">{{title}}</a>
</h1>
</template>

<script>
    export default {
        props:{
            title:{
                type:String
            }
        }
    }
</script>

<style scoped>
    h1 a{
        color:#3399ff;
        font-size:24px;
    }
</style>

button.vue

<template>
    <button @click="handleClick" :style="styles">
        <slot></slot>
    </button>
</template>

<script>
    export default {
        props:{
            color:{
                type:String,
                default:'#00cc66'
            }
        },
        computed:{
            styles(){
                return{
                    background:this.color
                }
            }
        },
        methods:{
            handleClick (e) {
                this.$emit('click',e);
            }
        }
    }
</script>

<style scoped>
    button{
        border:0;
        outline:none;
        color:#fff;
        padding:4px 8px;
    }
    button:active{
        position:relative;
        top:1px;
        left:1px;
    }
</style>

app.vue父组件中把title.vue和button.vue导入，完成页面模板的制作

<template>
    <div>
        <v-title title="Vue组件化"></v-title>
        <v-button @click="handleClick">点击按钮</v-button>
    </div>
</template>
<script>
    //导入组件
    import vTitle from './title.vue';
    import vButton from './button.vue';

    export default {
        components:{
            vTitle,
            vButton
        },
        methods:{
            handleClick (e) {
                console.log(e);
            }
        }
    }
</script>

5.在入口main.js中使用组件

//导入Vue框架
import Vue from 'vue';
//导入app.vue组件
import App from './app.vue';

//创建Vue根实例
new Vue({
    el:'#app',
    render:h=>{
        return h(App);
    }
});

命令行下（cnpm run dev）或webstorm内启动项目，结果如下：

Chrome调试工具中组件被替换：

正确渲染