文章目录
- 需求
- 设计
- 环境搭建
- [安装Element Plus](#安装Element Plus)
- 安装路由
-
- [安装Vue Router](#安装Vue Router)
- [配置Vue Router](#配置Vue Router)
- 测试
需求
开发一个后台管理系统 这里以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>
路由跳转后