使用腳手架搭建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】，敬請期待。項目