初識vue，難免有坑，僅此記下。
在webpack中配置vue時，發現data中的數據在頁面無法正常執行，還是顯示文本{{message}} 幾番查找原因無果，最後發現引入的打包後js需要放在vue綁定的div之後。
以下爲正確打開方式：
1.先在源碼js裏導入vue
import Vue from 'vue'
const app = new Vue({
el:"#app",
data:{
message:'你好'
}
});
2.然後在HTML中引入打包後的js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 習慣放在head裏，這裏應該是加載順序的問題，導致message無法執行 -->
<!-- <script src="../dist/bundle.js"></script> -->
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="../dist/bundle.js"></script>
</body>
</html>
3.這是發現還不行，不用急，再配置一下webpack.config.js，通過resolve指定vue版本
（因爲默認的使用vue-runtime.js，不會預編譯模板）
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '../dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
大功告成！