vue-cli腳手架創(chuàng)建項目遇到的坑及解決
vue-cli腳手架創(chuàng)建項目遇到的坑
cli版本太低
通過 vue-cli 創(chuàng)建 uni-app 項目,報錯:
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:
報錯原因是cli版本太低,需要升級到V4.x.x,相關執(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,但是不能升級到5xx版本,最多只能升級到4.5.15,因為最新版本搭設的腳手架還有問題。
Cannot find module 'webpack/lib/RuleSet’錯誤
在運行空項目的時候報如下錯誤:
就是cli版本的問題,根據(jù)問題描述,查看版本:
vue -V
為5.0.1,版本太高又問題。
降低版本處理:
npm remove -g @vue/cli // 卸載 npm install -g @vue/cli@4.5.15 // 重新安裝
最后就是重新創(chuàng)建項目。
vue腳手架流程
第一步:安裝腳手架
全局安裝@vue/cli模塊包
yarn global add @vue/cli # OR npm install -g @vue/cli
安裝完檢查下是否安裝成功
vue -V //總結: 如果出現(xiàn)版本號就安裝成功, 否則失敗
第二步:創(chuàng)建項目
1.創(chuàng)建項目
注意: 項目名不能帶大寫字母, 中文和特殊符號
# vue和create是命令, vuecli-demo是自己的文件夾名 vue create vuecli-demo
2.選擇模板
可以上下箭頭選擇, 回車確定, 弄錯了ctrl+c從第1步來
3. 選擇包管理器
4.等待下載腳手架項目, 需要的依賴包
5.終端切換腳手架項目下, 啟動內(nèi)置的==webpack熱更新開發(fā)服務器==
cd vuecil-demo yarn serve # 或 npm run serve
6.只要看到綠色的 - 你就成功了
7.開心的瀏覽器中 - 輸入上述地址 出現(xiàn)歡迎界面
腳手架-目錄分析
vuecil-demo # 項目目錄 ├── node_modules # 項目依賴的第三方包 ├── public # 靜態(tài)文件目錄 ├── favicon.ico# 瀏覽器小圖標 └── index.html # 單頁面的html文件(網(wǎng)頁瀏覽的是它) ├── src # 業(yè)務文件夾 ├── assets # 靜態(tài)資源 └── logo.png # vue的logo圖片 ├── components # 組件目錄 └── HelloWorld.vue # 歡迎頁面vue代碼文件 ├── App.vue # 整個應用的根組件 └── main.js # 入口js文件 ├── .gitignore # git提交忽略配置 ├── babel.config.js # babel配置 ├── package.json # 依賴包列表 ├── README.md # 項目說明 └── yarn.lock # 項目包版本鎖定和緩存地址
主要文件及含義
node_modules
– 第三方依賴包public
/index.html
– 瀏覽器運行的網(wǎng)頁src
/main.js
– webpack打包的入口文件src
/App.vue
– Vue入口頁面package.json
– 依賴包列表文件和自定義命令
腳手架-代碼和結構分析
腳手架-自定義配置
在src并列處, 新建vue.config.js(重要)
/* 覆蓋webpack的配置 */ module.exports = { devServer: { // 自定義服務配置 open: true, // 自動打開瀏覽器 port: 3000 } }
eslint了解 eslint是一個插件, 內(nèi)置在腳手架項目里配置好了, 運行時檢查你的代碼風格
開啟了eslint代碼書寫需要非常嚴謹多余空格或者生命的變量未使用都會報錯,平常練習不需要開啟,默認是開啟的,下面代碼告知如何關閉
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
webpack4+express+mongodb+vue實現(xiàn)增刪改查的示例
這篇文章主要介紹了webpack4+express+mongodb+vue 實現(xiàn)增刪改查的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法
下面小編就為大家分享一篇axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue報錯"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關于Vue報錯"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細,對同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下2023-02-02