一个.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) }