后台管理的项目搭建过程（第一课）

 第一部分 认识项目的搭配环境开发

 第二部分  项目的创建需要的环境依赖如下

1. Element - The world's most popular Vue UI framework   ElementUl组件库
2. Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网      Sass预处理器
3. Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网]    Less预处理器
4. CSS Tools: Reset CSS  Css样式重置
5. Font Awesome，一套绝佳的图标字体库和CSS框架     图标库的使用
6.  npm i -S axios  axiox 网络请求的知识    Vue(第十七课)AXIOS对JSON数据的增删改查_星辰镜的博客-CSDN博客
7. npm i vue-router -S 路由的安装   Vue3框架中路由的使用和局部刷新的功能(第十一课)_星辰镜的博客-CSDN博客_vue3 路由局部刷新
8. json-server 的安装   Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查_星辰镜的博客-CSDN博客
9. Vue框架学习(第十三课)Vuex状态管理中的store和state属性_星辰镜的博客-CSDN博客_vue store  状态管理 vuex

本案例的安装不在示范 之前有说到

App.vue

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用elementui组件库
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
// 引用elementui组件库
// .use(ElementPlus)
createApp(App).use(store).use(router).mount('#app')

index.ts

 data.json

{"students": [{"name": "我修改的数据","age": "27","id": 1003},{"id": 1004,"name": "王者荣耀","sex": "男","height": "190","weight": "67","job": "Web开发工程师"},{"name": "硝酸","sex": "男","height": "178","weight": "58","job": "前端开发工程师","id": 1005},{"name": "小黄入","sex": "男","height": "198","weight": "78","job": "王者","id": 1006},{"name": "小黄","sex": "男","height": "198","weight": "78","job": "王者","id": 1007},{"name": "小黄","sex": "男","height": "198","weight": "78","job": "王者","id": 1008},{"name": "小黄","sex": "男","height": "198","weight": "78","job": "王者","id": 1011},{"id": 1012},{"name": "小黄","sex": "男","height": "198","weight": "78","job": "王者","id": 1013},{"name": "我是增加的数据在studens中","sex": "男","height": "200","weight": "18","job": "吃鸡","id": 1014},{"name": "AAA","sex": "男","height": "198","weight": "78","job": "王者","id": 1015}],"teachers": [{"id": 102,"name": "王米","sex": "女","subject": "前端开发工程师"},{"id": 104},{"name": "我是数据","sex": "男","subject": "墙隔断","id": 105},{"name": "小明","sex:男": "","subject:随口": "","id": 106},{"name": "我叫立尚三","sex:男": "","subject:王者荣耀": "","id": 107},{"name": "我叫李珊四","sex:男": "","subject:王者荣耀": "","id": 108}],"profile": {"name": "typicode"}}

store/index.ts

import { createStore } from 'vuex'export default createStore({state: {},getters: {},mutations: {},actions: {},modules: {}
})

main.css

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)
*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
html, body {width: 100%;height: 100%;font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
}

serviceAxios.js

import axios from 'axios'// 创建拦截器
const service=axios.create()
// 请求拦截和响应拦截
// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});export default service

登录注册的样式