Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目
更新時間：2022年09月06日 12:03:40 作者：Bruce小鬼
后臺管理系統(tǒng)是我們?nèi)粘ｉ_發(fā)學習經(jīng)常遇到的一個項目,下面這篇文章主要給大家介紹了關于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文件配置內(nèi)容
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.粘貼內(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格式化全部文件
# 進入項目根路徑 cd vue-manage-system # 執(zhí)行全部文件代碼格式化 npm run lint
6.結果顯示不符合規(guī)則的代碼全部格式化完畢
Vetur插件
Prettier-Code formatter插件
3.4.初始化項目
刪除路由映射
刪除Home和About組件
刪除HelloWorld組件
刪除logo
App組件刪除內(nèi)容后
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)建和配置項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue使用Multiavatarjs生成自定義隨機頭像的案例
這篇文章給大家介紹了Vue項目中使用Multiavatarjs生成自定義隨機頭像的案例,文中通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue 設置proxyTable參數(shù)進行代理跨域的相關資料，及代理跨域的概念原理,需要的朋友可以參考下2018-04-04
vue給input file綁定函數(shù)獲取當前上傳的對象完美實現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當前上傳的對象完美實現(xiàn)方法,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了解決vue頁面刷新，數(shù)據(jù)丟失的問題，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue-cli webpack 快速搭建項目的教程詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
因為vue的響應式是通過 Object.defineProperty 來實現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下2018-06-06
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細代碼，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹的是深入理解Vue的插件機制與install，文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實現(xiàn)的、 Vuex，Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09
這篇文章主要介紹了Vue下拉框回顯并默認選中隨機問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue項目中仿element-ui彈框效果的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04