ES6入門

一、ECMAScript 6 簡介

??ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發布了，它的目標，是使得 JavaScript 語言可以用來撰寫復雜的大型應用程式，成為企業級開發語言，

自學參考：http://es6.ruanyifeng.com/

1、ECMAScript 和 JavaScript 的關系

??一個常見的問題是，ECMAScript 和 JavaScript 到底是什么關系？

??要講清楚這個問題，需要回顧歷史，1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標準，次年，ECMA 發布 262 號標準檔案（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript，這個版本就是 1.0 版，

??因此，ECMAScript 和 JavaScript 的關系是，前者是后者的規格，后者是前者的一種實作（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）

2、ES6 與 ECMAScript 2015 的關系

??ECMAScript 2015（簡稱 ES2015）這個詞，也是經常可以看到的，它與 ES6 是什么關系呢？

??2011 年，ECMAScript 5.1 版發布后，就開始制定 6.0 版了，因此，ES6 這個詞的原意，就是指 JavaScript 語言的下一個版本，

??ES6 的第一個版本，在 2015 年 6 月發布，正式名稱是《ECMAScript 2015 標準》（簡稱 ES2015），

??2016 年 6 月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期發布，這個版本可以看作是 ES6.1 版，因為兩者的差異非常小，基本上是同一個標準，根據計劃，2017 年 6 月發布 ES2017 標準，

??因此，ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年發布的正式版本的語言標準，本書中提到 ES6 的地方，一般是指 ES2015 標準，但有時也是泛指“下一代 JavaScript 語言”，

二、基本語法

??ES標準中不包含 DOM 和 BOM的定義，只涵蓋基本資料型別、關鍵字、陳述句、運算子、內建物件、內建函式等通用語法，

本部分只學習前端開發中ES6的最少必要知識，方便專案開發中對代碼的理解，

1、let宣告變數

// var 宣告的變數沒有區域作用域
// let 宣告的變數  有區域作用域
{
var a = 0
let b = 1
}
console.log(a)  // 0
console.log(b)  // ReferenceError: b is not defined

// var 可以宣告多次
// let 只能宣告一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m)  // 2
console.log(n)  // Identifier 'n' has already been declared

2、const宣告常量（只讀變數）

// 1、宣告之后不允許改變    
const PI = "3.1415926"
PI = 3  // TypeError: Assignment to constant variable.
// 2、一但宣告必須初始化，否則會報錯
const MY_AGE  // SyntaxError: Missing initializer in const declaration

3、解構賦值

解構賦值是對賦值運算子的擴展，

他是一種針對陣列或者物件進行模式匹配，然后對其中的變數進行賦值，

在代碼書寫上簡潔且易讀，語意更加清晰明了；也方便了復雜物件中資料欄位獲取，

//1、陣列解構
// 傳統
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)

//2、物件解構
let user = {name: 'Helen', age: 18}
// 傳統
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } =  user//注意：結構的變數必須是user中的屬性
console.log(name, age)

4、模板字串

模板字串相當于加強版的字串，用反引號 `,除了作為普通字串，還可以用來定義多行字串，還可以在字串中加入變數和運算式，

// 1、多行字串
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?

// 2、字串插入變數和運算式，變數名寫在 ${} 中，${} 中可以放入 JavaScript 運算式，
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
// 3、字串中呼叫函式
function f(){
    return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);  // Game start,have fun!

5、宣告物件簡寫

const age = 12
const name = "Amy"

// 傳統
const person1 = {age: age, name: name}
console.log(person1)

// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}

6、定義方法簡寫

// 傳統
const person1 = {
    sayHi:function(){
        console.log("Hi")
    }
}
person1.sayHi();//"Hi"


// ES6
const person2 = {
    sayHi(){
        console.log("Hi")
    }
}
person2.sayHi()  //"Hi"

7、物件拓展運算子

拓展運算子（…）用于取出引數物件所有可遍歷屬性然后拷貝到當前物件，

// 1、拷貝物件
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}

// 2、合并物件
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)  //{age: 15, name: "Amy"}

8、箭頭函式

箭頭函式提供了一種更加簡潔的函式書寫方式，基本語法是：

引數 => 函式體

// 傳統
var f1 = function(a){
    return a
}
console.log(f1(1))


// ES6
var f2 = a => a
console.log(f2(1))

// 當箭頭函式沒有引數或者有多個引數，要用 () 括起來，
// 當箭頭函式函式體有多行陳述句，用 {} 包裹起來，表示代碼塊，
// 當只有一行陳述句，并且需要回傳結果時，可以省略 {} , 結果會自動回傳，
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8

// 前面代碼相當于：
var f4 = (a,b) => a+b

箭頭函式多用于匿名函式的定義

Vue

一、介紹

1、Vue.js 是什么

??Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，

??Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，

官方網站：https://cn.vuejs.org

Vue超詳細講解：https://blog.csdn.net/qq_45491549/article/details/116572915

2、初始Vue.js

創建html檔案

<!-- id標識vue作用的范圍 -->
<div id="app">
    <!-- {{}} 插值運算式，系結vue中的data資料 -->
    {{ message }}
</div>
<script src="vue.min.js"></script>
<script>

    // 創建一個vue物件
    new Vue({
        el: '#app',//系結vue作用的范圍
        data: {//定義頁面中顯示的模型資料
            message: 'Hello Vue!'
        }
    })

</script>

??這就是宣告式渲染：Vue.js 的核心是一個允許采用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統

??這里的核心思想就是沒有繁瑣的DOM操作，例如jQuery中，我們需要先找到div節點，獲取到DOM物件，然后進行一系列的節點操作

二、基本語法

1、基本資料渲染和指令

??你看到的 v-bind 特性被稱為指令，指令帶有前綴 v-

??除了使用插值運算式{{}}進行資料渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）

data: {
    content: '我是標題',
    message: '頁面加載于 ' + new Date().toLocaleString()
}

<!-- 如果要將模型資料系結在html屬性中，則使用 v-bind 指令
     此時title中顯示的是模型資料
-->
<h1 v-bind:title="message">
    {{content}}
</h1>

<!-- v-bind 指令的簡寫形式： 冒號（:） -->
<h1 :title="message">
    {{content}}
</h1>

2、雙向資料系結

雙向資料系結和單向資料系結：使用 v-model 進行雙向資料系結

data: {
    searchMap:{
        keyWord: '雙向資料系結'
    }
}

<!-- v-bind:value只能進行單向的資料渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以進行雙向的資料系結  -->
<input type="text" v-model="searchMap.keyWord">

<p>您要查詢的是：{{searchMap.keyWord}}</p>

3、事件

需求：點擊查詢按鈕，按照輸入框中輸入的內容查找公司相關資訊

在前面的例子基礎上，data節點中增加 result，增加 methods節點 并定義 search方法

data: {
     searchMap:{
         keyWord: '張三'
     },
     //查詢結果
     result: {}
},
methods:{
    search(){
        console.log('search')
        //TODO
    }
}

html中增加 button 和 p

使用 v-on 進行數件處理，v-on:click 表示處理滑鼠點擊事件，事件呼叫的方法定義在 vue 物件宣告的 methods 節點中

<!-- v-on 指令系結事件，click指定系結的事件型別，事件發生時呼叫vue中methods節點中定義的方法 -->
<button v-on:click="search()">查詢</button>

<p>您要查詢的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

完善search方法

search(){
    console.log('search');
    this.result = {
        "title":"張三",
        "site":"http://www.zhangsan.com"
    }
}

簡寫

<!-- v-on 指令的簡寫形式 @ -->
<button @click="search()">查詢</button>

4、修飾符

??修飾符 (Modifiers) 是以半角句號（.）指明的特殊后綴，用于指出一個指令應該以特殊方式系結，

??例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件呼叫 event.preventDefault()：
即阻止事件原本的默認行為

data: {
    user: {}
}

<!-- 修飾符用于指出一個指令應該以特殊方式系結，
     這里的 .prevent 修飾符告訴 v-on 指令對于觸發的事件呼叫js的 event.preventDefault()：
     即阻止表單提交的默認行為 -->
<form action="save" v-on:submit.prevent="onSubmit">
    <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">保存</button>
    </label>
</form>

methods: {
    onSubmit() {
        if (this.user.username) {
            console.log('提交表單')
        } else {
            alert('請輸入用戶名')
        }
    }
}

5、條件渲染

v-if：條件指令
data: {
    ok: false
}

注意：單個復選框系結到布林值

<input type="checkbox" v-model="ok">同意許可協議
<!-- v:if條件指令：還有v-else、v-else-if 切換開銷大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>
v-show：條件指令

使用v-show完成和上面相同的功能
<!-- v:show 條件指令 初始渲染開銷大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>

??v-if 是“真正”的條件渲染，因為它會確保在切換程序中條件塊內的事件監聽器和子組件適當地被銷毀和重建，

??v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊，

??相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換，

??一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷，因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好，

6、串列渲染

v-for：串列回圈指令

例1：簡單的串列渲染

<!-- 1、簡單的串列渲染 -->
<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在后面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

例2：遍歷資料串列

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

<!-- 2、遍歷資料串列 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

Node.js

一、簡介

1、什么是Node.js

??簡單的說 Node.js 就是運行在服務端的 JavaScript，
??Node.js是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好，

2、Node.js有什么用

??如果你是一個前端程式員，你不懂得像PHP、Python或Ruby等動態編程語言，然后你想創建自己的服務，那么Node.js是一個非常好的選擇，

??Node.js 是運行在服務端的 JavaScript，如果你熟悉Javascript，那么你將會很容易的學會Node.js，

??當然，如果你是后端程式員，想部署一些高性能的服務，那么學習Node.js也是一個非常好的選擇，

二、安裝

1、下載

官網：https://nodejs.org/en/

中文網：http://nodejs.cn/

LTS：長期支持版本

Current：最新版

2、安裝

3、查看版本

node -v

三、快速入門

??1、創建檔案夾nodejs

??2、控制臺程式

創建 01-控制臺程式.js

console.log('Hello Node.js')

打開命令列終端

進入到程式所在的目錄，輸入

node 01-控制臺程式.js

瀏覽器的內核包括兩部分核心：

????DOM渲染引擎；

????js決議器（js引擎）

????js運行在瀏覽器中的內核中的js引擎內部

??Node.js是脫離瀏覽器環境運行的JavaScript程式，基于V8 引擎（Chrome 的 JavaScript的引擎）

3、服務器端應用開發（了解）

創建 02-server-app.js

const http = require('http');
http.createServer(function (request, response) {
    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容型別: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 發送回應資料 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 終端列印如下資訊
console.log('Server running at http://127.0.0.1:8888/');

運行服務器程式

node 02-server-app.js

服務器啟動成功后，在瀏覽器中輸入：http://localhost:8888/ 查看webserver成功運行，
并輸出html頁面

停止服務：ctrl + c

NPM

一、簡介

1、什么是NPM

??NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模塊生態系統，里面所有的模塊都是開源免費的；也是Node.js的包管理工具，相當于前端的Maven ，

2、NPM工具的安裝位置

??我們通過npm 可以很方便地下載js庫，管理前端工程，

??Node.js默認安裝的npm包和工具的位置：Node.js目錄\node_modules

??在這個目錄下你可以看見 npm目錄，npm本身就是被NPM包管理器管理的一個工具，說明 Node.js已經集成了npm工具

#在命令提示符輸入 npm -v 可查看當前npm版本
npm -v

二、使用npm管理專案

1、創建檔案夾npm

2、專案初始化

#建立一個空檔案夾，在命令提示符進入該檔案夾  執行命令初始化
npm init
#按照提示輸入相關資訊，如果是用默認值則直接回車即可，
#name: 專案名稱
#version: 專案版本號
#description: 專案描述
#keywords: {Array}關鍵詞，便于用戶搜索到我們的專案
#最后會生成package.json檔案，這個是包的組態檔，相當于maven的pom.xml
#我們之后也可以根據需要進行修改，
#如果想直接生成 package.json 檔案，那么可以使用命令
npm init -y

2、修改npm鏡像

??NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個網站在國內速度很慢，

??這里推薦使用淘寶 NPM 鏡像 http://npm.taobao.org/ ，淘寶 NPM 鏡像是一個完整 npmjs.com 鏡像，同步頻率目前為 10分鐘一次，以保證盡量與官方服務同步，
設定鏡像地址：

#經過下面的配置，以后所有的 npm install 都會經過淘寶的鏡像地址下載
npm config set registry https://registry.npm.taobao.org 

#查看npm配置資訊
npm config list

3、npm install命令的使用

#使用 npm install 安裝依賴包的最新版，
#模塊安裝的位置：專案目錄\node_modules
#安裝會自動在專案目錄下添加 package-lock.json檔案，這個檔案幫助鎖定安裝包的版本
#同時package.json 檔案中，依賴包會被添加到dependencies節點下，類似maven中的 <dependencies>
npm install jquery


#npm管理的專案在備份和傳輸的時候一般不攜帶node_modules檔案夾
npm install #根據package.json中的配置下載依賴，初始化專案


#如果安裝時想指定特定的版本
npm install jquery@2.1.x


#devDependencies節點：開發時的依賴包，專案打包到生產環境的時候不包含的依賴
#使用 -D引數將依賴添加到devDependencies節點
npm install --save-dev eslint
#或
npm install -D eslint


#全域安裝
#Node.js全域安裝的npm包和工具的位置：用戶目錄\AppData\Roaming\npm\node_modules
#一些命令列工具常使用全域安裝的方式
npm install -g webpack

4、其它命令

#更新包（更新到最新版本）
npm update 包名
#全域更新
npm update -g 包名

#卸載包
npm uninstall 包名
#全域卸載
npm uninstall -g 包名

Babel

一、簡介

??Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行執行，
??這意味著，你可以現在就用 ES6 撰寫程式，而不用擔心現有環境是否支持，

二、安裝

安裝命令列轉碼工具

Babel提供babel-cli工具，用于命令列轉碼，它的安裝命令如下：

npm install --global babel-cli

#查看是否安裝成功
babel --version

三、Babel的使用

1、初始化專案

npm init -y

2、創建檔案

src/example.js

下面是一段ES6代碼：

// 轉碼前
// 定義資料
let input = [1, 2, 3]
// 將陣列的每個元素 +1
input = input.map(item => item + 1)
console.log(input)

2、配置.babelrc

??Babel的組態檔是.babelrc，存放在專案的根目錄下，該檔案用來設定轉碼規則和插件，基本格式如下，

{
    "presets": [],
    "plugins": []
}

presets欄位設定轉碼規則，將es2015規則加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

3、安裝轉碼器

在專案中安裝

npm install --save-dev babel-preset-es2015

4、轉碼

# 轉碼結果寫入一個檔案
mkdir dist1
# --out-file 或 -o 引數指定輸出檔案
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js

# 整個目錄轉碼
mkdir dist2
# --out-dir 或 -d 引數指定輸出目錄
babel src --out-dir dist2
# 或者
babel src -d dist2

模塊化

一、模塊化簡介

1、模塊化產生的背景

??隨著網站逐漸變成"互聯網應用程序"，嵌入網頁的Javascript代碼越來越龐大，越來越復雜，

??Javascript模塊化編程，已經成為一個迫切的需求，理想情況下，開發者只需要實作核心的業務邏輯，其他都可以加載別人已經寫好的模塊，

??但是，Javascript不是一種模塊化編程語言，它不支持"類"（class），包（package）等概念，更遑論"模塊"（module）了，

2、什么是模塊化開發
傳統非模塊化開發有如下的缺點：

??命名沖突

??檔案依賴

模塊化規范：

??CommonJS模塊化規范

??ES6模塊化規范

二、CommonJS模塊規范

??每個檔案就是一個模塊，有自己的作用域，在一個檔案里面定義的變數、函式、類，都是私有的，對其他檔案不可見，

1、創建“module”檔案夾

2、匯出模塊

創建 common-js模塊化/四則運算.js

// 定義成員：
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}
const multiply = function(a,b){
    return parseInt(a) * parseInt(b)
}
const divide = function(a,b){
    return parseInt(a) / parseInt(b)
}

匯出模塊中的成員

// 匯出成員：
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}

簡寫

//簡寫
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

3、匯入模塊

創建 common-js模塊化/引入模塊.js

//引入模塊，注意：當前路徑必須寫 ./
const m = require('./四則運算.js')
console.log(m)

const result1 = m.sum(1, 2)
const result2 = m.subtract(1, 2)
console.log(result1, result2)

4、運行程式

node common-js模塊化/引入模塊.js

??CommonJS使用 exports 和require 來匯出、匯入模塊，

三、ES6模塊化規范

ES6使用 export 和 import 來匯出、匯入模塊，

1、匯出模塊

創建 es6模塊化/userApi.js

export function getList() {
    console.log('獲取資料串列')
}

export function save() {
    console.log('保存資料')
}

2、匯入模塊

創建 es6模塊化/userComponent.js

//只取需要的方法即可，多個方法用逗號分隔
import { getList, save } from "./userApi.js"
getList()
save()

??注意：這時的程式無法運行的，因為ES6的模塊化無法在Node.js中執行，需要用Babel編輯成ES5后再執行，

3、運行程式

node es6模塊化-dist/userComponent.js

四、ES6模塊化的另一種寫法

1、匯出模塊
創建 es6模塊化/userApi2.js

export default {
    getList() {
        console.log('獲取資料串列2')
    },

    save() {
        console.log('保存資料2')
    }
}

2、匯入模塊
創建 es6模塊化/userComponent2.js

import user from "./userApi2.js"
user.getList()
user.save()

Webpack

一、什么是Webpack

??Webpack 是一個前端資源加載/打包工具，它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源，

??從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的請求，

二、Webpack安裝

1、全域安裝

npm install -g webpack webpack-cli

2、安裝后查看版本號

webpack -v

三、初始化專案

1、創建webpack檔案夾

進入webpack目錄，執行命令

npm init -y

2、創建src檔案夾

3、src下創建common.js

exports.info = function (str) {
    document.write(str);
}

4、src下創建utils.js

exports.add = function (a, b) {
    return a + b;
}

5、src下創建main.js

const common = require('./common');
const utils = require('./utils');

common.info('Hello world!' + utils.add(100, 200));

四、JS打包

1、webpack目錄下創建組態檔webpack.config.js

??以下配置的意思是：讀取當前專案目錄下src檔案夾中的main.js（入口檔案）內容，分析資源依賴，把相關的js檔案打包，打包后的檔案放入當前目錄的dist檔案夾下，打包后的js檔案名為bundle.js

const path = require("path"); //Node.js內置模塊
module.exports = {
    entry: './src/main.js', //配置入口檔案
    output: {
        path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當前檔案所在路徑
        filename: 'bundle.js' //輸出檔案
    }
}

2、命令列執行編譯命令

webpack #有黃色警告
webpack --mode=development #沒有警告
#執行后查看bundle.js 里面包含了上面兩個js檔案的內容并驚醒了代碼壓縮

也可以配置專案的npm運行命令，修改package.json檔案

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

運行npm命令執行打包

npm run dev

3、webpack目錄下創建index.html

參考bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4、瀏覽器中查看index.html

五、CSS打包

1、安裝style-loader和 css-loader

??Webpack 本身只能處理 JavaScript 模塊，如果要處理其他型別的檔案，就需要使用 loader 進行轉換，

??Loader 可以理解為是模塊和資源的轉換器，

??首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

npm install --save-dev style-loader css-loader 

2、修改webpack.config.js

const path = require("path"); //Node.js內置模塊
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包規則應用到以css結尾的檔案上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src檔案夾創建style.css

body{
    background:pink;
}

4、修改main.js

在第一行引入style.css

require('./style.css');

5、瀏覽器中查看index.html

看看背景是不是變成粉色啦？

element-ui

??element-ui 是餓了么前端出品的基于 Vue.js的 后臺組件庫，方便程式員進行頁面快速布局和構建

官網： http://element-cn.eleme.io/#/zh-CN

1、引入css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、引入js

<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>

3、撰寫html

<div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
</div>

一、vue-element-admin

1、簡介

??vue-element-admin是基于element-ui 的一套后臺管理系統集成方案，

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

2、安裝

# 解壓壓縮包
# 進入目錄
cd vue-element-admin-master

# 安裝依賴
npm install

# 啟動，執行后，瀏覽器自動彈出并訪問http://localhost:9527/
npm run dev

二、vue-admin-template

1、簡介

??vueAdmin-template是基于vue-element-admin的一套后臺管理系統基礎模板（最少精簡版），可作為模板進行二次開發，

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

??建議：你可以在 vue-admin-template 的基礎上進行二次開發，把 vue-element-admin當做工具箱，想要什么功能或者組件就去 vue-element-admin 那里復制過來，

2、安裝

# 解壓壓縮包
# 進入目錄
cd vue-admin-template-master

# 安裝依賴
npm install

# 啟動，執行后，瀏覽器自動彈出并訪問http://localhost:9528/
npm run dev

3、基本配置

1. 修改專案資訊
   package.json

{
    "name": "vue-admin-template",
    ......
    "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
    "author": "Pan <panfree23@gmail.com>",
    ......
}

2. 如果需要修改埠號

config/index.js中修改

port: 9528

3. 專案的目錄結構

. 
├── build // 構建腳本
├── config // 全域配置 
├── node_modules // 專案依賴模塊
├── src //專案源代碼
├── static // 靜態資源
└── package.jspon // 專案資訊和依賴配置

src 
├── api // 各種介面 定義呼叫方法
├── assets // 圖片等靜態資源 
├── components // 各種公共組件，非公共組件在各自view下維護 
├── icons //圖示
├── router // 路由表 
├── store // 存盤 
├── styles // 各種樣式 
├── utils // 公共工具，非公共工具，在各自view下維護 
├── views // 具體頁面
├── App.vue //***專案頂層組件*** 
├── main.js //***專案入口檔案***
└── permission.js //認證入口

4. 運行專案

npm run dev