开发vue-admin前端后台管理系统

安装好node.js，创建好 基于vue3-admin 的项目，使用idea打开项目 vue-admin

注意：以管理员的方式运行idea,在Terminal,运行命令，查看 node -v

D:\idea_java_projects\vue\vue-admin>node -v
v14.15.0

D:\idea_java_projects\vue\vue-admin>npm -v
6.14.8

D:\idea_java_projects\vue\vue-admin>vue -V
@vue/cli 5.0.8
 

项目程序主入口 main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

注意版本

"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"

3. 安装element-ui

# 切换到项目根目录
cd vue-admin
# 或者直接在idea中执行下面命令
# 安装element-ui
cnpm install element-ui --save

接下来引入element-ui组件（https://element.eleme.cn），这样我们就可以获得好看的vue组件，开发好看的后台管理系统的界面啦。

打开项目src目录下的main.js，引入element-ui依赖。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"


// const app = createApp(App)
// app.use(Element)

createApp(App).use(Element).use(store).use(router).mount('#app')

启动项目，浏览localhost:8080发现首页空白，报错，

引用的elementUI 没有定义：因为

vue3已经不支持原来的饿了么ui了 需要使用与vue3适配的Element-plus

官网说明 :https://element-plus.gitee.io/#/zh-CN/component/installation

这次是得注意安装 element-plus

进入前端项目目录，执行：

npm install element-plus --save

在main.js中引入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import Element from 'element-ui'
// import "element-ui/lib/theme-chalk/index.css"

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// const app = createApp(App)
// app.use(Element)

createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

然后就可以运行项目了 

npm run serve

启动项目，成功访问！

vue3整合使用 ElementPlus:

Layout 布局 | Element Plus

Layout 布局：通过基础的 24 分栏，迅速简便地创建布局。

注意：ElementPlus组件默认使用 Flex 布局，不需要手动设置 type="flex"，

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

24分栏：

<template>
  <el-row>
    <el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col>
  </el-row>
  <el-row>
    <el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  </el-row>
  <el-row>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
  </el-row>
</template>

4. 安装axios、qs、mockjs

• axios：一个基于 promise 的 HTTP 库，类ajax
• qs：查询参数序列化和解析库
• mockjs：为我们生成随机数据的工具库

接下来，我们来安装axios（http://www.axios-js.com/），axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。

安装命令：

cnpm install axios --save

然后同样我们在main.js中全局引入axios。

vue2:引用方式：

import axios from 'axios'
app.prototype.$axios = axios //

vue3 使用安装：npm i axios --save-dev (和vue2一样安装应该也行)

但是在main.js中引入的方式不一样： import axios from 'axios'

在原型上进行绑定, 直接写原型链，不能直接 .use(axios)

createApp(App).config.globalProperties.$axios = axios

组件中，我们就可以通过this.$axios.get()来发起我们的请求了哈。当然了，后面我们添加axios拦截的时候我们需要修改引入的编写。
同时，我们同步安装一个qs，什么是qs？qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

安装 qs:

cnpm install qs --save

然后因为后台我们现在还没有搭建，无法与前端完成数据交互，因此我们这里需要mock数据，因此我们引入mockjs（http://mockjs.com/），方便后续我们提供api返回数据。

cnpm install mockjs --save-dev

然后我们在src目录下新建mock.js文件，用于编写随机数据的api，然后我们需要在main.js中引入这个文件：

src/main.js

require("./mock") //引入mock数据，关闭则注释该行

后面我们mackjs会自动为我们拦截ajax，并自动匹配路径返回数据！

5. 页面路由

接下来，在开发页面之前我们需要先定义路由。传统项目开发，我们都是通过链接到达控制器然后再到页面渲染的。而类似于Vue这样的前后端分离性质的框架，我们是先访问页面，然后再异步加载数据渲染。而在Vue中，路由的管理是有个专门的组件叫Router管理的。

• Router：WebApp的链接路径管理系统，简单就是建立起url和页面之间的映射关系

所以我们要打开页面然后开发页面，我们需要先配置路由，然后再开发，这样我们可以试试看到效果。项目中，src\router\index.js就是用来配置路由的。

我们在views文件夹下定义几个页面：

• Login.vue（登录页面）
• Home.vue（首页）

然后在路由中心配置配置url与vue页面的映射关系，参考原本的默认写法，我们很容易写出以下代码：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home // 运行加载
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import( '../views/Login.vue') //懒加载
  }
]

const router = createRouter({
  // mode: 'history',
  // base: process.env.BASE_URL   vue3 使用下面的
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router