【文件增量备份系统】前端项目构建-编程知识

【文件增量备份系统】前端项目构建

文章目录

创建项目
- 安装项目依赖
- 引入element plus组件
- - 下载组件
  - 在main.js中使用组件
  - 测试
- 整合路由router
- - 下载组件
  - 创建路由管理器`index.js`
  - 使用路由
  - App.vue上面使用 <router-view />
  - 测试
- 整合axios
- - 下载组件
  - 工具类`axiosRequest.js`
  - 工具类使用

创建项目

dam@wangrunqindeMBP dev % yarn create vite increment-backup-client --template vue
yarn create v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@5.1.0" with binaries:- create-vite- cva
[##] 2/2
Scaffolding project in /Users/dam/Projects/increment-backup/dev/increment-backup-client...Done. Now run:cd increment-backup-clientyarnyarn dev✨  Done in 1.76s.

安装项目依赖

dam@wangrunqindeMBP increment-backup-client % sudo npm install

引入element plus组件

下载组件

yarn add element-plus

在这里插入图片描述

在main.js中使用组件

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

测试

在这里插入图片描述

组件使用成功

在这里插入图片描述

整合路由router

下载组件

sudo yarn add vue-router@4.1.6

创建路由管理器`index.js`

// 定义一些路由
import Index from "../views/index.vue";const routes = [{ path: '/', component: Index }
]export default routes;

使用路由

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'import routes from './router/index.js'
import * as VueRouter from 'vue-router';const app = createApp(App)const router = VueRouter.createRouter({// 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。history: VueRouter.createWebHistory(),routes, // `routes: routes` 的缩写
})app.use(router);
app.use(ElementPlus)
app.mount('#app')

App.vue上面使用

<script>
export default {name: 'App'
}
</script><template><div id="app"><router-view /></div>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

测试

引入成功

在这里插入图片描述

整合axios

下载组件

在这里插入图片描述

"axios": "^0.27.2"

工具类`axiosRequest.js`

import axios from 'axios'
import {ElMessage} from "element-plus";//获取配置文件 .env.development 的数据
const BASE_URL = "http://localhost:8899";
const REQUEST_TIMEOUT = 5000;// create an axios instance
const service = axios.create({baseURL: BASE_URL, // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: REQUEST_TIMEOUT // request timeout
})// 请求拦截器
service.interceptors.request.use(config => {return config},error => {console.log(error)return Promise.reject(error)}
)// 相应拦截器
service.interceptors.response.use(response => {const res = response.data;if (res.code) {console.log("res：" + JSON.stringify(res));if (res.code !== '0') {ElMessage({message: res.message || '请求出错了',type: 'error',duration: 2 * 1000})return Promise.reject(new Error(res.message || '请求出错了'))} else {// return resreturn Promise.resolve(res)}}else {return Promise.reject(new Error(res.message || '请求出错了'))}},error => {// alert("error：" + JSON.stringify(error))// console.log('err' + error)ElMessage({message: error.message,type: 'error',duration: 2 * 1000})return Promise.reject(error)}
)export default service
export {BASE_URL}

工具类使用

import request from '../utils/axiosRequest.js'const apiName = '/source'export default {list(data) {return request({url: `${apiName}/list`,method: "post",data: data})}}