vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑及解決
vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑
cli版本太低
通過(guò) vue-cli 創(chuàng)建 uni-app 項(xiàng)目，報(bào)錯(cuò)：
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
報(bào)錯(cuò)原因是cli版本太低，需要升級(jí)到V4.x.x，相關(guān)執(zhí)行命令如下：
卸載：
npm uninstall vue-cli -g //3.0以下卸載： npm uninstall @vue/cli -g // 3.0以上卸載：
查看：
npm view vue-cli versions --json // 3.0以下vue-cli可安裝版本查看 npm view @vue/cli versions --json // 3.0以上vue-cli可安裝版本查看
安裝：
npm install vue-cli@2.9.6 npm install -g @vue/cli@4.5.15
已知cli最新版本為5.0.1，但是不能升級(jí)到5xx版本，最多只能升級(jí)到4.5.15，因?yàn)樽钚掳姹敬钤O(shè)的腳手架還有問題。
Cannot find module 'webpack/lib/RuleSet’錯(cuò)誤
在運(yùn)行空項(xiàng)目的時(shí)候報(bào)如下錯(cuò)誤：
就是cli版本的問題，根據(jù)問題描述，查看版本：
vue -V
為5.0.1，版本太高又問題。
降低版本處理：
npm remove -g @vue/cli // 卸載 npm install -g @vue/cli@4.5.15 // 重新安裝
最后就是重新創(chuàng)建項(xiàng)目。
vue腳手架流程
第一步:安裝腳手架
全局安裝@vue/cli模塊包
yarn global add @vue/cli # OR npm install -g @vue/cli
安裝完檢查下是否安裝成功
vue -V //總結(jié): 如果出現(xiàn)版本號(hào)就安裝成功, 否則失敗
第二步:創(chuàng)建項(xiàng)目
1.創(chuàng)建項(xiàng)目
注意: 項(xiàng)目名不能帶大寫字母, 中文和特殊符號(hào)
# vue和create是命令, vuecli-demo是自己的文件夾名 vue create vuecli-demo
2.選擇模板
可以上下箭頭選擇, 回車確定, 弄錯(cuò)了ctrl+c從第1步來(lái)
3. 選擇包管理器
4.等待下載腳手架項(xiàng)目, 需要的依賴包
5.終端切換腳手架項(xiàng)目下, 啟動(dòng)內(nèi)置的==webpack熱更新開發(fā)服務(wù)器==
cd vuecil-demo yarn serve # 或 npm run serve
6.只要看到綠色的 - 你就成功了
7.開心的瀏覽器中 - 輸入上述地址 出現(xiàn)歡迎界面
腳手架-目錄分析
vuecil-demo # 項(xiàng)目目錄
├── node_modules # 項(xiàng)目依賴的第三方包
├── public # 靜態(tài)文件目錄
├── favicon.ico# 瀏覽器小圖標(biāo)
└── index.html # 單頁(yè)面的html文件(網(wǎng)頁(yè)瀏覽的是它)
├── src # 業(yè)務(wù)文件夾
├── assets # 靜態(tài)資源
└── logo.png # vue的logo圖片
├── components # 組件目錄
└── HelloWorld.vue # 歡迎頁(yè)面vue代碼文件
├── App.vue # 整個(gè)應(yīng)用的根組件
└── main.js # 入口js文件
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置
├── package.json # 依賴包列表
├── README.md # 項(xiàng)目說(shuō)明
└── yarn.lock # 項(xiàng)目包版本鎖定和緩存地址主要文件及含義
node_modules– 第三方依賴包public/index.html– 瀏覽器運(yùn)行的網(wǎng)頁(yè)src/main.js– webpack打包的入口文件src/App.vue– Vue入口頁(yè)面package.json– 依賴包列表文件和自定義命令
腳手架-代碼和結(jié)構(gòu)分析
腳手架-自定義配置
在src并列處, 新建vue.config.js(重要)
/* 覆蓋webpack的配置 */
module.exports = {
devServer: { // 自定義服務(wù)配置
open: true, // 自動(dòng)打開瀏覽器
port: 3000
}
}eslint了解 eslint是一個(gè)插件, 內(nèi)置在腳手架項(xiàng)目里配置好了, 運(yùn)行時(shí)檢查你的代碼風(fēng)格
開啟了eslint代碼書寫需要非常嚴(yán)謹(jǐn)多余空格或者生命的變量未使用都會(huì)報(bào)錯(cuò),平常練習(xí)不需要開啟,默認(rèn)是開啟的,下面代碼告知如何關(guān)閉
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2中如何更改el-dialog出場(chǎng)動(dòng)畫(el-dialog彈窗組件)
el-dialog是一個(gè)十分好用的彈窗組件，但是出場(chǎng)動(dòng)畫比較單調(diào)，于是決定自定義一個(gè)出場(chǎng)動(dòng)畫，本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家敘述下實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2022-06-06
axios的封裝和api接口的統(tǒng)一管理，其實(shí)主要目的就是在幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)，在vue項(xiàng)目中，和后臺(tái)交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫(kù)，本文就給大家介紹一下axios封裝與api接口封裝管理,需要的朋友可以參考下2023-06-06
如何使用Vuex+Vue.js構(gòu)建單頁(yè)應(yīng)用
這篇文章主要教大家如何使用Vuex+Vue.js構(gòu)建單頁(yè)應(yīng)用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Vue?插件及瀏覽器本地存儲(chǔ)，插件通常用來(lái)為Vue添加全局功能，包含install方法的一個(gè)對(duì)象。更多相關(guān)介紹，需要的小伙伴可以參考下面文章內(nèi)容2022-05-05
這篇文章主要介紹了在vue中使用公共過(guò)濾器filter的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
單文件就是把一個(gè)頁(yè)面拆分為多個(gè),多層次的組件,通過(guò)多層引用,大大縮小vue文件的長(zhǎng)度和頁(yè)面復(fù)雜度,下面這篇文章主要給大家介紹了關(guān)于vue3單文件組件中style特性的相關(guān)資料,需要的朋友可以參考下2021-09-09
深入探究Vue中$nextTick的實(shí)現(xiàn)原理
這篇文章主要為大家詳細(xì)介紹Vue中$nextTick的實(shí)現(xiàn)原理，文中的示例代碼講解詳細(xì)，對(duì)我們深入了解Vue有一定的幫助，需要的小伙伴可以參考一下2023-06-06
vue基礎(chǔ)之使用get、post、jsonp實(shí)現(xiàn)交互功能示例
這篇文章主要介紹了vue基礎(chǔ)之使用get、post、jsonp實(shí)現(xiàn)交互功能,結(jié)合實(shí)例形式分析了vue.js中g(shù)et、post及jsonp針對(duì)本地文件、網(wǎng)絡(luò)接口實(shí)現(xiàn)交互功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色
這篇文章主要介紹了vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue父子組件間引用之$parent、$children的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05