Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目
1.概述
這篇文章開始進(jìn)入一個(gè)新的專欄,這個(gè)專欄將介紹如何創(chuàng)建一個(gè)Web端后臺(tái)管理系統(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ái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目的文章就介紹到這了,更多相關(guān)Vue3創(chuàng)建和配置項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue用Object.defineProperty手寫一個(gè)簡(jiǎn)單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個(gè)簡(jiǎn)單的雙向綁定的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07深入淺析golang zap 日志庫使用(含文件切割、分級(jí)別存儲(chǔ)和全局使用等)
這篇文章主要介紹了golang zap 日志庫使用(含文件切割、分級(jí)別存儲(chǔ)和全局使用等),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02vue實(shí)現(xiàn)標(biāo)簽云效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11vue修改數(shù)據(jù)的時(shí)候,表單值回顯不正確問題及解決
這篇文章主要介紹了vue修改數(shù)據(jù)的時(shí)候,表單值回顯不正確的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-11-11Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個(gè)關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應(yīng)式數(shù)據(jù):ref 與 reactive,需要的朋友可以參考下2024-01-01vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08