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 axios

        util文件夹下创建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)
})