背景概述

鑒于筆者多次搭建，又常常比較難記住，到處翻查資料抵代，特別浪費時間，所以對自己所學(xué)習(xí)的知識做一個小小的總結(jié)忘嫉，方便日后的開發(fā)的時候使用荤牍。本文建立在你已經(jīng)熟悉vue的前提下，但是對基本步驟并不是很容易就能夠想起來的情況下庆冕。
代碼所在地址康吵。網(wǎng)址是正常的，可以放心訪問访递，只是一個代碼倉庫而已晦嵌。
https://gitee.com/blueboz/vue-demo/tree/master

基本搭建步驟

1.創(chuàng)建空項目

在這里插入圖片描述

2.項目上使用npm 初始化

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

npm init -y

3.安裝webpack

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

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文件中添加如下內(nèi)容，這樣子描滔，便可以使用npm run dev 進行運行陡舅，以及npm run build 進行打包

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

這時候，如果啟動npm run dev會為我們打開一個界面伴挚，提示如下錯誤靶衍。那么現(xiàn)在，我們需要提供一些js腳本茎芋，來豐富我們的功能颅眶，以及一些插件為我們提供支持。

在這里插入圖片描述

小Tips
在package.json文件上點擊右鍵田弥，show npm Scripts涛酗，會出現(xiàn)一個npm 面板

在這里插入圖片描述

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

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

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

在這里插入圖片描述

筆者的index.js文件中偷厦，使用了es6的箭頭函數(shù)商叹，以及Generator函數(shù)，目地是為了后面引出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
是可以預(yù)覽到頁面應(yīng)該有的效果（使用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']
}

到了這一步甚亭，我們已經(jīng)支持了css,less,html,字體資源贷币，圖片等等，
看似順利狂鞋，氣死不然片择，如果現(xiàn)在，你使用一些低端的瀏覽器打開我們的頁面骚揍，你會驚奇的發(fā)現(xiàn)頁面沒有正常打開字管，這是因為啰挪，我們的index.js腳本里面應(yīng)用了很多的es6的語法，如let 嘲叔，class 亡呵，以及Generator 函數(shù)。
那么我們應(yīng)該怎么支持這些新語法呢硫戈？答案是我們下面要引入的babel锰什。

第五步驟，引入Babel

目前的Babel已經(jīng)支持到了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

只是名稱的改變而已霜幼，實質(zhì)上沒有太大的區(qū)別嫩码。
作為樣例，我們這里使用babel6來舉例子罪既。配置上的不同我也會指出來铸题。

步驟a.安裝基礎(chǔ)包

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

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

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

然后調(diào)用babel 的一些方法進行轉(zhuǎn)化琢感，詳細(xì)信息可以參考官方對該插件的描述內(nèi)容丢间。https://babeljs.io/docs/en/next/babel-core.html

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

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

對于babel-preset-env 這個工具包烘挫，我們還得從其他插件談起，由于babel對代碼的轉(zhuǎn)化都是基于插件的牌捷，也就是plugins墙牌，這意味著,對于箭頭函數(shù)，就會有一個插件用于轉(zhuǎn)化箭頭函數(shù)的暗甥。確實如此，如下地址就是對該插件的描述
https://babeljs.io/docs/en/next/babel-plugin-transform-arrow-functions.html
問題來了捉捅，那么如果要轉(zhuǎn)化class關(guān)鍵字撤防，generator函數(shù)呢？
確實也是有的棒口，如下兩個地址分別是class轉(zhuǎn)化函數(shù)與generator轉(zhuǎn)化函數(shù)的描述寄月。
https://babeljs.io/docs/en/next/babel-plugin-transform-classes.html
https://babeljs.io/docs/en/next/babel-plugin-transform-regenerator.html
對與每一個插件，我們需要在
.babelrc文件里面无牵，添加類似的漾肮，這樣會導(dǎo)致我們的plugins變得龐大

在這里插入圖片描述

而preset-env這個插件克懊，即是為了整合而出現(xiàn)的忱辅，使用這個preset-env，我們就沒有必要一個一個引用了谭溉。只需要引入preset-env這一個預(yù)置的插件即可

最后一個是babel-loader 墙懂，這個應(yīng)該算是一個中間的媒介，作為webpack打包的規(guī)范工具扮念，我們知道损搬，作為webpack 來說，babel是一個未知的東西柜与，對于webpack在打包js文件的時候巧勤，他并不知道箭頭函數(shù)應(yīng)該怎么處理，巧的是,babel知道弄匕，但是踢关，webpack應(yīng)該怎么讓babel幫他轉(zhuǎn)化呢，答案是,實現(xiàn)webpack的rules中的插件粘茄，在處理js的時候签舞，調(diào)用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
你會驚奇的發(fā)現(xiàn)拣挪，我們寫的箭頭函數(shù)擦酌，變成了這樣子了。這正好是低級瀏覽器所支持的菠劝。

在這里插入圖片描述

class關(guān)鍵字赊舶，被轉(zhuǎn)化成了調(diào)用_createClass公共方法了。

在這里插入圖片描述

在這里插入圖片描述

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

這里有2個選擇夺英，依賴babel-poly ,這個提供了一些高級語法轉(zhuǎn)化過程中晌涕，使用到的一些依賴包，
我們先試試這個秋麸。

 npm i babel-polyfill -S

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

import 'babel-polyfill'

第二種，在webpack.config.js中添加如下的entry也可以實現(xiàn)灸蟆。

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

現(xiàn)在驯耻，讓我們啟動一下我們的網(wǎng)站，在IE里面炒考，可以發(fā)現(xiàn)頁面也可以打開了可缚，到這一步，你是不是認(rèn)為就可以了斋枢，其實帘靡，不然，因為上一步瓤帚，我們需要在腳本里面引入babel-poly,實際對我們的代碼已經(jīng)產(chǎn)生了侵犯,污染變量

第二種選擇是使用插件方式描姚，這個插件，會對一些公共方法進行抽取戈次，同時提供類似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作為一個插件被使用聋丝，他有什么功能？他具體也是一個代碼轉(zhuǎn)化插件包工碾，與babel-runtime 不同的是弱睦，他是提供轉(zhuǎn)化代碼工具，不在運行時使用渊额，而babel-runtime提供的 是一些需要在程序運行時需要使用的公共包况木。

在這里插入圖片描述

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

到了目前的這一步火惊，我們算是解決了一堆的前設(shè)條件,接下來是支持vue
前面的求类，npm un babel-polyfill卸載掉polyfill，這個可以看你的喜好屹耐，如果你喜歡polyfill可以把babel-runtime /transformer給卸載掉尸疆，并去掉配置，留一個就好了惶岭，當(dāng)然你想2個留著也可以寿弱，自己參考官方文檔，看看他們的整合配置按灶，可以說polyfill功能比runtime小症革，因為runtime還提供一些基礎(chǔ)方法的抽離。這點也是我建議用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控件里面的樣式設(shè)置艇挨。

6.這個時候，我們又出現(xiàn)了2條分支

安裝了vue 之后畏铆，呢雷袋，此時，如果你采用傳統(tǒng)的開發(fā)方式（不建議）在我們的Vue實例里面填寫一些方法辞居，然后界面上渲染之類的楷怒，你會發(fā)現(xiàn)并不行。

在這里插入圖片描述

這是因為瓦灶，我們通過Import導(dǎo)入的vue是一個不完整的版本鸠删。

在這里插入圖片描述

在這里插入圖片描述

當(dāng)然，你如果不想這么做,像在webpack.config.js里面

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

也是可以的碉怔。
剛剛上面我們說到2個分支烘贴。那么另外一條分支是啥。另外一條分支是使用*.vue結(jié)尾的文件撮胧。
使用vue結(jié)尾的文件桨踪，我們第一時間就會想到轉(zhuǎn)化器，也就是webpack轉(zhuǎn)化器芹啥，那么就得再安裝插件了锻离。

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里面添加如下代碼

在這里插入圖片描述

這個時候，我們的首頁的內(nèi)容如下汽纠，這里需要注意卫键，導(dǎo)入vue的時候，是使用vue而不是vue.min.js虱朵，因為這樣會導(dǎo)致出問題的

在這里插入圖片描述

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

npm install vue-router --save-dev

然后就可以使用路由了羞福。

支持MintUI

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

npm i mint-ui -S

2.全局導(dǎo)入法

全局導(dǎo)入然后就可以在頁面中隨便使用了。但是我們采用另外一種方式蚯涮，按需導(dǎo)入

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

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

在這里插入圖片描述

3.按需導(dǎo)入法

按需導(dǎo)入可以減少打包的bundle.js文件的體積，這個在線上環(huán)境來說是很有幫助的遭顶。
做法稍微麻煩了一點點张峰。還需要安裝babel的一個插件，這個插件將會為我們按需導(dǎo)入提供幫助棒旗。

a.安裝插件

npm install babel-plugin-component -D

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

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

針對本例子铣揉，由于我們在前面使用了transform-runtime饶深，所以在這里我們會多一個插件

在這里插入圖片描述

后記

作為平常我們的項目開發(fā)中，需求快速開發(fā)會讓我們失去了對本質(zhì)的了解逛拱，我們要學(xué)會跳脫開日常開發(fā)的瑣碎敌厘，理解到技術(shù)的根本，才能在技術(shù)的道路上越走越遠(yuǎn)朽合。

至此俱两，我們的項目搭建全部內(nèi)容也就完畢。創(chuàng)作不易曹步，喜歡的讀者可以支持一下筆者宪彩。

在這里插入圖片描述