VueJS:手把手教你搭建webpack+babel+vue+mintui項目 [附帶項目源碼]

背景概述

鑑於筆者多次搭建，又常常比較難記住，到處翻查資料，特別浪費時間，所以對自己所學習的知識做一個小小的總結，方便日後的開發的時候使用。本文建立在你已經熟悉vue的前提下，但是對基本步驟並不是很容易就能夠想起來的情況下。
代碼所在地址。網址是正常的，可以放心訪問，只是一個代碼倉庫而已。
https://gitee.com/blueboz/vue-demo/tree/master

基本搭建步驟

1.創建空項目

2.項目上使用npm 初始化

這一步驟只是所有npm項目的常規初始化

npm init -y

3.安裝webpack

安裝webpack ，命令行工具，可以讓我們在命令行使用webpack進行打包，以及webpack-dev-server,方便我們在開發的時候，直接進行熱部署

npm i webpack webpack-cli webpack-dev-server -D

在項目根目錄下

var path = require('path');
var webpack = require('webpack');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase:'./dist',
        hot:true,
        port:3000
    },
    plugins: []
}

package.json文件中添加如下內容，這樣子，便可以使用npm run dev 進行運行，以及npm run build 進行打包

"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  }

這時候，如果啓動npm run dev會爲我們打開一個界面，提示如下錯誤。那麼現在，我們需要提供一些js腳本，來豐富我們的功能，以及一些插件爲我們提供支持。

小Tips
在package.json文件上點擊右鍵，show npm Scripts，會出現一個npm 面板

4.安裝必要的插件（css,js,png,html）

(*.html) html-webpack-plugin
(*.css) style-loader css-loader
(*.less) less less-loader
(.sass/.scss) node-sass sass-loader（不作介紹）
(*.js) babel-loader@7 babel-core babel-preset-env（babel-preset-es2015, es2016, es2017）
(*.js) babel-polyfill |babel-runtime,babel-transform-runtime

第1 步驟，先建立index.html 與index.js 文件

筆者的index.js文件中，使用了es6的箭頭函數，以及Generator函數，目地是爲了後面引出Babel 的使用作鋪墊。

第1步，處理html模板文件

npm i html-webpack-plugin -D

然後在，webpack.config.js文件的plugins中添加,表示，以src目錄下的index.html作爲模板，並且在這個html文件的最後，追加bundle.js腳本的引用。

new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html'
 })

這個使用使用npm run dev
是可以預覽到頁面應該有的效果（使用Chrome 或者火狐，不要用IE）

第二步驟支持css樣式的使用

npm i style-loader css-loader -D

然後在webpack.config.js文件中添加,

plugins:[],
module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }

然後就支持了css了，

第三步驟，支持less

npm i less less-loader -D

rules中添加

{
     test:/\.less$/,
     use:['style-loader','css-loader','less-loader']
}

第四步驟、支持jpg,png ,ttf等

npm i file-loader -D

同樣的，在rules裏面添加如下

{
	test:/\.(png|svg|jpg|gif)$/,
	use:['file-loader']
},{
	test:/\.(woff|woff2|eot|ttf|otf)$/,
	use:['file-loader']
}

到了這一步，我們已經支持了css,less,html,字體資源，圖片等等，
看似順利，氣死不然，如果現在，你使用一些低端的瀏覽器打開我們的頁面，你會驚奇的發現頁面沒有正常打開，這是因爲，我們的index.js腳本里面應用了很多的es6的語法，如let ，class ，以及Generator 函數。
那麼我們應該怎麼支持這些新語法呢？答案是我們下面要引入的babel。

第五步驟，引入Babel

目前的Babel已經支持到了7 ,與Babel6 的不同大概是插件包的名稱叫法的改變而已，
舉個例子來說，babel 有幾大核心的組件
babel-core,babel-preset-env,babel-loader,在babel 6中，安裝這幾個插件的命令
是

npm i babel-core babel-preset-env babel-loader@7

但是在babel7 中是使用

npm i @babel/core @babel/preset-env babel-loader@8

只是名稱的改變而已，實質上沒有太大的區別。
作爲樣例，我們這裏使用babel6來舉例子。配置上的不同我也會指出來。

步驟a.安裝基礎包

npm i babel-cli -g
npm i babel-core  babel-preset-env babel-loader@7 -D

babel-core提供一些核心的API接口給我們，可以通過如下代碼導入工具包

var babel = require("@babel/core");
import { transform } from "@babel/core";
import * as babel from "@babel/core";

然後調用babel 的一些方法進行轉化，詳細信息可以參考官方對該插件的描述內容。https://babeljs.io/docs/en/next/babel-core.html

babel-cli 是幹嘛的，提提供一個babel終端工具，可以讓我們自己編譯js文件
一般建議全局安裝,使用辦法是

babel index.js --out-dir lib -options

對於babel-preset-env 這個工具包，我們還得從其他插件談起，由於babel對代碼的轉化都是基於插件的，也就是plugins，這意味着,對於箭頭函數，就會有一個插件用於轉化箭頭函數的。確實如此，如下地址就是對該插件的描述
https://babeljs.io/docs/en/next/babel-plugin-transform-arrow-functions.html
問題來了，那麼如果要轉化class關鍵字，generator函數呢？
確實也是有的，如下兩個地址分別是class轉化函數與generator轉化函數的描述。
https://babeljs.io/docs/en/next/babel-plugin-transform-classes.html
https://babeljs.io/docs/en/next/babel-plugin-transform-regenerator.html
對與每一個插件，我們需要在
.babelrc文件裏面，添加類似的，這樣會導致我們的plugins變得龐大

上圖的插件配置引自babel7 ,看不懂的話把@去掉，"/“替換成”-" 就是完整的插件名稱了。

而preset-env這個插件，即是爲了整合而出現的，使用這個preset-env，我們就沒有必要一個一個引用了。只需要引入preset-env這一個預置的插件即可

最後一個是babel-loader ，這個應該算是一箇中間的媒介，作爲webpack打包的規範工具，我們知道，作爲webpack 來說，babel是一個未知的東西，對於webpack在打包js文件的時候，他並不知道箭頭函數應該怎麼處理，巧的是,babel知道，但是，webpack應該怎麼讓babel幫他轉化呢，答案是,實現webpack的rules中的插件，在處理js的時候，調用babel插件，這就是babel-loader的作用了。

注意要在webpack.config.js文件中添加如下代碼

{
	test:/\.js$/,
	use:['babel-loader'],
	exclude:/node_modules/
}

來說說.babelrc ,這個文件一共分爲兩種配置
presets和plugins，這個我們之前也有簡單的提過，preset 一般是一些一體包，一般包含許多的插件，而plugins 是單獨一個插件的配置。

{
  "presets": [
    ["env",{
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      }
    }]
  ]
}

一切看似差不多了，那麼我們可以使用babel 編譯一下，看看我們編譯完之後，腳本是什麼樣子
babel src\index.js --out-dir lib
你會驚奇的發現，我們寫的箭頭函數，變成了這樣子了。這正好是低級瀏覽器所支持的。

class關鍵字，被轉化成了調用_createClass公共方法了。

這個時候，我們新建一個index.html 引用我們生成的腳本，這個時候，一開始正常的界面反而不正常了。

還報錯了，這是因爲我們使用generator函數裏面調用了regeneratorRuntime這個一個實體類，這個實體類需要引用一個基礎包。這也就引入我們下一步的動作

步驟b.安裝babel-polyfill 或babel-runtime,babel-transform-runtime

這裏有2個選擇，依賴babel-poly ,這個提供了一些高級語法轉化過程中，使用到的一些依賴包，
我們先試試這個。

 npm i babel-polyfill -S

然後又有2中方法引入
第一種，在index.js文件中通過如下代碼進行依賴

import 'babel-polyfill'

第二種，在webpack.config.js中添加如下的entry也可以實現。

entry: ['babel-polyfill','./src/index.js'],

現在，讓我們啓動一下我們的網站，在IE裏面，可以發現頁面也可以打開了，到這一步，你是不是認爲就可以了，其實，不然，因爲上一步，我們需要在腳本里面引入babel-poly,實際對我們的代碼已經產生了侵犯,污染變量

第二種選擇是使用插件方式，這個插件，會對一些公共方法進行抽取，同時提供類似polyfilll的功能。

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime

並且將如下代碼加入.babelrc,記住去掉我們上一步加的polyfill的哪些代碼

{
    "plugins": ["transform-runtime"]
}

使用babel命令再次編譯，可以看到編譯之後，代碼裏面爲我們依賴了_regenerator ，這個正是上一步驟中，我們使用polyfill引入的，通過require方式引入，減少了對變量的污染。此外，像createClass方法，都被抽取babel-runtime裏面，這裏也很好的解釋了babel-runtime包的作用！，此外，transform-runtime作爲一個插件被使用，他有什麼功能？他具體也是一個代碼轉化插件包，與babel-runtime 不同的是，他是提供轉化代碼工具，不在運行時使用，而babel-runtime提供的是一些需要在程序運行時需要使用的公共包。

這裏存在着一個坑。https://mp.csdn.net/mdeditor/98637033#
參考我的另一篇文章。

到了目前的這一步，我們算是解決了一堆的前設條件,接下來是支持vue
前面的，npm un babel-polyfill卸載掉polyfill，這個可以看你的喜好，如果你喜歡polyfill可以把babel-runtime /transformer給卸載掉，並去掉配置，留一個就好了，當然你想2個留着也可以，自己參考官方文檔，看看他們的整合配置，可以說polyfill功能比runtime小，因爲runtime還提供一些基礎方法的抽離。這點也是我建議用runtime 的原因所在。

5. 安裝vue

npm i vue -S
npm i vue-style-loader -D

vue插件提供了我們寫代碼的時候的依賴

import Vue from 'vue'

new Vue({
    el:"#app"
})

同時，打開我們之前的webpack.config.js文件，修改裏面的style-loader爲vue-style-loader，這個插件（vue-style-loader）會幫我們處理一些vue控件裏面的樣式設置。

6.這個時候，我們又出現了2條分支

安裝了vue 之後，呢，此時，如果你採用傳統的開發方式（不建議）在我們的Vue實例裏面填寫一些方法，然後界面上渲染之類的，你會發現並不行。

這是因爲，我們通過Import導入的vue是一個不完整的版本。

那這個時候要怎麼辦？簡單，引入完整的不就得了。

當然，你如果不想這麼做,像在webpack.config.js裏面

 resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },

也是可以的。
剛剛上面我們說到2個分支。那麼另外一條分支是啥。另外一條分支是使用*.vue結尾的文件。
使用vue結尾的文件，我們第一時間就會想到轉化器，也就是webpack轉化器，那麼就得再安裝插件了。

npm i vue-loader vue-template-compiler -D

裝完之後，進入webpack.config.js配置文件

{
     test: /\.vue$/,
     loader: 'vue-loader'
 },

在webpack.config.js中
引入插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

然後在plugins裏面添加如下代碼

這個時候，我們的首頁的內容如下，這裏需要注意，導入vue的時候，是使用vue而不是vue.min.js，因爲這樣會導致出問題的

打開界面，成功訪問，那麼這時候，vue也算是搭建ok了。此外如果你希望使用vue-router 的話。可以通過如下代碼引入

npm install vue-router --save-dev

然後就可以使用路由了。

支持MintUI

1.通過如下命令進行安裝

npm i mint-ui -S

2.全局導入法

全局導入然後就可以在頁面中隨便使用了。但是我們採用另外一種方式，按需導入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

然後你就可以在我們的頁面中隨意的引用。

3.按需導入法

按需導入可以減少打包的bundle.js文件的體積，這個在線上環境來說是很有幫助的。
做法稍微麻煩了一點點。還需要安裝babel的一個插件，這個插件將會爲我們按需導入提供幫助。

a.安裝插件

npm install babel-plugin-component -D

b.修改.babelrc
在.babelrc文件中添加如下片段,可以理解爲添加了component插件，並且針對了這個插件進行了配置。

  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]

針對本例子，由於我們在前面使用了transform-runtime，所以在這裏我們會多一個插件

後記

作爲平常我們的項目開發中，需求快速開發會讓我們失去了對本質的瞭解，我們要學會跳脫開日常開發的瑣碎，理解到技術的根本，才能在技術的道路上越走越遠。

至此，我們的項目搭建全部內容也就完畢。創作不易，喜歡的讀者可以支持一下筆者。

VueJS:手把手教你搭建webpack+babel+vue+mintui項目 [附帶項目源碼]

背景概述

基本搭建步驟

1.創建空項目

2.項目上使用npm 初始化

3.安裝webpack

4.安裝必要的插件（css,js,png,html）

第1 步驟，先建立index.html 與index.js 文件

第二步驟支持css樣式的使用

第三步驟，支持less

第四步驟、支持jpg,png ,ttf等

第五步驟，引入Babel

步驟a.安裝基礎包

步驟b.安裝babel-polyfill 或babel-runtime,babel-transform-runtime

5. 安裝vue

6.這個時候，我們又出現了2條分支

支持MintUI

1.通過如下命令進行安裝

2.全局導入法

3.按需導入法

後記

Nginx R31 doc 官方文檔-01-nginx 如何安裝

maven-docker整合時候，使用mvn docker:build發生javax.activation.DataSource沒找到的異常

解決 Debian/Kali 環境安裝Qt報錯 SSL

軟件工程的23種設計模式

jdk8 streamAPI 中Collector收集器Collectors.groupingBy分組難點精解

VueJS:手把手教你搭建webpack+babel+vue+mintui項目 [附帶項目源碼]

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結