当前位置：首页 > article >正文

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

article 2024/11/13 22:01:15

文章目录

需求
设计
环境搭建
- 创建项目工程
- 测试
- 结果
安装Element Plus
安装路由
- 安装Vue Router
- 配置Vue Router
测试

需求

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

设计

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

环境搭建

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

npm install -g @vue/cli

在这里插入图片描述

创建项目工程

vue create vue3-cdnmgmtv1.0

在这里插入图片描述

测试

在这里插入图片描述

结果

在这里插入图片描述

安装Element Plus

npm install element-plus --save

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

Vue项目中引入
在这里插入图片描述
测试Element Plus组件
代码

在这里插入图片描述

安装路由

安装Vue Router

npm install vue-router@4

配置Vue Router

创建 src/router/index.js

在这里插入图片描述
eslintrc.js 配置

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'
    }
  }

如果有报错

should always be multi-word  vue/multi-word-component-names

关闭
在这里插入图片描述

测试

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

app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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