Allen 前端陪诊系统----bilibili学习笔记

学习链接：https://www.bilibili.com/video/BV1DH4y1c7TQ/?p=5&vd_source=19e5e3d967de224b2e517cd5e9beef3e

一.项目配置

1.下载node.js

网址：Node.js — 下载 Node.js® (nodejs.org)

下载了需要进行环境配置，视频里没有讲，我是参考下面的文章的

http://t.csdnimg.cn/nSo7v

2.搭建第一个vite项目

网址：Vite | 下一代的前端工具链 (vitejs.dev)

2.1创建项目

npm create vite@latest pzadmin -- --template vue 

输入命令，并确认，这样就会看到有pzadmin文件夹了

2.2安装所有依赖

首先需要cd到pzadmin

npm i

2.3启动项目

npm run dev

这样就成功了

二.路由引入

为什么要引入路由呢？他有什么作用呢？

路由可以实现页面的跳转，可以用来实现SPA应用（单页面应用）。

1.下载vue-router插件

网址：Vue Router | Vue.js 的官方路由 (vuejs.org)

可以通过下面这个快捷的命令安装

npm install vue-router@4

输入命令前一定要注意转到当前目录

2.创建路由和页面

1)创建路由

在当前项目的src下面创建一个router目录，以后的路由写到这里。

2)配置路由

我们可以通过访问path路径，访问对应的页面。比如下面的"/"对应的是Layout页面。我们需要写好Layout页面，并且把他引入进来。

3)路由模式

hash模式：是一种页面跳转的方式，它不会改变浏览器的 URL，但页面会重新加载。不需要后端。

4)创建页面

Main页面：src-views-Main.vue

login页面：src-views-login-index.vue

index.js 代码

import {createRouter, createWebHashHistory} from 'vue-router'
import Layout from '../views/Main.vue'
import Login from '../views/login/index.vue'

const routes=[
    {
        path:'/',
        component:Layout
    },
    {
        path:'/login',
        component:Login
    }
]

const router= createRouter({
    // 路由数据
    routes,
    // 路由匹配
    history:createWebHashHistory()
})
// 导出
export default router

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)
// 路由挂载
app.use(router)
// 显示路由
.mount('#app')

app.vue

<script setup>

</script>

<template>
  <RouterView />  //引入router插件，访问路由，显示对应页面
</template>

<style scoped>

</style>

三.UI框架

优点：开箱即用

链接：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

1)下载element-plus

通过npm下载element-plus

npm install element-plus

2)采用按需引入

使用才会加载

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

vite.config.js代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  
})

这里注意一下，修改了配置要重启一下项目。

如何重启一下项目？

首先cd到当前目录pzadmin再运行以下命令

npm run dev

3）页面布局

container容器

这个符合，复制代码放到Main.vue。然后我们需要去除默认样式

style.css

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  /* font-size:100%; */
  vertical-align: baseline;
  background: transparent;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

body {
  height: 100vh;
  background-color: #f1f4f6;
}

#app {
  height: 100%;
}

.el-header {
  height: 50px !important;
  padding: 0 !important;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.05);
  border-bottom: 1px solid transparent;
}

.pagination-info {
  padding: 10px 0;
  background-color: #fff;
  .el-pagination {
    justify-content: end;
  }
}