npm Babel es6 webpack

一、簡介

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 [email protected]


#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是一個廣泛使用的轉碼器，可以將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 可以將多種靜態資源 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

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

---

一、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

項目在線預覽：https://panjiachen.gitee.io/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

---

一、項目的創建和基本配置

1、創建項目

將vue-admin-template-master重命名爲guli-admin

2、修改項目信息

package.json

{
    "name": "guli-admin",
    ......
    "description": "穀粒學院後臺管理系統",
    "author": "Helen <[email protected]>",
    ......
}

3、如果需要修改端口號

config/index.js中修改

port: 9528

4、項目的****目錄結構

. 
├── build // 構建腳本
├── config // 全局配置 
├── node_modules // 項目依賴模塊
├── src //項目源代碼
├── static // 靜態資源
└── package.jspon // 項目信息和依賴配置

src 
├── api // 各種接口 
├── assets // 圖片等資源 
├── components // 各種公共組件，非公共組件在各自view下維護 
├── icons //svg icon 
├── router // 路由表 
├── store // 存儲 
├── styles // 各種樣式 
├── utils // 公共工具，非公共工具，在各自view下維護 
├── views // 各種layout
├── App.vue //***項目頂層組件*** 
├── main.js //***項目入口文件***
└── permission.js //認證入口

5、運行項目

npm run dev

二、登錄頁修改

src/views/login/index.vue（登錄組件）

4行

<h3 class="title">穀粒學院後臺管理系統</h3>

28行

<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
    登錄
</el-button>

三、頁面零星修改

1**、標題**

index.html（項目的html入口）

<title>穀粒學院後臺管理系統</title>

修改後熱部署功能，瀏覽器自動刷新

2、國際化設置

打開 src/main.js（項目的js入口），第7行，修改語言爲 zh-CN，使用中文語言環境，例如：日期時間組件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

3、icon

複製 favicon.ico 到根目錄

4、導航欄文字

src/views/layout/components（當前項目的佈局組件）

src/views/layout/components/Navbar.vue

13行

<el-dropdown-item>
    首頁
</el-dropdown-item>

17行

<span style="display:block;" @click="logout">退出</span>

5、麪包屑文字

src/components（可以在很多項目中複用的通用組件）

src/components/Breadcrumb/index.vue

38行

meta: { title: '首頁' }

四、Eslint語法規範型檢查

1、ESLint簡介

JavaScript 是一個動態的弱類型語言，在開發中比較容易出錯。因爲沒有編譯程序，爲了尋找 JavaScript 代碼錯誤通常需要在執行過程中不斷調適。

ESLint 是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。讓程序員在編碼的過程中發現問題而不是在執行的過程中。

2、語法規則

ESLint 內置了一些規則，也可以在使用過程中自定義規則。

本項目的語法規則包括：兩個字符縮進，必須使用單引號，不能使用雙引號，語句後不可以寫分號，代碼段之間必須有一個空行等。

3、確認開啓語法檢查

打開 config/index.js，配置是否開啓語法檢查

useEslint: true,

可以關閉語法檢查，建議開啓，養成良好的編程習慣。

4、ESLint插件安裝

vs code的ESLint插件，能幫助我們自動整理代碼格式

5、插件的擴展設置

選擇vs code左下角的“設置”， 打開 VSCode 配置文件,添加如下配置

"files.autoSave": "off",
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue-html",
  {
    "language": "vue",
    "autoFix": true
  }
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true

---