vue cli 3.0 搭建項目的圖文教程
1.3.0版本包括了默認(rèn)預(yù)設(shè)配置和用戶自定義設(shè)置
2.對比2.0來看3.0的目錄結(jié)構(gòu)更加精簡了
移除了配置文件目錄 （config 和 build文件夾）
移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動到 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 （搭建一個項目名稱為 hello-world 的vue前端項目）
項目配置選項
a、Manually select features
如果是第一次用3.0的話沒有第一個選項（myProjectinit - 這是自己預(yù)設(shè)的配置）， 只有最后兩個，第一個是默認(rèn)配置，一般選第二個，自己配置，這里選第二個。
b、選擇項目需要的特性 (根據(jù)自己需求選擇即可)
此處選擇的是：Babel編譯、Vue路由、Vue狀態(tài)管理器、CSS預(yù)處理器、代碼檢測
c、router是否使用history模式，這里使用history模式
選擇 Y 對于一般的Vue+Vue-router+Webpack的Web開發(fā)場景，用history模式即可
d、選擇CSS預(yù)處理器語言
選擇第二個 Sass/SCSS (with node-sass)
e、選擇ESLint的代碼規(guī)范，此處使用 Standard代碼規(guī)范
Standard標(biāo)準(zhǔn)，它是一些前端工程師自定的標(biāo)準(zhǔn)。
f、何時進(jìn)項代碼監(jiān)測
選擇在保存時，進(jìn)項監(jiān)測
g、Babel、PostCss、ESLint等文件的存放位置
選擇單獨(dú)保存在各自的配置文件中
h、詢問是否將此配置項保存為，預(yù)設(shè)配置（第一步看到的 myProjectinit 即為我保存的一個預(yù)設(shè)配置）
這里我選擇的是不保存 N 需要保存的選擇 Y 即可
i、最后等待vue-cli完成初始化即可
項目目錄結(jié)構(gòu)如下圖：
此處即為初始化完成 cd 到此目錄下運(yùn)行 npm run serve 啟動項目 serve啟動不習(xí)慣，可手動打開根目錄下的package.json文件 找到 "serve": "vue-cli-service serve" 把 serve 改為 dev vue-cli 3.0還提供了 UI控制臺 來進(jìn)項項目的管理 安裝 npm i -g @vue/cli 在終端執(zhí)行 vue ui 會默認(rèn)初始化 localhost:8000 且自動打開
對于 vue-cli 3.0 的 UI控制臺 可視化項目管理界面介紹此文有介紹 vue-cli改版 3.0betaUI界面初體驗。
總結(jié)
以上所述是小編給大家介紹的vue cli 3.0 搭建項目的圖文教程 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的h5日歷組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
在Vue項目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue.js實(shí)現(xiàn)動畫與過渡效果的示例代碼
在現(xiàn)代前端開發(fā)中,用戶體驗至關(guān)重要,一個精美的動畫過渡不僅能提升界面的美觀性,還能讓用戶在使用時感受到流暢的交互體驗,在本文中,我們將深入探討如何在 Vue.js 中實(shí)現(xiàn)動畫與過渡效果,并提供示例代碼,需要的朋友可以參考下2024-10-10
vue $set 實(shí)現(xiàn)給數(shù)組集合對象賦值
這篇文章主要介紹了vue $set 實(shí)現(xiàn)給數(shù)組集合對象賦值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了vue的token刷新處理的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
記錄使用Nginx將純前端的Vue3項目部署到阿里云服務(wù)器（Ubuntu?22.04）上,包含通過Nginx代理實(shí)現(xiàn)跨域請求、以及個人踩坑記錄,感興趣的朋友一起看看吧2024-04-04
Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue項目創(chuàng)建首頁發(fā)送axios請求的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
Vue.js中用webpack合并打包多個組件并實(shí)現(xiàn)按需加載
對于現(xiàn)在前端插件的頻繁更新，我也是無力吐槽，但是既然入了前端的坑就得認(rèn)嘛，所以多多少少要對組件化有點(diǎn)了解，下面這篇文章主要給大家介紹了在Vue.js中用webpack合并打包多個組件并實(shí)現(xiàn)按需加載的相關(guān)資料，需要的朋友可以參考下。2017-02-02
element ui loading加載開啟與關(guān)閉方式
這篇文章主要介紹了element ui loading加載開啟與關(guān)閉方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue3?實(shí)現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運(yùn)用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機(jī)驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-08-08