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

文章目录

需求

开发一个后台管理系统 这里以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>

路由跳转后

相关推荐
天翼云开发者社区1 天前
请求中断的原理与分类
cdn
Sheldon一蓑烟雨任平生2 天前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
麦麦大数据2 天前
D026 vue3+django 论文知识图谱推荐可视化系统 | vue3+vite前端|neo4j 图数据库
前端·django·vue3·知识图谱·推荐算法·论文文献·科研图谱
duansamve3 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
JNU freshman3 天前
Element Plus组件
前端·vue.js·vue3
qqxhb6 天前
系统架构设计师备考第45天——软件架构演化评估方法和维护
分布式·缓存·系统架构·集群·cdn·单体·已知未知评估
Sheldon一蓑烟雨任平生6 天前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
duansamve6 天前
TS在Vue3中的使用实例集合
typescript·vue3
ღ᭄ꦿ࿐Never say never꧂6 天前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
Sheldon一蓑烟雨任平生7 天前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style