這篇文章主要介紹了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界面初體驗。
總結
以上所述是小編給大家介紹的vue cli 3.0 搭建項目的圖文教程 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！