vue项目结构搭建
参考上文
1）项目创建
首先参照上文用npm构建项目的基本结构，但是记得勾选route路由和typescript语法。
2）构建项目结构
打开src文件夹，新建如下目录：
api 访问接口
composables 可组合项
directives 指令
styles 样式
utils 工具
3）导入elements-plus
运行npm install element-plus --save安装依赖包
打开main.ts引用组件
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import locale from 'element-plus/dist/locale/zh-cn.js'
const app = createApp(App)
app.use(ElementPlus, locale)
app.mount('#app')
1）覆盖使用配色文件
打开style文件夹新建element目录，在新建的目录下新建index.scss，scss是css的升级版。这个文件的内容如下所示，其作用是覆盖掉elementplus原本的默认色。
@forward 'element-plus/theme-chalk/src/common/var.scss'
with (
$colors: (
'primary':(
//主色
'base':#27ba9b,
),
'success':(
//成功色
'base':#1dc779,
),
'warning':(
//警告色
'base':#ffb302,
),
'danger':(
//主色
'base':#e26237,
),
'error':(
//主色
'base':#cf4444,
),
),
);在styles文件夹下新建var.scss
$xtxColor:#27ba9b;
$helpColor:#e26237;
$sucColor:#1dc779;
$warnColor:#ffb302;
$priceColor:#cf4444; 在这里可以自定义一些颜色，配色方案可以在这里查阅。
打开vite.config.ts，修改如下：
import { fileURLToPath, URL } from 'node:url'
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({
//配置elements采用sass样式配色
resolvers: [ElementPlusResolver({importStyle:'sass'})],
}),
],
css:{
preprocessorOptions:{//导入样式表
scss:{
//在这里引入刚刚写的两个文件，注意用反引号包裹数据，双引号包裹每个路径。
additionalData:`
@use "@/styles/element/index.scss" as *;
@use "@/styles/var.scss" as *;
`
}
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
4）构建页面组件
打开views目录，新建一些文件夹，按照项目需要构建。
如果一个组件包含几个互斥子组件请使用一个RouterView标签，如下：
<template>
<div>
布局页面
</div>
<RouterView></RouterView>
</template>RouterView可以根据路由更换组件。
5）配置和使用路由
打开router文件夹下的index.ts
import { createRouter, createWebHistory } from 'vue-router'
//这里引用路由所指向的文件
import login from '@/views/login/index.vue'
import layout from '@/views/layout/index.vue'
import home from '@/views/home/index.vue'
import exams from '@/views/exams/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
//这里配置路由地址
{
path:'/',
component:layout,
},
{
path:'/login',
component:login,
},
]
})
export default router
这样在访问该网站时在网址后加上路由地址就可以访问相应页面了。这里我们访问localhost:5173， 得到这样的页面
可以看到layout在app内部，是app.vue的一部分。无论路由的部分怎么变动都不会影响app.vue。
多级路由
多级路由就是在普通路由上加一层，在路由上加一个children属性，值和route的写法相同，如下：
import { createRouter, createWebHistory } from 'vue-router'
import login from '@/views/login/index.vue'
import layout from '@/views/layout/index.vue'
import home from '@/views/home/index.vue'
import exams from '@/views/exams/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path:'/',
component:layout,
children:[{
path:'',
component:home
},{
path:'/exams',
component:exams
}]
},
{
path:'/login',
component:login,
},
]
})
export default router
我们为layout添加了子路由，访问响应页面也要多加一层了。还是访问localhost:5173，如下图：
home在layout的内部，这样的写法可以套很多层。
6）封装axios
首先安装axios
npm install axiosutil文件夹下创建http.js
//axios基础封装
import axios from "axios"
import { ElMessage } from "element-plus"
//创建一个可以发起请求获得响应的实例
const httpInstance = axios.create({
timeout: 50000 //超时毫秒数
})
//拦截器配置
//请求拦截器
httpInstance.interceptors.request.use(
config => {
return config
},
e => Promise.reject(e)
)//第一个参数无问题时的操作，第二个参数有错误时的操作。
//响应拦截器
httpInstance.interceptors.response.use(
res => res.data,
e =>{
if(e.response.status == 401){
ElMessage.error("请登录")
}else{
//和if里的效果相同，两种写法
ElMessage({
type:'error',
message:'请重新登录' + e
})
}
return e
}
)
export default httpInstance //对外暴露，在其他位置调用7）调用api
api目录下新建textAPI.js
import httpInstance from "@/utils/http";
const params = new URLSearchParams()
params.append()
export const getHomeNav = () =>{
return httpInstance({
url:'接口测试网址',
method:'post',
params:params,
})
}params是请求体，调用函数可以从写好的后端接口中取数据。
调用函数的方式：
import {getHomeNav} from '@/apis/textAPI.'
getHomeNav().then((res:any) => {
console.log(res)
})
原文地址：https://blog.csdn.net/mecende/article/details/142337869
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！