欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli腳手架創(chuàng)建項目遇到的坑及解決

 更新時間:2023年01月11日 09:15:58   作者:瓜子三百克  
這篇文章主要介紹了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)增刪改查的示例

    這篇文章主要介紹了webpack4+express+mongodb+vue 實現(xiàn)增刪改查的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vuex分模塊后,實現(xiàn)獲取state的值

    vuex分模塊后,實現(xiàn)獲取state的值

    這篇文章主要介紹了vuex分模塊后,實現(xiàn)獲取state的值,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法

    axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法

    下面小編就為大家分享一篇axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue-next-admin項目使用cdn加速詳細配置

    vue-next-admin項目使用cdn加速詳細配置

    這篇文章主要為大家介紹了vue-next-admin項目使用cdn加速的詳細配置,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • 詳細分析vue響應式原理

    詳細分析vue響應式原理

    這篇文章主要介紹了vue響應式原理的的相關資料,文中講解非常細致,代碼幫助大家更好的理解和學習,感興趣的朋友可以了解下
    2020-06-06
  • 基于ant design日期控件使用_僅月份的操作

    基于ant design日期控件使用_僅月份的操作

    這篇文章主要介紹了基于ant design日期控件使用_僅月份的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 八個Vue中常用的v指令詳解

    八個Vue中常用的v指令詳解

    vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個Vue中常用的v指令的相關資料,需要的朋友可以參考下
    2022-04-04
  • Vue之組件詳解

    Vue之組件詳解

    這篇文章主要為大家介紹了Vue之組件,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • Vue報錯"Failed?to?resolve?loader:less-loader"的解決方法

    Vue報錯"Failed?to?resolve?loader:less-loader"的解決方

    這篇文章主要給大家介紹了關于Vue報錯"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細,對同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下
    2023-02-02
  • 圖文詳解如何在vue3+vite項目中使用svg

    圖文詳解如何在vue3+vite項目中使用svg

    SVG指可伸縮矢量圖形,用來定義用于網(wǎng)絡的基于矢量的圖形,下面這篇文章主要給大家介紹了關于如何在vue3+vite項目中使用svg的相關資料,需要的朋友可以參考下
    2021-11-11

最新評論