vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟
Vue CLI介紹
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng),提供:
通過(guò) @vue/cli 搭建交互式的項(xiàng)目腳手架。
通過(guò) @vue/cli + @vue/cli-service-global 快速開(kāi)始零配置原型開(kāi)發(fā)。
一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-service),該依賴:
- 可升級(jí);
- 基于 webpack 構(gòu)建,并帶有合理的默認(rèn)配置;
- 可以通過(guò)項(xiàng)目?jī)?nèi)的配置文件進(jìn)行配置;
- 可以通過(guò)插件進(jìn)行擴(kuò)展。
- 一個(gè)豐富的官方插件集合,集成了前端生態(tài)中最好的工具。
Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接,這樣你可以專注在撰寫應(yīng)用上,而不必花好幾天去糾結(jié)配置的問(wèn)題。與此同時(shí),它也為每個(gè)工具提供了調(diào)整配置的靈活性,無(wú)需 eject
因?yàn)轫?xiàng)目技術(shù)架構(gòu)需要,要是用vue-cli 3.0進(jìn)行搭建,所以簡(jiǎn)單的分享下3.0如何優(yōu)雅的開(kāi)始。下面做一下簡(jiǎn)單的介紹,希望可以幫到有需要的朋友。
vue-cli 3.0 正式版于 8月10號(hào)發(fā)布!
詳細(xì)的可以參考:https://cli.vuejs.org/zh/guide/
首先,既然不是一個(gè)版本,如果想使用V-C3,你需要卸載之前安裝的2.0(有方式可以共存,暫不贅述),卸載了不會(huì)影響你以前的功能,使用不爽,可以再安裝回去,安裝就不說(shuō)了,說(shuō)下卸載。
第一步 卸載Vue-cli2
命令是:npm uninstall -g vue-cli
第二步 安裝V-C3.0
方式很多,譬如 npm install -g @vue/cli 或者 yarn global add @vue/cli,根據(jù)嗜好,自選。
第三步 創(chuàng)建項(xiàng)目
相對(duì)2.0,V-C3創(chuàng)建就不是之前init webp..... 一大堆了。直接 vue create project,project是項(xiàng)目名字。so easy,如下圖(mac報(bào)err-13,請(qǐng)使用sudo):

我選了默認(rèn),沒(méi)用淘寶鏡像,選擇Y后,會(huì)有如下圖所示:

這個(gè)時(shí)候你可以選擇會(huì)車確認(rèn),但是個(gè)人建議,進(jìn)行多選,根據(jù)自己需要選擇,選擇Manua...這一行,然后就會(huì)出現(xiàn):

自己空格就可以選擇了,除了E2E,都是我需要的,所以如上圖所選。
回車后,顯示: Use class-style component syntax? 接下來(lái)就不細(xì)說(shuō)了,一路Y就可以。
最終,我的選擇如圖,設(shè)置成功:

最終目錄為:

第三步 干活吧
安裝成功后,可以寫業(yè)務(wù)了。
根據(jù)提示,運(yùn)行一把,feel一下 3.0

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
666,跑起來(lái)的感覺(jué)很棒。
- 深入理解Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)探秘
- vue-cli3搭建項(xiàng)目的詳細(xì)步驟
- 用Vue-cli搭建的項(xiàng)目中引入css報(bào)錯(cuò)的原因分析
- 使用Vue-cli 3.0搭建Vue項(xiàng)目的方法
- vue-cli3 從搭建到優(yōu)化的詳細(xì)步驟
- vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問(wèn)題的解決方法
- 詳解Vue使用 vue-cli 搭建項(xiàng)目
- 詳解搭建一個(gè)vue-cli的移動(dòng)端H5開(kāi)發(fā)模板
- vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
相關(guān)文章
解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
element-ui 中使用upload多文件上傳只請(qǐng)求一次接口
這篇文章主要介紹了element-ui 中使用upload多文件上傳只請(qǐng)求一次接口,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串
這篇文章主要介紹了Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串,需要的朋友可以參考下2018-10-10
Vue2.0利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案
本篇文章主要介紹了Vue2 利用 v-model 實(shí)現(xiàn)組件props雙向綁定的優(yōu)美解決方案,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03

