(一) 關于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文件,除了修改端口,還可以根據需要改變其他配置信息。
端口