vue学习【webpack + 单文件组件(*.vue)与vue-loader】

一个.vue文件包含<template><script><style>3部分。

使用npm逐个安装以下依赖：

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

over,修改config来支持对.vue文件和ES6的解析。

// 配置入口和出口
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');// 导入打包插件
var config = {
    entry: {
        main: './main'
    },
    output: {
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: ExtractTextPlugin.extract({
                        use: 'css-loader',
                        fallback: 'vue-style-loader'
                    })
                }
            }
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader',
                fallback: 'style-loader'
            })
        }
        ]
    },
    plugins: [
        new ExtractTextPlugin("main.css")  // 重命名提取后的css文件
    ]
};
module.exports = config;

Then,在目录下创建.babelrc文件，写入babel的配置，webpack会依赖此配置文件来使用babel编译ES6代码。之后就可以用.vue了。

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

在目录下创建一个app.vue文件

<template>
    <div>Hello {{name}}</div>
</template>
<script>
    export default {
        data() {
            return {
                name: 'vue.js'
            }
        }
    }
</script>
<style scoped>
    div{
        color: blue;
        font-size: 24px;
    }
</style>

ES 6 语法：data(){   }     相当于   data:function(){   }

scoped属性意思是这个css只对当前组件app.vue有效

main.js中使用vue

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

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

 ES 6箭头函数：render: h => h(App) 相当于：

render: function (h) {
    return h(App)
},
render: h => {
    return h(App)
}