使用vue+webpack构建项目(一)基本配置

前一段时间构建了一个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:

• 项目gihub地址
• 使用vue+webpack构建项目(二) 引入vuex vue-resource

关注我获取更多前端资源和经验分享

感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~