使用腳手架搭建VUE專案

GuanJunMa發表於2018-08-07
Vue

使用腳手架，從零建立vue 2.x專案

預備

  • 我們假設您已經有過js+html+css的開發經驗。如果您是純粹的小白請參看ECMAScript6 入門
  • 假定您對Webpack和vue-loader有些熟悉。如果您不熟悉請參看webpack demo
  • 您的電腦安裝了node.js 8.0以上環境，加入您的電腦還沒安裝node環境或者node版本過低請參看NODE.JS官網

開始實踐

npm install -g vue-cli
複製程式碼
vue init webpack project-test
複製程式碼
cd project-test
複製程式碼
npm install
複製程式碼
npm run dev
複製程式碼

vue2.x專案結構

├── build/                      # webpack配置檔案
│   └── ...
├── config/
│   ├── index.js                # 主要專案配置
│   └── ...
├── src/
│   ├── main.js                 # 應用入口檔案
│   ├── App.vue                 # 主應用程式元件
│   ├── components/             # 頁面元件
│   │   └── ...
│   └── assets/                 # 模組資源（由webpack處理）
│       └── ...
├── static/                     # 純靜態資源（直接複製）
├── test/
│   └── unit/                   # 單元測試
│   │   ├── specs/              # 測試spec檔案
│   │   ├── index.js            # 測試構建條目檔案
│   │   └── karma.conf.js       # 測試跑步者配置檔案
│   └── e2e/                    # e2e測試
│   │   ├── specs/              # 測試spec檔案
│   │   ├── custom-assertions/  # e2e測試的自定義斷言
│   │   ├── runner.js           # 測試跑步指令碼
│   │   └── nightwatch.conf.js  # 測試跑步者配置檔案
├── .babelrc                    # babel 配置
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # editor 配置
├── index.html                  # index.html模板
└── package.json                # 構建指令碼和依賴關係
複製程式碼
專案結構圖轉自澤鋒
複製程式碼

開發工具介紹

  • 文字編輯器採用vscode,vscode豐富的外掛庫可以滿足絕大部分的使用需求。
  • 命令列工具採用Iterm2 + oh-my-zsh的組合。用過的人都說好。
  • 介面測試採用Postman。
  • 除錯瀏覽器建議使用Chrome，好用不解釋。

結尾

具體的vue2.x的知識點我會在後面的博文中詳細介紹。這裡就不在贅述。關於開發工具每個人都有自己的喜好，小夥們如果有好的意見和建議，可以留言哦。

預告

下期的博文我們會介紹程式碼開發的格式標準。【讓人又愛又恨的ESLint】，敬請期待。專案

相關文章