vue2+vueRouter2+webpack+jsonp（一）構建專案
- 說明：由於本人已經習慣了git的使用，所以本專案的所有命令都是在git中執行的，若大家有其他跑命令的方式也是可以採取的。 git的使用方法
- 1.安裝node
-
安裝好之後，我們在終端輸入以下兩個命令
node -v
npm -v - 2.安裝vue腳手架
-
在終端輸入
npm install -g vue-cli
-
解釋:
1. npm 是 nodejs 的官方包管理器
2. install 命令表示執行安裝操作。
3. -g 是命令引數，代表，這個包將安裝為系統全域性的包。也就是說，在任何地方都可以用這個包。
4. vue-cli 是我們安裝的包的命令。 -
安裝完之後，在終端輸入
vue -V
3.跳轉到我想建專案的資料夾
cd ~/Sites/MyWork
4.用我們剛剛安裝的 vue-cli 腳手架命令 vue ，初始化 init 一個以 webpack 為模板的名叫 my-project 的專案
-
vue init webpack my-project
-
然後，終端會問你
? Project name (my-project)
-
專案名稱是不是 my-project ，我們按回車，表示，是。當然，你也可以重寫一個，然後回車。
然後? Project description (A Vue.js project)
-
專案描述，一個 vue.js 的專案。同樣，我們可以填寫內容，或者直接回車。
-
然後，又問你：
? Author (mhl <[email protected]>)
-
作者，直接回車
-
然後
? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - -
這裡是問你，需要不需要安裝編譯器，預設選擇第一個就好了
-
然後
? Install vue-router? (Y/n)
-
問是不是需要安裝 vue-router ，需要安裝，這個是管理路由的。我們直接回車。
-
然後
? Use ESLint to lint your code? (Y/n)
-
是否需要使用 ESLint 來檢查你的程式碼。需要！所以同上，我們直接回車。
-
然後
? Pick an ESLint preset (Use arrow keys)
Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) -
問你需要使用哪種風格來檢查你的程式碼。我們選擇第一個 Standard 來檢查程式碼。所以，直接回車。
-
然後問你
? Setup unit tests with Karma + Mocha? (Y/n)
-
是否需要安裝測試功能。不要。我們輸入 n 然後回車。
-
然後問你
? Setup e2e tests with Nightwatch? (Y/n)
還是關於測試的內容，我們還是輸出 n 然後回車。 -
5.安裝並跑專案
cd my-project
npm install -d
npm run dev
執行完 npm run dev後預設會自動開啟頁面，頁面如下：
standard 標準風格規範說明
我們在上面安裝了程式碼校驗，並且採用了 standard 標準風格規範。那麼這到底是一個什麼規範呢？
- 縮排使用兩個空格。
- 字串使用單引號，用雙引號只是為了避免轉義單引號。
- 無未使用變數。這能幫助發現大量的錯誤。
- 不使用分號。這麼做，沒問題，真的！
- 行首不能是 ( ，[ 或 ` 。
- 關鍵字後面放一個空格。if (condition) { … }
- 函式名字後面放一個空格。function name (arg) { … }
- 始終用 ===，不要用 ==。不過可以用 obj == null 檢測 null || undefined。
- 始終處理 node.js 回撥的 err 引數。
- 始終以 window 引用瀏覽器的全域性變數。 document 和 navigator 除外。