前一段时间构建了一个webpack+react项目，最近搞一下vue的相关学习
其实在学会了react之后，学其他框架也比较得心应手了，首先就是对比着来学习了，vue官方文档上对于框架的对比有比较好的介绍，可以参考 对比其他框架
其实基本给的建议都是先学习Vue会好一些，因为文档更全面，很多库也是官方维护，相比下也比较容易一些，使用模板语法，和html还是比较相似的。
首先是基本webpack项目的配置，可以参考 实践webpack+es6+react+redux+antd构建项目(一) webpack配置
其实相关的配置还是有一些区别的，有一些依赖的东西都不一样，详细说一下需要安装配置的依赖
babel相关
npm i babel-core babel-loader babel-plugin-component babel-plugin-import babel-plugin-transform-decorators-legacy babel-plugin-transform-runtime babel-preset-env babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
基本上都是es6语法解析。
然后在根目录创建一个 .babelrc文件，内容如下：
{
"presets": ["es2015", "env", "stage-0"],
"plugins": [
[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}
],
["transform-decorators-legacy"]
]
}
babel配置完成之后，一般直接npm安装的话会出现这个问题，
Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.ou should install 'babel-loader@7'.
原因是因为
babel-loader和babel-core版本不对应所产生的，
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x
也就是说，看你的版本，然后执行
npm i --save-dev babel-loader@7.1.5
后面的7.1.5是版本号，安装babel-loader的版本是7.1.5，当然，你需要自己看一下babel-core的版本，去安装对应版本的babel-loader。
Vue相关
npm i --save-dev vue vue-hot-reload-api vue-html-loader vue-loader vue-html-loader vue-style-loader vue-template-compiler
然后在webpack中修改一下配置项（webpack区分dev和prod环境请看这篇博文）
webpack/webpack.common.js中
const VueLoaderPlugin = require('vue-loader/lib/plugin');
在plugins中加入
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({title: 'vue-demo'}),
],
在module.rules中加入
{
test: /\.vue$/,
use: 'vue-loader'
},
基本的配置完成了，
在根目录创建一个src文件夹，然后创建一个src/main.js和src/App.vue文件，现在，我们愉快的先写一点东西吧。
src/main.js
import Vue from 'vue';
import App from './App.vue';
// 挂载
const root = document.createElement('div');
document.body.appendChild(root);
new Vue({
render: h => h(App),
data() {
console.log(this)
return {
message: 'Hello World!'
}
}
}).$mount(root)
src/App.vue
<template>
<div id="app">
我是一个Vue项目
<p>{{message}}</p>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style></style>
启动项目，将会如愿的输出想要的内容
至此，基本的配置就完成了。有什么问题大家可以一起交流~
ps:
关注我获取更多前端资源和经验分享
感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~
