Vue3後臺管理系統之建立和設定專案

2022-09-06 18:02:33

1.概述

這篇文章開始進入一個新的專欄，這個專欄將介紹如何建立一個Web端後臺管理系統

2.建立專案

2.1.建立Vue3

# 建立vue3
vue create vue-manage-system

2.2.手動設定外掛

選擇手動設定模式

選擇外掛

2.3.選擇hash路由

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

2.4.選擇程式碼校驗規範

選擇node-sass

選擇ESLint+Prettier 程式碼格式化

ESLint+Prettier格式化規範可以結合這個外掛使用

選擇格式化選項

選擇獨立的組態檔

儲存模板

自定義模板名稱

選擇yarn包管理器

專案建立完成

3.專案結構設定

3.1.建立組態檔

在專案根路徑下新建vue.config.js檔案

vue.config.js檔案設定內容

module.exports = {
  devServer: {
    // 設定專案埠
    port: 8868,
    // 啟動專案自動開啟瀏覽器
    open: true
  }
}

3.2.啟動專案

啟動專案命令

# 1.進入專案根路徑
cd .vue-manage-system

# 2.啟動專案
npm run serve

啟動專案效果

3.3.設定ESLint格式化

安裝三個外掛

安裝ESLint外掛
安裝Vetur外掛
安裝Prettier-Code formatter外掛

ESLint外掛設定

1.開啟設定-擴充套件-ESLint

2.貼上內容到ESLint的json中

 // 新增 vue ⽀持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],

4.在.eslintrc.js檔案中設定ESLint格式化規則

{
  "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.執行ESLint格式化全部檔案

# 進入專案根路徑
cd vue-manage-system

# 執行全部檔案程式碼格式化
 npm run lint

6.結果顯示不符合規則的程式碼全部格式化完畢

Vetur外掛

Prettier-Code formatter外掛

3.4.初始化專案

刪除路由對映

刪除Home和About元件

刪除HelloWorld元件

刪除logo

App元件刪除內容後

3.5.啟動專案

格式化程式碼

# 進入專案根路徑
cd vue-manage-system

# 執行全部檔案程式碼格式化
 npm run lint

啟動專案

# 進入專案根路徑
cd vue-manage-system

# 執行全部檔案程式碼格式化
 npm run serve

啟動專案效果展示

總結

到此這篇關於Vue3後臺管理系統之建立和設定專案的文章就介紹到這了,更多相關Vue3建立和設定專案內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！