前一段时间构建了一个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:
关注我获取更多前端资源和经验分享
感谢大佬们阅读,希望大家头发浓密,睡眠良好,情绪稳定,早日实现财富自由~