后臺管理系統(tǒng)是我們?nèi)粘ｉ_發(fā)學(xué)習(xí)經(jīng)常遇到的一個(gè)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.概述

這篇文章開始進(jìn)入一個(gè)新的專欄，這個(gè)專欄將介紹如何創(chuàng)建一個(gè)Web端后臺管理系統(tǒng)

2.創(chuàng)建項(xiàng)目

2.1.創(chuàng)建Vue3

# 創(chuàng)建vue3
vue create vue-manage-system

2.2.手動(dòng)配置插件

選擇手動(dòng)配置模式

選擇插件

2.3.選擇hash路由

問我們是否使用history模式，我們輸入n。選擇hash模式

2.4.選擇代碼校驗(yàn)規(guī)范

選擇node-sass

選擇ESLint+Prettier 代碼格式化

ESLint+Prettier格式化規(guī)范可以結(jié)合這個(gè)插件使用

選擇格式化選項(xiàng)

選擇獨(dú)立的配置文件

保存模板

自定義模板名稱

選擇yarn包管理器

項(xiàng)目創(chuàng)建完成

3.項(xiàng)目結(jié)構(gòu)配置

3.1.創(chuàng)建配置文件

在項(xiàng)目根路徑下新建vue.config.js文件

vue.config.js文件配置內(nèi)容

module.exports = {
  devServer: {
    // 配置項(xiàng)目端口
    port: 8868,
    // 啟動(dòng)項(xiàng)目自動(dòng)打開瀏覽器
    open: true
  }
}

3.2.啟動(dòng)項(xiàng)目

啟動(dòng)項(xiàng)目命令

# 1.進(jìn)入項(xiàng)目根路徑
cd .\vue-manage-system\

# 2.啟動(dòng)項(xiàng)目
npm run serve

啟動(dòng)項(xiàng)目效果

3.3.配置ESLint格式化

安裝三個(gè)插件

安裝ESLint插件
安裝Vetur插件
安裝Prettier-Code formatter插件

ESLint插件設(shè)置

1.打開設(shè)置-擴(kuò)展-ESLint

2.粘貼內(nèi)容到ESLint的json中

 // 添加 vue ?持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],

4.在.eslintrc.js文件中配置ESLint格式化規(guī)則

{
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  // 添加 vue ?持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "explorer.compactFolders": false,
  "files.autoSave": "afterDelay",
  "less.compile": {
    "compress": false, // true => remove surplus whitespace
    "sourceMap": true, // true => generate source maps (.css.map files)
    "out": true // false => DON'T output .css files (overridable per-file, see below)
  },
  "workbench.iconTheme": "material-icon-theme",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.codeAction.showDocumentation": {
    

  
    "enable": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.fontLigatures": false,
  "vetur.validation.template": false,
  "vetur.grammar.customBlocks": {

    "docs": "md",
    "i18n": "json"
  },
  "vetur.ignoreProjectWarning": true,
  "[json]": {
  
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace"
  },
  "vetur.validation.script": false,
  "vetur.validation.style": false
}

5.執(zhí)行ESLint格式化全部文件

# 進(jìn)入項(xiàng)目根路徑
cd vue-manage-system

# 執(zhí)行全部文件代碼格式化
 npm run lint

6.結(jié)果顯示不符合規(guī)則的代碼全部格式化完畢

Vetur插件

Prettier-Code formatter插件

3.4.初始化項(xiàng)目

刪除路由映射

刪除Home和About組件

刪除HelloWorld組件

刪除logo

App組件刪除內(nèi)容后

3.5.啟動(dòng)項(xiàng)目

格式化代碼

# 進(jìn)入項(xiàng)目根路徑
cd vue-manage-system

# 執(zhí)行全部文件代碼格式化
 npm run lint

啟動(dòng)項(xiàng)目

# 進(jìn)入項(xiàng)目根路徑
cd vue-manage-system

# 執(zhí)行全部文件代碼格式化
 npm run serve

啟動(dòng)項(xiàng)目效果展示

總結(jié)

到此這篇關(guān)于Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目的文章就介紹到這了,更多相關(guān)Vue3創(chuàng)建和配置項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: