webpack結合vue搭建開發環境

基於vue的腳手架確實為我們簡化了開發流程，統一了項目目錄規范，現在我們自己基於前面的webpack配置，搭建一個基於vue的開發環境，這是一個漸進的過程

那與vue集成需要哪些關鍵要素呢？

1、安裝babel環境（因為vue基於ES6+來開發的）
2、集成.vue文件的(由vue作者開發的單文件組件vue-loader)
3、集成less
4、集成vue-router
5、集成vuex
6、...... 

下面我們分別安裝上面的環境：

1、 安裝babel環境

babel環境需要三個類包：babel-loader @babel/core @babel/preset-env

npm install babel-loader @babel/core @babel/preset-env --save-dev

並且在項目根目錄下創建一個.babelrc配置文件，寫入以下內容：

{
    "presets":["@babel/preset-env"]
}

2 集成.vue文件（單文件組件）

要集成.vue格式的文件需要安裝兩個類包：vue-loader,vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

安裝完在webpack.config.js中添加配置.vue的rules規則，添加的配置如下：

const config = {
    ...,
    module: {
        rules: [
            ...,
            { test: /\.vue$/, use: ['vue-loader'] },
            ...
      ] 
    },
    ...
}

此處有演示...

其中.vue格式中的style樣式部分，得需要安裝vue-style-loader來解析

npm install vue-style-loader --save-dev

安裝完同樣在webpack.config.js添加一條基於.vue文件中style的樣式配置，配置如下:

const config = {
    ...,
    module: {
        rules: [
            ...,
            { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
            { test: /\.vue$/, use: ['vue-loader'] },
            ...
      ] 
    },
    ...
}

此處有演示...

集成less

集成less需要安裝兩個類包：less,less-loader，安裝如下：

npm install less less-loader --save-dev

安裝完同樣在webpack.config.js添加一條基於less的配置規則，配置如下:

const config = {
    ...,
    module: {
        rules: [
            ...,
            { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['vue-style-loader', 'css-loader','less-loader'] },
            { test: /\.vue$/, use: ['vue-loader'] },
            ...
      ] 
    },
    ...
}

此處有演示...

集成vue-router

集成完vue后，集成vue-router和vuex都so easy了，因為這些都是基於vue的全家桶的安裝了，請往下看...

先安裝vue-rotuer

npm install vue-router --save

安裝完后，測試vue-router是不可用

集成vuex

集成方法和vue-router類似，這里就不展開了