Vue學習——使用vue-cli搭建一個簡單的本地vue項目

前提

• 安裝好node.js、npm、vue-cli。為什么要先安裝這些，建議查看https://www.cnblogs.com/zuiyue_jing/p/10673875.html，這個對於vue-cli理解很重要。

步驟

• 安裝node.js
  • 搜索node.js進入官網，直接下載node.js安裝即可。
     
  • 安裝好之后，打開控制台，輸入node -v命令，命令行顯示出node.js版本就安裝成功。
    
  • Next
• 安裝npm
  • 安裝好node.js之后，npm自動安裝好。安裝好之后，打開控制台，輸入npm -v命令，命令行顯示npm版本就安裝成功。
    
  • Next
• 安裝vue-cli
  • 進入cmd控制台，輸入命令npm config set registry https://registry.npm.taobao.org（網速好，此步驟可省略，直接進入到下一步）
  • 進入cmd控制台，輸入命令npm install -g vue-cli安裝vue-cli。
  • 安裝好之后，輸入命令vue -V（注意V大寫）查看vue-cli是否安裝成功）。
    
  • Next
• 創建項目
  
  • 打開cmd,進入想要創建項目的目錄
  • 進入目錄后，輸入命令 vue init webpack project-name
    • project-name是你打算創建vue項目的名稱
      
  • 輸入命令之后，cmd會自動下載webpack模板，然后出現幾個關於項目信息配置的步驟，依次輸入即可
    
    • Project name：項目名稱，此處你可以選擇更改，直接按下回車鍵，自動默認為初始輸入的項目名稱test-project
    • Project description：項目描述，自己輸入
    • Author：項目開發人員
    • Vue build:項目構建模式，默認即可，按下回車
    • Install vue-router：項目是否安裝vue路由，選擇yes，進行安裝
    • Use ESLint to lint your code：是否選擇ESLint開發驗證功能，新手選擇no
    • Set up unit tests：是否開啟單元測試，建議選擇y，在后期開發中一定會用到的
    • Pick a test runner：選擇開啟單元測試，就會有選擇測試方式，默認即可
    • Setup e2e tests with Nightwatch：是否開啟e2e測試，選擇no
    • Should we run 'npm install' for you after the project has been created
      • Yes，use NPM：選擇這個代表在項目初始化后，會自動使用NPM聯機下載項目所需要的插件
      • Yes，use Yarn：擇這個代表在項目初始化后，會自動使用Yarn聯機下載項目所需要的插件
      • No，I will handle that myself：后期手動下載項目所需要插件
      • 網速好，建議選擇“Yes，use NPM”，網速不好，建議選擇“No，I will handle that myself”
  • 項目創建之后，我們可以看到文件目錄如下
    
    • 注意，紅色框標記的文件夾，如果在創建項目時，沒有選擇“Yes，use NPM”，這個文件夾是不存在的。
  • Next
• 安裝插件（如果在創建項目時最后一步選擇“Yes，use NPM”，此步驟可略過）
  • cmd進入到項目根目錄，輸入命令npm install，開始自動下載項目所需插件。
  • 插件下載完成后，你講會看到上面的完整項目目錄。
• 運行項目
  • cmd進入到項目根目錄,輸入命令npm run dev，如下圖
    
  • 瀏覽器訪問http://localhost:8080/,出現下圖項目搭建成功，在此基礎上開發自己想要的項目即可。
    
  • Next
• Next