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深入淺析golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等)
這篇文章主要介紹了golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02Vue.js 3.x 中的響應式數據ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應式數據的兩個關鍵函數,它們分別適用于不同類型的數據,幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應式數據:ref 與 reactive,需要的朋友可以參考下2024-01-01