vue-cli 3.0 搭建項目

vue-cli 3.0 功能配置及目錄

1. 3.0版本包括了 默認預設配置 和 用戶自定義設置

2. 對比2.0來看3.0的目錄結構更加精簡了

   • 移除了配置文件目錄 （config 和 build文件夾）
   • 移除了 static 文件夾，新增 public 文件夾，而且 index.html 移動到 public 中
   • 在 src 文件夾中新增了 views 文件夾，用於分類 視圖組件 和 公共組件

vue-cli 3.0 搭建

1. 安裝或升級 Node.js

   vue-cli官網對於node版本有明確要求
   Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)
   複製代碼

2. 安裝 vue-cli 3.0

   npm install -g @vue/cli
   複製代碼

   在這裏須要注意的是若是你已經全局安裝了舊版的 vue-cli(1.x或2.x) 
   vue-cli 官網有提到 你須要經過
   npm uninstall vue-cli -g 或者 yarn global remove vue-cli
   來卸載它。
   複製代碼

   • vue-cli腳手架搭建

   vue create hello-world  （搭建一個項目名稱爲 hello-world 的vue前端項目）
   複製代碼

   • 項目配置選項

     a、Manually select features

     

     若是是第一次用3.0的話沒有第一個選項（myProjectinit - 這是本身預設的配置），
     只有最後兩個，第一個是默認配置，通常選第二個，本身配置，這裏選第二個。
     複製代碼

     
     

     b、選擇項目須要的特性 (根據本身需求選擇便可)

     

     此處選擇的是：Babel編譯、Vue路由、Vue狀態管理器、CSS預處理器、代碼檢測
     複製代碼

     
     

     c、router是否使用history模式，這裏使用history模式

     

     選擇 Y
     對於通常的Vue+Vue-router+Webpack的Web開發場景，用history模式便可
     複製代碼

     
     

     d、選擇CSS預處理器語言

     

     選擇第二個 Sass/SCSS (with node-sass)
     複製代碼

     
     

     e、選擇ESLint的代碼規範，此處使用 Standard代碼規範

     

     Standard標準，它是一些前端工程師自定的標準。
     複製代碼

     
     

     f、什麼時候進項代碼監測

     

     選擇在保存時，進項監測
     複製代碼

     
     

     g、Babel、PostCss、ESLint等文件的存放位置

     

     選擇單獨保存在各自的配置文件中
     複製代碼

     
     

     h、詢問是否將此配置項保存爲，預設配置（第一步看到的 myProjectinit 即爲我保存的一個預設配置）

     

     這裏我選擇的是不保存 N 
     須要保存的選擇 Y 便可
     複製代碼

     
     

     i、最後等待vue-cli完成初始化便可

     

     

     項目目錄結構以下圖：

     

     此處即爲初始化完成
     cd 到此目錄下運行 
     npm run serve 
     啓動項目
     serve啓動不習慣，可手動打開根目錄下的package.json文件
     找到 "serve": "vue-cli-service serve" 把 serve 改成 dev
     複製代碼

     vue-cli 3.0還提供了 UI控制檯 來進項項目的管理
     安裝 npm i -g @vue/cli
     在終端執行 vue ui 會默認初始化  localhost:8000  且自動打開 
     複製代碼

     對於 vue-cli 3.0 的 UI控制檯 可視化項目管理界面介紹此文有介紹 vue-cli改版 3.0betaUI界面初體驗