虽然自己在学习vue的过程中，也搭建过项目。但在工作上，突然需要自己来搭建一个项目竟然一时间无从下手。有很多细节都是之前没有考虑过的。还是老老实实做一下笔记，不然真的学过就忘。

1.创建项目

// 创建项目的命令
vue create vue3_project

选择配置--我们在这里选择自定义

接下来还有一些配置就根据自己的需要来做选择。

2.引入element plus

// 安装
npm install element-plus --save
// 安装自动导入的插件
npm install -D unplugin-vue-components unplugin-auto-import

然后再vue.config.js 文件中配置webpack


const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }
})

3.axios的安装以及封装

在这里使用了一个qs的库，需要安装一下。

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

qs.parse()是将URL解析成对象的形式

qs.stringify()是将对象序列化成URL的形式，以&进行拼接

// 安装axios
npm install axios

// 封装request.js文件
import axios from 'axios'
import qs from 'qs'
import { ElMessage } from 'element-plus'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  tomeout: 5000,
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
  transformRequest: [function (data) {
    return qs.stringify(data)
  }]
})

/*
 * 请求拦截器 将token添加到请求头
*/
service.interceptors.request.use(
  (config) => {
    config.headers['x-auth-token'] = localStorage.getItem('token')
    return config
  },
  (error) => {
    return Promise.reject(new Error(error))
  }
)

/*
 * 响应拦截器
*/
service.interceptors.response.use((response) => {
  const { data, status, info } = response.data
  if (status === 0) {
    return data
  } else {
    ElMessage.error('请求失败！')
    return Promise.reject(new Error(info))
  }
}, error => {
  error.response && ElMessage.error(error.response.data)
  return Promise.reject(new Error(error.response.data))
})

export default service

4.配置代理

解决跨域问题

devServer: {
    proxy: {
      '/api': {
        target: 'http://xxxx.xxxxx.cn/',   // 接口域名
        changeOrigin: true,                           //是否跨域
        pathRewrite: {
          '^/api': ''                                 //需要rewrite的
        }
      }
    }
  },

5. 实现路由菜单

真正做好一个路由权限的管控，我感觉应当前后端一起协作来完成。

但是水平有限，这里就直接写死了。

在router的index.vue文件中定义好。

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login')
  },
  {
    path: '/',
    name: '/',
    component: () => import('../layout')
  }
]
const menuRouter = [
  {
    path: '/gather',
    name: 'gather',
    component: Layout,
    redirect: '/gather/index',
    meta: { title: 'XXX', icon: 'el-icon-data-analysis', roles: ['datapreview2'] },
    children: [{
      path: 'index',
      component: () =>
        import('@/views/gather/index'),
      meta: { title: 'XXX', roles: ['datapreview-master2'], newBreadcrumb: true }
    }]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  // concat！！！
  routes: routes.concat(menuRouter),
  menuRouter
})

export { menuRouter, router }

menu文件

然后再菜单渲染出来就行，但是我只写了一级的菜单。应当优化成不管几级，都可以展示。

<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    :router="true"
    :background-color="'rgba(28, 54, 92, 1)'"
    text-color="#fff"
    active-text-color="#409EFF"
    >
    <el-menu-item v-for="(item,index) in menuRoutes" :key="index" :index="item.path">
      <el-icon><setting /></el-icon>
      <template #title>{{ item.meta.title}}</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import { menuRouter } from '../../router'
const menuRoutes = ref(menuRouter)
</script>

这个小demo大概也就是这样，自己做下来也还有很多欠缺，就当写个笔记。

关于使用脚手架搭建项目的记录--实例demo