开发后台管理系统-开发环境搭建

文章目录

需求

开发一个后台管理系统 这里以CDN后台管理系统为例

设计

参照

CDN后台管理系统功能说明文档

环境搭建

确保已经安装了Node.js和npm

执行

css 复制代码
npm install -g @vue/cli 

创建项目工程

css 复制代码
vue create vue3-cdnmgmtv1.0


测试

结果

安装Element Plus

css 复制代码
npm install element-plus --save

在使用 npm(Node Package Manager)安装包时,--save 标志用于将安装的包添加到项目的 package.json文件中的 dependencies 部分。这意味着你声明这个包是项目运行时所需要的依赖项之一

Vue项目中引入

测试Element Plus组件
代码

安装路由

安装Vue Router

css 复制代码
npm install vue-router@4

配置Vue Router

创建 src/router/index.js


eslintrc.js 配置

css 复制代码
module.exports = {
    root: true,
    env: {
      node: true
    },
    extends: [
      'plugin:vue/vue3-essential',
      // '@vue/standard'
    ],
    parserOptions: {
      parser: '@babel/eslint-parser'
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    }
  }

如果有报错

css 复制代码
should always be multi-word  vue/multi-word-component-names

关闭

测试

环境搭建完成 编写简单登陆页面测试

app.vue

css 复制代码
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>
<style>
  body{ margin:0px; padding:0px;}
</style>

路由跳转后

相关推荐
西凉河的葛三叔3 天前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
xiaohuatu3 天前
CSRF保护--laravel进阶篇
vue3·laravel·csrf
火山引擎边缘云5 天前
更快、更稳、更优,揭秘火山引擎全站加速 DCDN 规模容器化最佳实践
容器·边缘计算·cdn
半度℃温热8 天前
ERROR TypeError: AutoImport is not a function
webpack·vue3·element-plus·插件版本·autoimport
朝阳398 天前
vue3 中直接使用 JSX ( lang=“tsx“ 的用法)
vue3·tsx·jsx
xcLeigh9 天前
VUE3实现简洁的特色美食网站源码
前端·源码·vue3
陈逸子风12 天前
(系列十一)Vue3框架中路由守卫及请求拦截(实现前后端交互)
vue3·webapi·权限·流程·表单
爱分享的Hayes小朋友13 天前
如何用post请求调用Server-Sent Events服务
前端·vue3·sse·post
CXDNW13 天前
【网络面试篇】其他面试题——Cookie、Session、DNS、CDN、SSL/TLS、加密概念
网络·笔记·面试·cdn·dns·cookie
桃酥40313 天前
day08|计算机网络重难点之 DNS查询过程、CDN是什么,有什么作用?、Cookie和Session是什么?有什么区别?
计算机网络·cdn·dns·cookie·session