前端架構之初始化vue 2.x項目

用vue-cli建構vue 2.x項目

• 環境要求
• 建構項目

環境要求

1. 檢查是否安裝node.js運作環境

//終端輸入
node -v
           

2. 檢查是否安裝npm和cnpm包管理程式

//終端輸入
npm -v
cnpm -v  // 淘寶鏡像專用通道
           

3. 檢查是否安裝webpack建構工具

//終端輸入
webpack -v // 這個必須是項目裡有安裝，然後到項目目錄下才能用這個指令檢查版本
npm webpack -v // 注意這是查詢安裝全局的webpack
           

4. 檢查是否安裝vue-cli手腳架

npm install vue  // 安裝vue
//終端輸入，這裡是大寫的"V"
vue -V
           

确定以上環境都沒問題後，那麼我們就往前走，建構項目開始。

建構項目

第一步：直接在code目錄（本人代碼項目習慣）右鍵選擇Git Bash Here(本着已安裝git) 你們看着辦

第二步：在終端開始安裝指令

//終端輸入,"project"是項目名稱,大家随意，不要中文就行
vue init webpack project
           

Administrator/d/code
$ vue init webpack project--------------------- 安裝項目指令

? Project name (project) --------------------- 項目名稱
? Project name project
? Project description (A Vue.js project)--------------------- 項目描述
? Project description A Vue.js project
? Author  xiaomai--------------------- 建立項目人
? Author xiaomai
? Vue build standalone
? Install vue-router? (Y/n) Y --------------------- 是否安裝路由，一般都是裝
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n--------------------- 是否開啟嚴格代碼編寫格式ESLint，新手建議不用
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) Y--------------------- 設定單元測試，這裡你可以選擇n
? Set up unit tests Yes
? Pick a test runner (Use arrow keys)
? Pick a test runner karma--------------------- 直接回車就好
? Setup e2e tests with Nightwatch? (Y/n) y
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
> Yes, use NPM--------------------- 一般直接回車就好
  Yes, use Yarn
  No, I will handle that myself

           

打開根目錄下的package.json你會看到vue依賴版本2.x

如果需要1.0版本終端指令：vue init webpack#1.0 project

别問我是不是3.x同理建立，别逗了，暫時隻有2.x和1.x，反正換成3你也建立不了，可以說3.x需要參考其他具體教程

打開根目錄下的package.json你會看到vue依賴版本1.x

第三步：啟動項目

1. 進入項目目錄

cd project
           

如果沒有安裝依賴就執行這一段指令，否則請忽略這段

npm i
           

2. 進入項目目錄

npm run dev
           

3. 浏覽器輸入以上截圖紅色框起來的位址