06-NPM包管理器
一、簡(jiǎn)介
1、什么是NPM
NPM全稱Node Package Manager，是Node.js包管理工具，是全球最大的模塊生態(tài)系統(tǒng)，里面所有的模塊都是開源免費(fèi)的；也是Node.js的包管理工具，相當(dāng)于前端的Maven 。
2、NPM工具的安裝位置
我們通過(guò)npm 可以很方便地下載js庫(kù)，管理前端工程。
Node.js默認(rèn)安裝的npm包和工具的位置：Node.js目錄\node_modules
????在這個(gè)目錄下你可以看見 npm目錄，npm本身就是被NPM包管理器管理的一個(gè)工具，說(shuō)明 Node.js已經(jīng)集成了npm工具
安裝npm
在安裝nodejs時(shí)候，把npm也會(huì)安裝上
查看是否安裝使用命令： npm -v
二、使用npm管理項(xiàng)目
1、創(chuàng)建文件夾npm
2、項(xiàng)目初始化
#建立一個(gè)空文件夾，在命令提示符進(jìn)入該文件夾? 執(zhí)行命令初始化
npm init
#按照提示輸入相關(guān)信息，如果是用默認(rèn)值則直接回車即可。
#name: 項(xiàng)目名稱
#version: 項(xiàng)目版本號(hào)
#description: 項(xiàng)目描述
#keywords: {Array}關(guān)鍵詞，便于用戶搜索到我們的項(xiàng)目
#最后會(huì)生成package.json文件，這個(gè)是包的配置文件，相當(dāng)于maven的pom.xml
#我們之后也可以根據(jù)需要進(jìn)行修改。
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y
2、修改npm鏡像
NPM官方的管理的包都是從?http://npmjs.com下載的，但是這個(gè)網(wǎng)站在國(guó)內(nèi)速度很慢。
這里推薦使用淘寶 NPM 鏡像?http://npm.taobao.org/，淘寶 NPM 鏡像是一個(gè)完整 npmjs.com 鏡像，同步頻率目前為 10分鐘一次，以保證盡量與官方服務(wù)同步。
設(shè)置鏡像地址：
#經(jīng)過(guò)下面的配置，以后所有的 npm install 都會(huì)經(jīng)過(guò)淘寶的鏡像地址下載
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
3、npm install命令的使用
#使用 npm install 安裝依賴包的最新版，
#模塊安裝的位置：項(xiàng)目目錄\node_modules
#安裝會(huì)自動(dòng)在項(xiàng)目目錄下添加 package-lock.json文件，這個(gè)文件幫助鎖定安裝包的版本
#同時(shí)package.json 文件中，依賴包會(huì)被添加到dependencies節(jié)點(diǎn)下，類似maven中的 <dependencies>
npm install jquery
#npm管理的項(xiàng)目在備份和傳輸?shù)臅r(shí)候一般不攜帶node_modules文件夾
npm install #根據(jù)package.json中的配置下載依賴，初始化項(xiàng)目
#如果安裝時(shí)想指定特定的版本
npm install jquery@2.1.x
#devDependencies節(jié)點(diǎn)：開發(fā)時(shí)的依賴包，項(xiàng)目打包到生產(chǎn)環(huán)境的時(shí)候不包含的依賴
#使用 -D參數(shù)將依賴添加到devDependencies節(jié)點(diǎn)
#本工作區(qū)可用
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 包名
07-Babel
一、簡(jiǎn)介?
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行執(zhí)行。
這意味著，你可以現(xiàn)在就用 ES6 編寫程序，而不用擔(dān)心現(xiàn)有環(huán)境是否支持。
二、安裝
安裝命令行轉(zhuǎn)碼工具
Babel提供babel-cli工具，用于命令行轉(zhuǎn)碼。它的安裝命令如下：
npm install --global babel-cli
#查看是否安裝成功
babel --version
三、Babel的使用
1、初始化項(xiàng)目
npm init -y
2、創(chuàng)建文件
src/example.js
下面是一段ES6代碼：
//?轉(zhuǎn)碼前
//?定義數(shù)據(jù)
let?input=[1,2,3]
//?將數(shù)組的每個(gè)元素?+1
input=input.map(item=>item+1)
console.log(input)
2、配置.babelrc
Babel的配置文件是.babelrc，存放在項(xiàng)目的根目錄下，該文件用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本格式如下。
{
????"presets": [],
????"plugins": []
}
presets字段設(shè)定轉(zhuǎn)碼規(guī)則，將es2015規(guī)則加入 .babelrc：
{
????"presets":?["es2015"],
????"plugins":?[]
}
3、安裝轉(zhuǎn)碼器
在項(xiàng)目中安裝
npm install --save-dev babel-preset-es2015
4、轉(zhuǎn)碼
# --out-file 或 -o 參數(shù)指定輸出文件
babel es6/01.js --out-file dist1/001.js
# 或者
babel es6/01.js --o dist1/001.js
# 整個(gè)目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
babel src --out-dir dist2
# 或者
babel es6 -d dist1
08-模塊化
一、模塊化簡(jiǎn)介
1、模塊化產(chǎn)生的背景
隨著網(wǎng)站逐漸變成"互聯(lián)網(wǎng)應(yīng)用程序"，嵌入網(wǎng)頁(yè)的Javascript代碼越來(lái)越龐大，越來(lái)越復(fù)雜。
Javascript模塊化編程，已經(jīng)成為一個(gè)迫切的需求。理想情況下，開發(fā)者只需要實(shí)現(xiàn)核心的業(yè)務(wù)邏輯，其他都可以加載別人已經(jīng)寫好的模塊。
但是，Javascript不是一種模塊化編程語(yǔ)言，它不支持"類"（class），包（package）等概念，更遑論"模塊"（module）了。
2、什么是模塊化開發(fā)
傳統(tǒng)非模塊化開發(fā)有如下的缺點(diǎn)：
????命名沖突
????文件依賴
模塊化規(guī)范：
????CommonJS模塊化規(guī)范
????ES6模塊化規(guī)范
二、CommonJS模塊規(guī)范
每個(gè)文件就是一個(gè)模塊，有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類，都是私有的，對(duì)其他文件不可見。
1、創(chuàng)建“module”文件夾
2、導(dǎo)出模塊
創(chuàng)建 common-js模塊化/01.js
//創(chuàng)建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)
}
導(dǎo)出模塊中的成員
//設(shè)置哪些方法可以被其他js調(diào)用
// 導(dǎo)出成員：
module.exports={
????sum:sum,
????subtract:subtract,
????multiply:multiply,
????divide:divide
}
簡(jiǎn)寫：
module.exports?=?{
????sum,
????subtract,
????multiply,
????divide
}
3、導(dǎo)入模塊
創(chuàng)建 common-js模塊化/02.js
//調(diào)用01.js里面的方法
//1、引入模塊，注意：當(dāng)前路徑必須寫?./
const?m?=?require('./01.js')
//2?調(diào)用
const?result1?=?m.sum(1,2)
const?result2?=?m.subtract(3,4)
console.log(result1,result2)
4、運(yùn)行程序
E:\blog\1010\module\e5module> node 02.js
CommonJS使用 exports 和require 來(lái)導(dǎo)出、導(dǎo)入模塊。
三、ES6模塊化規(guī)范
ES6使用 export 和 import 來(lái)導(dǎo)出、導(dǎo)入模塊。
因?yàn)镋S6的模塊化無(wú)法在Node.js中執(zhí)行，需要用Babel編輯成ES5后再執(zhí)行。
1、導(dǎo)出模塊
創(chuàng)建 es6模塊化/01.js
//定義方法，設(shè)置哪些方法可以被其他js調(diào)用
export?function?getList(){
????console.log('獲取數(shù)據(jù)列表')
}
export?function?save(){
????console.log('保存數(shù)據(jù)')
}
2、導(dǎo)入模塊
創(chuàng)建 es6模塊化/02.js
//調(diào)用01.js的方法，引入01.js文件，進(jìn)行調(diào)用
//只取需要的方法即可，多個(gè)方法用逗號(hào)分隔
import?{getList,save}?from?"./01.js"
getList()
save()
3、運(yùn)行程序
babel es61 -d es62
node 02.js
四、ES6模塊化的另一種寫法
1、導(dǎo)出模塊
創(chuàng)建 es6模塊化/01.js
export?default{
????getList(){
????????console.log('獲取數(shù)據(jù)列表2')
????},
????save(){
????????console.log('保存數(shù)據(jù)2')
????}
}
2、導(dǎo)入模塊
創(chuàng)建 es6模塊化/02.js
import?m?from?'./01.js'
m.getList()
m.save()
將ES6代碼轉(zhuǎn)為ES5代碼：
babel es611 -d es622
運(yùn)行程序：
09-Webpack
一、什么是Webpack
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。
從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。?
二、Webpack安裝
1、全局安裝
npm install -g webpack webpack-cli
2、安裝后查看版本號(hào)
webpack -v
三、初始化項(xiàng)目
1、創(chuàng)建webpack文件夾
進(jìn)入webpack目錄，執(zhí)行命令
npm init -y
2、創(chuàng)建src文件夾
3、src下創(chuàng)建common.js
exports.info?=?function(str){
????document.write(str);?//瀏覽器輸出
}
4、src下創(chuàng)建utils.js
exports.add?=?function(a,b){
????return?a+b;
}
5、src下創(chuàng)建main.js
const?common?=?require('./common.js');
const?utils?=?require('./utils');
common.info('Hello?world!'?+?utils.add(100,200));
四、JS打包
1、webpack目錄下創(chuàng)建配置文件webpack.config.js
以下配置的意思是：讀取當(dāng)前項(xiàng)目目錄下src文件夾中的main.js（入口文件）內(nèi)容，分析資源依賴，把相關(guān)的js文件打包，打包后的文件放入當(dāng)前目錄的dist文件夾下，打包后的js文件名為bundle.js
const?path?=?require("path");?//Node.js內(nèi)置模塊
module.exports?=?{
????entry:?'./src/main.js',?//配置入口文件
????output:?{
????????path:?path.resolve(__dirname,?'./dist'),?//輸出路徑，__dirname：當(dāng)前文件所在路徑
????????filename:?'bundle.js'?//輸出文件
????}
}
2、命令行執(zhí)行編譯命令
webpack#有黃色警告
webpack --mode=development#沒有警告
#執(zhí)行后查看bundle.js 里面包含了上面兩個(gè)js文件的內(nèi)容并驚醒了代碼壓縮
也可以配置項(xiàng)目的npm運(yùn)行命令，修改package.json文件
運(yùn)行npm命令執(zhí)行打包
npm run dev
3、webpack目錄下創(chuàng)建index.html
引用bundle.js
<script?src="dist/bundle.js"></script>
4、瀏覽器中查看index.html
五、CSS打包
1、安裝style-loader和?css-loader
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器。
首先我們需要安裝相關(guān)Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認(rèn)識(shí)css
npm install --save-dev style-loader css-loader
2、修改webpack.config.js
const?path?=?require("path");?//Node.js內(nèi)置模塊
module.exports?=?{
????entry:?'./src/main.js',?//配置入口文件
????output:?{
????????path:?path.resolve(__dirname,?'./dist'),?//輸出路徑，__dirname：當(dāng)前文件所在路徑
????????filename:?'bundle.js'?//輸出文件
????},
????module:?{
????????????????rules:?[
????????????????????{
????????????????????????test:?/\.css$/,????//打包規(guī)則應(yīng)用到以css結(jié)尾的文件上
????????????????????????use:?['style-loader',?'css-loader']
????????????????????}??
????????????????]
????????????}
}
3、在src文件夾創(chuàng)建style.css
body{
????background-color:?pink;
}
4、修改main.js?
在第一行引入style.css
require('./style.css')
5、瀏覽器中查看index.html
打包：
index.html：
10-vue-element-admin
一、vue-element-admin?
1、簡(jiǎn)介
而vue-element-admin是基于element-ui?的一套后臺(tái)管理系統(tǒng)集成方案。
功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能
GitHub地址：https://github.com/PanJiaChen/vue-element-admin
項(xiàng)目在線預(yù)覽：https://panjiachen.gitee.io/vue-element-admin
2、安裝
# 解壓壓縮包
# 進(jìn)入目錄
# 安裝依賴
npm install
# 啟動(dòng)。執(zhí)行后，瀏覽器自動(dòng)彈出并訪問(wèn)http://localhost:9527/
npm run dev
二、vue-admin-template
1、簡(jiǎn)介
vueAdmin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開發(fā)。
GitHub地址：https://github.com/PanJiaChen/vue-admin-template
建議：你可以在?vue-admin-template?的基礎(chǔ)上進(jìn)行二次開發(fā)，把?vue-element-admin當(dāng)做工具箱，想要什么功能或者組件就去?vue-element-admin?那里復(fù)制過(guò)來(lái)。
2、安裝
# 解壓壓縮包
# 進(jìn)入目錄
# 安裝依賴
npm install
# 啟動(dòng)。執(zhí)行后，瀏覽器自動(dòng)彈出并訪問(wèn)http://localhost:9528/
npm run dev
11-后臺(tái)系統(tǒng)前端項(xiàng)目創(chuàng)建
一、項(xiàng)目的創(chuàng)建和基本配置
1、創(chuàng)建項(xiàng)目
將vue-admin-template-master重命名為guli-admin
2、修改項(xiàng)目信息
package.json
3、如果需要修改端口號(hào)
config/index.js中修改
port:9528
4、項(xiàng)目的目錄結(jié)構(gòu)
5、運(yùn)行項(xiàng)目
npm run dev
二、登錄頁(yè)修改
src/views/login/index.vue（登錄組件）
4行
<h3 class="title">谷粒學(xué)院后臺(tái)管理系統(tǒng)</h3>
28行
<el-button:loading="loading"type="primary"style="width:100%;"@click.native.prevent="handleLogin">
?? 登錄
</el-button>
三、頁(yè)面零星修改
1、標(biāo)題
index.html（項(xiàng)目的html入口）
<title>谷粒學(xué)院后臺(tái)管理系統(tǒng)</title>
修改后熱部署功能，瀏覽器自動(dòng)刷新
2、國(guó)際化設(shè)置
打開 src/main.js（項(xiàng)目的js入口），第7行，修改語(yǔ)言為?zh-CN，使用中文語(yǔ)言環(huán)境，例如：日期時(shí)間組件
import locale from 'element-ui/lib/locale/lang/zh-CN'? // lang i18n
3、icon
復(fù)制?favicon.ico 到根目錄
4、導(dǎo)航欄文字
src/views/layout/components（當(dāng)前項(xiàng)目的布局組件）
src/views/layout/components/Navbar.vue
13行
<el-dropdown-item>
?? 首頁(yè)
</el-dropdown-item>
17行
<span style="display:block;" @click="logout">退出</span>
5、面包屑文字
src/components（可以在很多項(xiàng)目中復(fù)用的通用組件）
src/components/Breadcrumb/index.vue
38行
meta: { title: '首頁(yè)' }
四、Eslint語(yǔ)法規(guī)范型檢查
1、ESLint簡(jiǎn)介
JavaScript 是一個(gè)動(dòng)態(tài)的弱類型語(yǔ)言，在開發(fā)中比較容易出錯(cuò)。因?yàn)闆]有編譯程序，為了尋找 JavaScript 代碼錯(cuò)誤通常需要在執(zhí)行過(guò)程中不斷調(diào)適。
ESLint 是一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以用來(lái)保證寫出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。讓程序員在編碼的過(guò)程中發(fā)現(xiàn)問(wèn)題而不是在執(zhí)行的過(guò)程中。
2、語(yǔ)法規(guī)則
ESLint 內(nèi)置了一些規(guī)則，也可以在使用過(guò)程中自定義規(guī)則。
本項(xiàng)目的語(yǔ)法規(guī)則包括：兩個(gè)字符縮進(jìn)，必須使用單引號(hào)，不能使用雙引號(hào)，語(yǔ)句后不可以寫分號(hào)，代碼段之間必須有一個(gè)空行等。
3、確認(rèn)開啟語(yǔ)法檢查
打開?config/index.js，配置是否開啟語(yǔ)法檢查
useEslint:true,
可以關(guān)閉語(yǔ)法檢查，建議開啟，養(yǎng)成良好的編程習(xí)慣。
4、ESLint插件安裝
vs code的ESLint插件，能幫助我們自動(dòng)整理代碼格式?
5、插件的擴(kuò)展設(shè)置
選擇vs code左下角的“設(shè)置”， 打開 VSCode 配置文件,添加如下配置
"files.autoSave":"off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
? {
"language":"vue",
"autoFix":true
? }
],
"eslint.run":"onSave",
"eslint.autoFixOnSave":true
