vue3.0 CLI - 1 - npm 安裝與初始化的入門教程
node 開發(fā)環(huán)境請(qǐng)先自行準(zhǔn)備
npm install -g @vue/cli 安裝完成之后命令行則存在 vue 命令
vue -V 查看本地 vue 版本 vue -h 輸出幫助
vue create <project-name> 進(jìn)入工程文件夾，創(chuàng)建項(xiàng)目。
如：cd studyVue ( 進(jìn)入工程文件夾 ) vue create config ( 創(chuàng)建 config 項(xiàng)目 )
選擇 default 配置項(xiàng)，下面沒什么可介紹的，自行嘗試。
下面介紹選擇 manually select features 的相關(guān)流程 ( 使用上下箭頭按鍵切換選項(xiàng) - enter 按鍵確定選擇 - 下同 )
該配置項(xiàng)：選擇項(xiàng)目需要的特性 ( 讓你選擇項(xiàng)目里邊的插件 )
Babel - 轉(zhuǎn)碼工具；TypeScript - 微軟出的 js 的超集；PWA -漸進(jìn)式WEB應(yīng)用；Router - 路由功能；Vuex - 中心化狀態(tài)管理；CSS - css處理器；Linter - 代碼美化與檢查； Unit Testing - 單元測(cè)試； E2E Testing -端到端測(cè)試。
作為一個(gè)有志氣的人，咱們?nèi)歼x，以后慢慢學(xué)。( 空格鍵按鍵選擇 - 下同 )
按下 enter 確定之后，能看到上一個(gè)配置項(xiàng)我們選擇了什么。
該配置項(xiàng)：是否使用 class-style 組件語法，選擇 yes 。
該配置選擇 yes 。
該配置項(xiàng)：是否使用 history 模式 ( 該模式含義以后我會(huì)介紹 - 官網(wǎng)也有介紹 )，選擇 no 。
該配置項(xiàng)：選擇 css 預(yù)處理 ( 我沒用過 css 預(yù)處理器 )，任意選擇了一個(gè)。
該配置項(xiàng)：選擇代碼美化和檢查配置。這里選擇標(biāo)準(zhǔn)配置 ( 我也沒用過，先選一個(gè) )。
該配置項(xiàng)：選擇代碼檢查美化的相關(guān)配置。兩項(xiàng)都選。
該配置項(xiàng)：選擇單元測(cè)試解決方案。選擇 mocha ( 我也沒用過，選擇一個(gè)用的人多的 )。
該配置項(xiàng)：選擇端到端測(cè)試解決方案。選擇nightwatch( 我也不懂，讀者自行選擇 )。
該配置項(xiàng)：選擇在哪里存放上述的所有的配置。以前都是放在 package.json 中 ( webpack 使用習(xí)慣 )，另外一個(gè)是 vue 3.0 新的存配置的方式，使得配置項(xiàng)更加簡(jiǎn)潔。選擇In dedicated config files 。
該配置項(xiàng)：將以上所有的配置過程，保存為默認(rèn)的配置流程。( 也就是個(gè)人設(shè)置的意思，以后新建項(xiàng)目，默認(rèn)采用這些配置 )。選擇 yes 。
后面讓你為這個(gè)配置項(xiàng)進(jìn)行命名。我輸入 nDosVue 。
之后就開始自動(dòng)化的工程配置。1 min 之內(nèi)就配置好。
npm run serve 開啟網(wǎng)站；cd config 進(jìn)入配置文件夾。到此，vue 創(chuàng)建第一個(gè)項(xiàng)目完成。
最后生成的目錄如上圖。
總結(jié)
以上所述是小編給大家介紹的vue3.0 CLI - 1 - npm 安裝與初始化的入門教程，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法
這篇文章主要介紹了vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue實(shí)現(xiàn)Excel文件的上傳與下載功能的兩種方式
這篇文章主要介紹了vue實(shí)現(xiàn)Excel文件的上傳與下載功能，本文通過兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue + echarts實(shí)現(xiàn)中國省份地圖點(diǎn)擊聯(lián)動(dòng)
這篇文章主要介紹了vue + echarts實(shí)現(xiàn)中國地圖省份點(diǎn)擊聯(lián)動(dòng),需要的朋友可以參考下2022-04-04
electron-vite新一代electron開發(fā)構(gòu)建工具
這篇文章主要介紹了electron-vite新一代electron開發(fā)構(gòu)建工具，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決
這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue3中toRef與toRefs的區(qū)別，toRefs與toRef功能一致，但可以批量創(chuàng)建多個(gè)ref對(duì)象，需要注意的是它只會(huì)解析對(duì)象的第一層屬性，語法直接傳入對(duì)象 toRefs，下面更多內(nèi)容的介紹需要的小伙伴可以參考一下2022-03-03
在Vue3中,this的使用方式與Vue2存在較大差異,尤其是在引入組合式API后,本文詳細(xì)解析了Vue3中this的使用情況、底層源碼和設(shè)計(jì)理念,并提供了面試技巧,感興趣的可以了解一下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue2和el-input無法修改和寫入并且不報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue2和el-input無法修改和寫入并且不報(bào)錯(cuò)的解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07