1.前端開發

下載安裝VScode

優化配置

2、插件安裝

3、設定字體大小

4、開啟完整的Emmet語法支持

5、視圖

2.Node.js 入門

2.1、什么是Node.js

2.2、Node.js有什么用

2.3、安裝下載：

2.4、快速入門

2.5、服務器端應用開發

3、ES6入門

3.2、let宣告變數

3.3、const宣告常量

3.4、解構賦值創建

3.5、模板字串創建

3.6、宣告物件簡寫創建

3.7、定義方法簡寫

3.8、物件拓展運算子

3.9、函式的默認引數

3.10、箭頭函式

4、NPM包管理器

4.1、簡介

4.2、使用npm管理專案

4.3、修改npm鏡像

4.4、npm install

4.5、其他命令

5、Babel

5.1、簡介

5.2、安裝

5.3、Babel的使用

5.4、自定義腳本

6、模塊化

6.1、簡介

6.2、CommonJS規范

6.3、ES6模塊化規范

6.4、ES6模塊化寫法2

7、Webpack

7.1、什么是Webpack

7.2、Webpack安裝

7.3、初始化專案

7.4、JS打包

7.5、Css打包

7.6、配置

1.前端開發

前端工程師“Front-End-Developer”源自于美國，大約從2005年開始正式的前端工程師角色被行業所認可，到了2010年，互聯網開始全面進入移動時代，前端開發的作業越來越重要，最初所有的開發作業都是由后端工程師完成的，隨著業務越來越繁雜，作業量變大，于是我們將專案中的可視化部分和一部分互動功能的開發作業剝離出來，形成了前端開發，由于互聯網行業的急速發展，導致了在不同的國家，有著截然不同的分工體制，在日本和一些人口比較稀疏的國家，例如加拿大、澳洲等，流行“Full-Stack Engineer”，也就是我們通常所說的全堆疊工程師，通俗點說就是一個人除了完成前端開發和后端開發作業以外，有的公司從產品設計到專案開發再到后期運維可能都是同一個人，甚至可能還要負責UI、配影片，也可以是掃地、擦窗、寫檔案、維修桌椅等等，而在美國等互聯網環境比較發達的國家專案開發的分工協作更為明確，整個專案開發分為前端、中間層和后端三個開發階段，這三個階段分別由三個或者更多的人來協同完成，國內的大部分互聯網公司只有前端工程師和后端工程師，中間層的作業有的由前端來完成，有的由后端來完成， PRD（產品原型-產品經理） - PSD（視覺設計-UI工程師） - HTML/CSS/JavaScript（PC/移動端網頁，實作網頁端的視覺展示和互動-前端工程師）

下載安裝VScode

下載地址：https://code.visualstudio.com/

安裝：無腦下一步

優化配置

中文界面配置

首先安裝中文插件：Chinese (Simplified) Language Pack for Visual Studio Code

2、右下角彈出是否重啟vs，點擊“yes”

3、有些機器重啟后如果界面沒有變化，則點擊左邊欄Manage -> Command Paletet... 【Ctrl+Shift+p】

4、在搜索框中輸入“configure display language”，回車 5、打開locale.json檔案，修改檔案下的屬性 "locale":"zh-cn"

{
// 定義 VS Code 的顯示語言，
// 請參閱 https://go.microsoft.com/fwlink/?LinkId=761051，了解支持的語言串列
"locale":"zh-cn" // 更改將在重新啟動 VS Code 之后生效，
}

6、重啟vscode

2、插件安裝

為方便后續開發，建議安裝如下插件.

3、設定字體大小

左邊欄Manage -> settings -> 搜索 “font” -> Font size

4、開啟完整的Emmet語法支持

設定中搜索 Emmet：啟用如下選項，必要時重啟vscode

5、視圖

查看--> 外觀--> 向左移動側邊欄

2.Node.js 入門

2.1、什么是Node.js

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

2.2、Node.js有什么用

如果你是一個前端程式員，你不懂得像PHP、Python或Ruby等動態編程語言，然后你想創建自己的服務，那么Node.js是一個非常好的選擇， Node.js 是運行在服務端的 JavaScript，如果你熟悉Javascript，那么你將會很容易的學會Node.js，當然，如果你是后端程式員，想部署一些高性能的服務，那么學習Node.js也是一個非常好的選擇，

2.3、安裝下載：

下載：https://nodejs.org/en/

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

LTS：長期支持版本

Current：最新版

安裝：無腦下一步

查看版本

node -v
C:\Users\Administrator>node -v
v12.14.0
# 由于新版的nodejs已經集成了npm，所以之前npm也一并安裝好了，同樣可以使用cmd命令列輸
入“npm -v”來測驗是否安裝成功，
npm -v
C:\Users\Administrator>npm -v
6.13.4
# 安裝相關環境 express快速、開放、極簡的 Web 開發框架
npm install express -g
# 安裝淘寶鏡像，防止下載較慢
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.4、快速入門

1、創建檔案夾 nodejs

2、創建 01-控制臺程式.js

3、打開命令列終端：Ctrl + Shift + y

4、進入到程式所在的目錄，終端

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

DOM渲染引擎；
java script 決議器（js引擎）
js運行在瀏覽器內核中的js引擎內部

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

2.5、服務器端應用開發

1、創建 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/')

2、運行服務器程式；

node 02-server-app.js

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

4、停止服務：ctrl + c 如果想開發更復雜的基于Node.js的應用程式后臺，需要進一步學習Node.js的Web開發相關框架 express，art-template等

3、ES6入門

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

ECMAScript 和 JavaScript 的關系

一個常見的問題是，ECMAScript 和 JavaScript 到底是什么關系？要講清楚這個問題，需要回顧歷史，1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標準，次年，ECMA 發布 262 號標準檔案（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript，這個版本就是 1.0 版，因此，ECMAScript 和 JavaScript 的關系是，前者是后者的規格，后者是前者的一種實作（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）

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的最少必要知識，方便專案開發中對代碼的理解，

3.2、let宣告變數

1、創建 01-let.js

// 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

// var 會變數提升
// let 不存在變數提升
console.log(x) //undefined
var x = 'apple'
console.log(y) //ReferenceError: y is not defined
let y = 'banana'

// var 會變數提升
// let 不存在變數提升
console.log(x) //undefined
var x = 'apple'
console.log(y) //ReferenceError: y is not defined
let y = 'banana'

3.3、const宣告常量

創建 02-const.js

// 1、宣告之后不允許改變
const PI = '3.1415926'
PI = 3 // TypeError: Assignment to constant variable.

// 2、一但宣告必須初始化，否則會報錯
const MY_AGE // SyntaxError: Missing initializer in const declaration

3.4、解構賦值創建

03-解構賦值.js

解構賦值是對賦值運算子的擴展，他是一種針對陣列或者物件進行模式匹配，然后對其中的變數進行賦值，在代碼書寫上簡潔且易讀，語意更加清晰明了；也方便了復雜物件中資料欄位獲取，

//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)

//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)

3.5、模板字串創建

04-模板字串.js

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

// 字串插入變數和運算式，變數名寫在 ${} 中，${} 中可以放入 JavaScript 運算式，
let name = 'sunjiaoshou'
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Kuangshen,I am 28 years old next year.

3.6、宣告物件簡寫創建

05-宣告物件簡寫.js

const age = 12
const name = 'sunjiaoshou'
// 傳統
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: 'sunjiaoshou'}

3.7、定義方法簡寫

創建 06-定義方法簡寫.js

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

3.8、物件拓展運算子

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

let person = {name: 'sunjiaoshou', age: 15}
let someoneOld = person //參考賦值
let someone = { ...person } //對拷拷貝
someoneOld.name = 'sunjiaoshou'
someone.name = 'sunjiaoshou'
console.log(person) //{name: 'sunjiaoshou', age: 15}
console.log(someoneOld) //{name: 'sunjiaoshou', age: 15}
console.log(someone) //{name: 'sunjiaoshou', age: 15}

3.9、函式的默認引數

創建 08-函式的默認引數.js

function showInfo(name, age = 17) {
console.log(name + "," + age)
}
// 只有在未傳遞引數，或者引數為 undefined 時，才會使用默認引數
// null 值被認為是有效的值傳遞，
showInfo("sunjiaoshou", 18) // sunjiaoshou,18
showInfo("sunjiaoshou") // sunjiaoshou,17
showInfo("sunjiaoshou", undefined) // sunjiaoshou,17
showInfo("sunjiaoshou", null) // sunjiaoshou, null

3.10、箭頭函式

創建 09-箭頭函式.js

箭頭函式提供了一種更加簡潔的函式書寫方式，

基本語法是：引數 => 函式體

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

let arr = ["10", "5", "40", "25", "1000"]
let arr1 = arr.sort()
console.log(arr1)
//上面的代碼沒有按照數值的大小對數字進行排序，
//要實作這一點，就必須使用一個排序函式
arr2 = arr.sort(function(a,b){
return a - b
})
// arr2 = arr.sort((a,b) => {return a - b})
// arr2 = arr.sort((a,b) => a - b)
console.log(arr2)

let arr = ["10", "5", "40", "25", "1000"]
let arr1 = arr.sort()
console.log(arr1)
//上面的代碼沒有按照數值的大小對數字進行排序，
//要實作這一點，就必須使用一個排序函式
arr2 = arr.sort(function(a,b){
return a - b
})
// arr2 = arr.sort((a,b) => {return a - b})
// arr2 = arr.sort((a,b) => a - b)
console.log(arr2)

4、NPM包管理器

4.1、簡介

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

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

4.2、使用npm管理專案

1、創建檔案夾npm

2、專案初始化

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

#如果想直接生成 package.json 檔案，那么可以使用命令 npm init -y

4.3、修改npm鏡像

1、修改npm鏡像

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

這里推薦使用淘寶 NPM 鏡像 http://npm.taobao.org/

淘寶 NPM 鏡像是一個完整 npmjs.com 鏡像，同步頻率目前為 10分鐘一次，以保證盡量與官方服務同步，

2、設定鏡像地址

#經過下面的配置，以后所有的 npm install 都會經過淘寶的鏡像地址下載

npm config set registry https://registry.npm.taobao.org

#查看npm配置資訊

npm config list

4.4、npm install

#使用 npm install 安裝依賴包的最新版，
#模塊安裝的位置：專案目錄\node_modules
#安裝會自動在專案目錄下添加 package-lock.json檔案，這個檔案幫助鎖定安裝包的版本
#同時package.json 檔案中，依賴包會被添加到dependencies節點下，類似maven中的
<dependencies>
npm install jquery
#如果安裝時想指定特定的版本
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
#npm管理的專案在備份和傳輸的時候一般不攜帶node_modules檔案夾
npm install #根據package.json中的配置下載依賴，初始化專案

4.5、其他命令

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

5、Babel

5.1、簡介

ES6的某些高級語法在瀏覽器環境甚至是Node.js環境中無法執行， Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行執行，這意味著，你可以現在就用 ES6 撰寫程式，而不用擔心現有環境是否支持，

5.2、安裝

安裝命令列轉碼工具

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

npm install -g babel-cli
#查看是否安裝成功
babel --version

5.3、Babel的使用

1、創建babel檔案夾

2、初始化專案

npm init -y

3、創建檔案 src/example.js ，下面是一段ES6代碼：

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

4、配置 .babelrc

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

{

"presets": [],

"plugins": []

}

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

{

"presets": ["es2015"],

"plugins": []

}

5、安裝轉碼器，在專案中安裝

npm install --save-dev babel-preset-es2016

6、轉碼

# npm install --save-dev csv-loader xml-loader
# 轉碼結果寫入一個檔案
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

5.4、自定義腳本

1、改寫package.json

{
// ...
"scripts": {
// ...
"build": "babel src\\example.js -o dist\\compiled.js"
},
}

2、轉碼的時候，執行下面的命令

mkdir dist

npm run build

6、模塊化

6.1、簡介

模塊化產生的背景隨著網站逐漸變成"互聯網應用程式"，嵌入網頁的Javascript代碼越來越龐大，越來越復雜，

Javascript模塊化編程，已經成為一個迫切的需求，理想情況下，開發者只需要實作核心的業務邏輯，其他都可以加載別人已經寫好的模塊，但是，Javascript不是一種模塊化編程語言，它不支持"類"（class），包（package）等概念，也不支持"模塊"（module），模塊化規范 CommonJS模塊化規范 ES6模塊化規范

6.2、CommonJS規范

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

1、創建“module”檔案夾

2、創建 mokuai-common-js/四則運算.js

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

3、匯出模塊中的成員

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

4、創建 mokuai-common-js/引入模塊.js

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

5、運行程式

node 引入模塊.js

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

6.3、ES6模塊化規范

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

1、創建 mokuai-es6 檔案夾

2、創建 src/userApi.js 檔案，匯出模塊

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

3、創建 src/userComponent.js檔案，匯入模塊

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

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

4.初始化專案

npm init -y

5、配置 .babelrc

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

6、安裝轉碼器，在專案中安裝

npm install --save-dev babel-preset-es2016

7、定義運行腳本，package.json中增加"build"

{
// ...
"scripts": {
"build": "babel src -d dist"
}
}

8、執行命令轉碼

npm run build

9、運行程式

node dist/userComponent.js

6.4、ES6模塊化寫法2

1、創建 src/userApi

2.js ，匯出模塊

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

2、創建 src/userComponent2.js，匯入模塊

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

3、執行命令轉碼

npm run build

4、運行程式

node dist/userComponent2.js

7、Webpack

7.1、什么是Webpack

Webpack 是一個前端資源加載/打包工具，它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源，從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的請求，

7.2、Webpack安裝

1、全域安裝

npm install -g webpack webpack-cli

2、安裝后查看版本號

webpack -v

7.3、初始化專案

1、創建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));

7.4、JS打包

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

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

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

2、命令列執行編譯命令

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

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

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、運行編譯命令

npm run dev

6、瀏覽器中查看index.html ，看看背景是不是變成粉色啦？

7.6、配置

entry：入口檔案，指定

WebPack 用哪個檔案作為專案的入口

output：輸出，指定

WebPack 把處理完成的檔案放置到指定路徑

module：模塊，用于處理各種型別的檔案

plugins：插件，如：熱更新、代碼重用等

resolve：設定路徑指向

watch：監聽，用于設定檔案改動后直接打包

module.exports = {
entry: "",
output: {
path: "",
filename: ""
},
module: {
loaders: [
{test: /\.js$/, loader: ""}
]
},
plugins: {},
resolve: {},
watch: true
}

把這些知識都學習完畢了，去個大型的外包公司要個15K問題不大！

好啦，本期的內容就分享到這里，我們下期見！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/336177.html

標籤：其他

上一篇：都說Java行業飽和了，為什么我們公司給初級Java開發開到了12K?

下一篇：Python爬蟲能當副業嗎？到了哪個層次能接單?決議Python爬蟲掙錢方式!

15K的前端應屆畢業生，就因為掌握了這些知識點！（前端企業級開發必備）

1.前端開發

下載安裝VScode

優化配置

2、插件安裝

3、設定字體大小

4、開啟完整的Emmet語法支持

5、視圖

2.Node.js 入門

2.1、什么是Node.js

2.2、Node.js有什么用

2.3、安裝 下載：

2.4、快速入門

2.5、服務器端應用開發

3、ES6入門

3.2、let宣告變數

3.3、const宣告常量

3.4、解構賦值 創建

3.5、模板字串 創建

3.6、宣告物件簡寫 創建

3.7、定義方法簡寫

3.8、物件拓展運算子

3.9、函式的默認引數

3.10、箭頭函式

4、NPM包管理器

4.1、簡介

4.2、使用npm管理專案

4.3、修改npm鏡像

4.4、npm install

4.5、其他命令

5、Babel

5.1、簡介

5.2、安裝

5.3、Babel的使用

5.4、自定義腳本

6、模塊化

6.1、簡介

6.2、CommonJS規范

6.3、ES6模塊化規范

6.4、ES6模塊化寫法2

7、Webpack

7.1、什么是Webpack

7.2、Webpack安裝

7.3、初始化專案

7.4、JS打包

7.5、Css打包

7.6、配置

2.3、安裝下載：

3.4、解構賦值創建

3.5、模板字串創建

3.6、宣告物件簡寫創建