vue cli 3.0 搭建項(xiàng)目的圖文教程

更新時(shí)間：2019年05月17日 11:50:25 作者：Dream_web

這篇文章主要介紹了vue cli 3.0 搭建項(xiàng)目的圖文教程，本文通過圖片文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.3.0版本包括了默認(rèn)預(yù)設(shè)配置和用戶自定義設(shè)置

2.對比2.0來看3.0的目錄結(jié)構(gòu)更加精簡了

移除了配置文件目錄（config 和 build文件夾）

移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動(dòng)到 public 中

在 src 文件夾中新增了 views 文件夾，用于分類視圖組件和公共組件

vue-cli 3.0 搭建

1. 安裝或升級 Node.js

vue-cli官網(wǎng)對于node版本有明確要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)

2.安裝 vue-cli 3.0

npm install -g @vue/cli
在這里需要注意的是如果你已經(jīng)全局安裝了舊版的 vue-cli(1.x或2.x) 
vue-cli 官網(wǎng)有提到 你需要通過
npm uninstall vue-cli -g 或者 yarn global remove vue-cli
來卸載它。

vue-cli腳手架搭建

vue create hello-world （搭建一個(gè)項(xiàng)目名稱為 hello-world 的vue前端項(xiàng)目）

項(xiàng)目配置選項(xiàng)

a、Manually select features

如果是第一次用3.0的話沒有第一個(gè)選項(xiàng)（myProjectinit - 這是自己預(yù)設(shè)的配置），
只有最后兩個(gè)，第一個(gè)是默認(rèn)配置，一般選第二個(gè)，自己配置，這里選第二個(gè)。

b、選擇項(xiàng)目需要的特性 (根據(jù)自己需求選擇即可)

此處選擇的是：Babel編譯、Vue路由、Vue狀態(tài)管理器、CSS預(yù)處理器、代碼檢測

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

選擇 Y
對于一般的Vue+Vue-router+Webpack的Web開發(fā)場景，用history模式即可

d、選擇CSS預(yù)處理器語言

選擇第二個(gè) Sass/SCSS (with node-sass)

e、選擇ESLint的代碼規(guī)范，此處使用 Standard代碼規(guī)范

Standard標(biāo)準(zhǔn)，它是一些前端工程師自定的標(biāo)準(zhǔn)。

f、何時(shí)進(jìn)項(xiàng)代碼監(jiān)測

選擇在保存時(shí)，進(jìn)項(xiàng)監(jiān)測

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

選擇單獨(dú)保存在各自的配置文件中

h、詢問是否將此配置項(xiàng)保存為，預(yù)設(shè)配置（第一步看到的 myProjectinit 即為我保存的一個(gè)預(yù)設(shè)配置）

這里我選擇的是不保存 N 需要保存的選擇 Y 即可

i、最后等待vue-cli完成初始化即可

項(xiàng)目目錄結(jié)構(gòu)如下圖：

此處即為初始化完成
cd 到此目錄下運(yùn)行 
npm run serve 
啟動(dòng)項(xiàng)目
serve啟動(dòng)不習(xí)慣，可手動(dòng)打開根目錄下的package.json文件
找到 "serve": "vue-cli-service serve" 把 serve 改為 dev
vue-cli 3.0還提供了 UI控制臺(tái) 來進(jìn)項(xiàng)項(xiàng)目的管理
安裝 npm i -g @vue/cli
在終端執(zhí)行 vue ui 會(huì)默認(rèn)初始化 localhost:8000 且自動(dòng)打開

對于 vue-cli 3.0 的 UI控制臺(tái) 可視化項(xiàng)目管理界面介紹此文有介紹 vue-cli改版 3.0betaUI界面初體驗(yàn)。

總結(jié)

以上所述是小編給大家介紹的vue cli 3.0 搭建項(xiàng)目的圖文教程 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: