Vue3后台管理系统之创建和配置项目

 更新时间:2022年09月06日 12:03:40   作者:Bruce小鬼  
后台管理系统是我们日常开发学习经常遇到的一个项目,下面这篇文章主要给大家介绍了关于Vue3后台管理系统之创建和配置项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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创建和配置项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue用Object.defineProperty手写一个简单的双向绑定的示例

    vue用Object.defineProperty手写一个简单的双向绑定的示例

    这篇文章主要介绍了用Object.defineProperty手写一个简单的双向绑定的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue3之 Vue CLI多环境配置

    Vue3之 Vue CLI多环境配置

    这篇文章主要介绍了Vue3之 Vue CLI多环境配置,通俗点说就是使用配置文件来管理多环境,实现环境的切换,西阿棉详细内容,需要的朋友可以参考一下
    2021-11-11
  • 深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)

    深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)

    这篇文章主要介绍了golang zap 日志库使用(含文件切割、分级别存储和全局使用等),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 在vue2中实现截图功能的基本步骤

    在vue2中实现截图功能的基本步骤

    在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下
    2023-10-10
  • vue实现标签云效果的示例

    vue实现标签云效果的示例

    这篇文章主要介绍了vue实现标签云效果的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • 使用vue构建一个上传图片表单

    使用vue构建一个上传图片表单

    这篇文章主要为大家详细介绍了使用vue构建一个上传图片表单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue修改数据的时候,表单值回显不正确问题及解决

    vue修改数据的时候,表单值回显不正确问题及解决

    这篇文章主要介绍了vue修改数据的时候,表单值回显不正确的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • vue实现的仿淘宝购物车功能详解

    vue实现的仿淘宝购物车功能详解

    这篇文章主要介绍了vue实现的仿淘宝购物车功能,结合完整实例形式较为详细的分析了vue.js仿淘宝购物车功能的具体样式、功能相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-01-01
  • Vue.js 3.x 中的响应式数据ref 与 reactive详解

    Vue.js 3.x 中的响应式数据ref 与 reactive详解

    ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数,它们分别适用于不同类型的数据,帮助我们更好地组织和管理组件的状态,这篇文章主要介绍了Vue.js 3.x 中的响应式数据:ref 与 reactive,需要的朋友可以参考下
    2024-01-01
  • vue使用高德地图根据坐标定位点的实现代码

    vue使用高德地图根据坐标定位点的实现代码

    这篇文章主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论