一.前端工程化

1.支援環境 node.js

node.js是JavaScript的直譯器

用於後端大的開發,作為前端工具的支援環境

2.NPM包管理工具

包管理工具

整合在node.js中,不需要單獨下載

前端的一切資源都可以通過npm下載,包括前端工具,前端資源

npm install 包名			本地安裝(本專案目錄)	資源類

npm install -g  包名		全域性安裝(命令列工具)
注:install可以簡寫為i

npm uninstall 包名		本地刪除
npm uninstall -g 包名		全域性刪除

專案初始化
npm init
建立一個package.json  裡面是對專案的描述,指定
 

專案中的node.moudules 目錄 不需要上傳
直接執行npm install  自動安裝專案所有的依賴(前提要有package.json)

npm install 包 --save 下載包的同時，加入到package.json中的 `dependencies`
npm install 包 --save-dev 下載包的同時，加入到package.json中的 `devDependencies`  開發階段的依賴

3 模組化工具

• webpack
• Browserify

把前端所有的資源當做模組，向引入模組一樣去使用

4 自動化工具

整合各種應用：程式碼壓縮、圖片壓縮、編譯sass…

• grunt
• gulp
• webpack

二. Vue生成器

集成了webpack、以及其他各種需要的工具

2.1 安裝

npm install -g @vue/cli   安裝3.x
npm install -g vue/cli  安裝的2.x

2.2 使用

vue create 專案名稱   自動生成專案的目錄

2.3 包含的東西

webpack  
babel   把ES6編譯成ES5
eslint  程式碼語法規範
TypeScript   負責把TypeScript編譯成JavaScript
Router(vue-router Vue全家桶成員)   路由
Vuex(Vue全家桶成員)     vue狀態管理 
CSS Pre-processors    CSS預處理 會讓你再次選擇器(SASS、LESS、Stylus...)
Linter / Formatter   語法檢查
Unit Testing      單元測試
E2E Testing      端到端測試
 

2.4 命令

npm run serve  臨時編譯，建立臨時伺服器  loacalhost:8080
npm run build  編譯，生成dist目錄

三. 前端的整合環境 WebStorm

四.專案目錄結構

|- node.modules
|- public
	|- index.html
	|- assess				靜態檔案,圖片,字型
|- src
	|- components			普通元件(區域性)
		|- HelloWorld.vue
	|- views				頁面元件
		|- Home.vue
		|- About.vue
	|- main.js				入口檔案
	|- App.vue				總體結構元件
	|- router.js			路由設定
	|- store.js				狀態管理
|- pageage.json

Vue全家桶

vue				本身
vue-router		路由
vuex			狀態管理
vue-ssr			服務端渲染
element-ui 		vue樣式元件庫