Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目
更新時間：2022年09月06日 12:03:40 作者：Bruce小鬼
后臺管理系統(tǒng)是我們日常開發(fā)學習經常遇到的一個項目,下面這篇文章主要給大家介紹了關于Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
1.概述
這篇文章開始進入一個新的專欄，這個專欄將介紹如何創(chuàng)建一個Web端后臺管理系統(tǒng)
2.創(chuàng)建項目
2.1.創(chuàng)建Vue3
# 創(chuàng)建vue3 vue create vue-manage-system
2.2.手動配置插件
選擇手動配置模式
選擇插件
2.3.選擇hash路由
問我們是否使用history模式，我們輸入n。選擇hash模式
2.4.選擇代碼校驗規(guī)范
選擇node-sass
選擇ESLint+Prettier 代碼格式化
ESLint+Prettier格式化規(guī)范可以結合這個插件使用
選擇格式化選項
選擇獨立的配置文件
保存模板
自定義模板名稱
選擇yarn包管理器
項目創(chuàng)建完成
3.項目結構配置
3.1.創(chuàng)建配置文件
在項目根路徑下新建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格式化規(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格式化全部文件
# 進入項目根路徑 cd vue-manage-system # 執(zhí)行全部文件代碼格式化 npm run lint
6.結果顯示不符合規(guī)則的代碼全部格式化完畢
Vetur插件
Prettier-Code formatter插件
3.4.初始化項目
刪除路由映射
刪除Home和About組件
刪除HelloWorld組件
刪除logo
App組件刪除內容后
3.5.啟動項目
格式化代碼
# 進入項目根路徑 cd vue-manage-system # 執(zhí)行全部文件代碼格式化 npm run lint
啟動項目
# 進入項目根路徑 cd vue-manage-system # 執(zhí)行全部文件代碼格式化 npm run serve
啟動項目效果展示
總結
到此這篇關于Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目的文章就介紹到這了,更多相關Vue3創(chuàng)建和配置項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue用Object.defineProperty手寫一個簡單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個簡單的雙向綁定的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點說就是使用配置文件來管理多環(huán)境，實現環(huán)境的切換，西阿棉詳細內容,需要的朋友可以參考一下2021-11-11
深入淺析golang zap 日志庫使用（含文件切割、分級別存儲和全局使用等）
這篇文章主要介紹了golang zap 日志庫使用（含文件切割、分級別存儲和全局使用等）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
在Vue 2中實現截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來捕獲屏幕或特定元素的截圖,以下是一個簡單的步驟和示例代碼來實現這個功能,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue實現標簽云效果的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要為大家詳細介紹了使用vue構建一個上傳圖片表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue修改數據的時候，表單值回顯不正確的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了vue實現的仿淘寶購物車功能,結合完整實例形式較為詳細的分析了vue.js仿淘寶購物車功能的具體樣式、功能相關實現技巧與操作注意事項,需要的朋友可以參考下2019-01-01
Vue.js 3.x 中的響應式數據ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應式數據的兩個關鍵函數,它們分別適用于不同類型的數據,幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應式數據：ref 與 reactive,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue使用高德地圖根據坐標定位點的實現代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08