目錄

• 環境及知識準備
  • 執行環境
  • 構建環境
  • 編輯器
  • 基礎知識
• 業務開發流程
• 工程構建
  • 構建工具（webpack）
    • 專案準備
    • 建立配置檔案

環境及知識準備

執行環境

• nvm管理node版本為8.9.1

可能會用到的指令

檢視已安裝的node版本：nvm ls

安裝指定版本的node：nvm install [版本號]

切換當前node的版本：nvm use [版本號]

• Git

  簡易基礎教程

• Chrome最新瀏覽器v62+

構建環境

• Webpack3.10.0

  Webpack中文文件

• npm scripts

  npm scripts 使用指南

• babel

  Babel中文官網

  ES6和Babel你不知道的事兒

編輯器

• VSCode
• ESLint

基礎知識

• ES6

  http://es6-features.org/#Constans

• Sass

  https://sass.bootcss.com/

• Vue.js

  https://cn.vuejs.org/

業務開發流程

技術選型

1. 構建工具

   1. 構建工具有哪些

      gulp grunt webpack fis prepack rollup

   2. 為什麼要構建工具

      資源壓縮 靜態資源替換 模組化處理 編譯處理

   3. 我們用哪個構建工具

      webpack用作編譯 npm scripts用作任務管理

2. MVVM框架選擇

   Vue.js React.js Angular.js

3. 模組化設計

   css模組化設計

   JavaScript模組化設計

程式碼維護及複用性設計的思考

需求變更

產品迭代

Bug定位

新功能開發

業務開發

測試驗證

釋出上線

工程構建

構建工具（webpack）

專案準備

1. 建立目錄

2. 初始化

   通過npm init自動化建立package.json，有這個檔案才能使用npm

3. 建立業務目錄

   app>js>main,APP.vue **

   app>css>reset.scss

   app>views>index.html

建立配置檔案

1. 建立配置檔案

   webpack.config.js

2. 檔案的具體配置

   基礎配置：entry module plugins output

   進階配置：resolve devtool devServer

   安裝依賴
   npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]