（一) 關于mac
- 開發環境：
Homebrew ( Mac的包管理神器 ) → Node.js → cnpm（淘寶鏡像，節省安裝時間） → webpack → vue-cli（vue腳手架） → IDE（ Vue開發我用的是VSCode ）
- 打開terminal 安裝homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - 安裝node.js
- 直接在node.js官網下載安裝，全程傻瓜式安裝。node.js是自帶npm的，npm在后面安裝別的環境需要用到。
- 安裝完后，我們可以通過在terminal中輸入 node -v ，npm -v 分別檢查node.js 和npm 的版本--
- mac 這里需要注意?。∫onpm安裝目錄訪問權限，否則npm安裝別的東西都會失?。ㄖ辽傥沂沁@樣子...）
sudo chmod -R 777 /usr/local/lib/node_modules/
安裝cnpm
在terminal里輸入
npm install -g cnpm --registry=https://registry.npm.taobao.org安裝webpack
cnpm install webpack -g
在terminal中輸入webpack -v檢查是否安裝成功以及查看版本號安裝vue-cli
npm install vue-cli -g
在terminal中輸入vue -V（注意這里是大寫V）檢查是否安裝成功以及查看版本號安裝VSCode
（二) 關于windows
https://www.cnblogs.com/zhaomeizi/p/8483597.html
很詳細的步驟，一步一步的按照操作來，記得用管理員的terminal去運行npm的指令，管理員的terminal這樣去打開。這樣在加載淘寶鏡像的時候可以不報錯。
勾選對號
（三) 安裝之后會依次填寫一些關于項目的信息：
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 projectname
? Project name (projectname)
? Project name projectname
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author Joe --------------------- 項目創建者
? Author Joe
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用ESLint
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "projectname".
To get started: --------------------- 這里說明后續的三個步驟
cd projectname
npm install
npm run dev
- 項目名稱、關于項目的描述、作者名稱
- 找一個放工程的文件夾，terminal cd 到該目錄，mac下可以直接把文件夾拖到terminal ，會自動填入路徑
- 使用vue-cli創建項目，需要注意項目的名字不能用中文
vue init webpack-simple projectname - 到選擇Vue build方式時，有兩種方式，第一種為standalone方式，第二種runtime-only為runtime方式。
runtime 打包的是 /node_modules/vue/dist/vue.common.js
standalone 打包的是 /node_modules/vue/dist/vue.js
Vue2.0有兩種Build的方式：the standalone build and the runtime-only build（獨立構建和運行時構建）,可以知道：獨立構建包括編譯和支持template選項。但也要依賴于瀏覽器的API，所以不能用于服務端渲染。運行時構建不包括模板編譯，并且不支持template選項，只能使用render選項。
- 是否安裝vue-router（是否安裝路由）
- 是否使用ESLint規范，ESLint 是用來檢查我們寫的 JavaScript 代碼是否滿足指定規則的靜態代碼檢查工具。通過用 ESLint 來檢查一些規則，我們可以統一代碼風格規則，如：代碼縮進用幾個空格；是否用駝峰命名法來命名變量和函數名等。減少錯誤， 如：相等比較必須用 === ，變量在使用前必須被聲明，在條件語句中不能使用賦值語句等。提高代碼質量，如：函數最多有多少條件分支；最多有幾個參數，代碼塊最多能嵌套多少層等。其他。如： 禁用 alert。這可以提高用戶體驗，因為 alert 框的外觀不是那么好看，而且往往與網站的風格不搭，一般都會自定義 alert 框。
- 是否建立單元測試代碼，可以不建立
- 項目建立之后在對應的目錄下就會出現你剛剛建立的文件夾，進入你建立的文件夾，執行$ cnpm i 命令，會自動安裝一些vue項目需要的壓縮包之類的文件。
（四) 創立完成之后會在項目文件夾下自動生成如下目錄，用自己選擇的IDE，例如Vscode直接打開該文件夾即可。
項目目錄
（五) 詳細的文件夾及文件介紹：
![]()
項目目錄介紹
項目目錄介紹
（六) 安裝完成之后運行npm run dev命令運行項目，就可以在瀏覽器中瀏覽建立的最簡單的vue項目了。
-
如果沒有自動跳出來，記得在瀏覽器里輸入localhost:8080
vue頁面
（七) 注意：這里是默認服務啟動的是本地的8080端口，所以請確保你的8080端口不被別的程序所占用。
-
當然這個端口也是可以修改的，在根目錄的config文件夾下有個index.js文件，除了修改端口，還可以根據需要改變其他配置信息。
端口
