vue实现蓝桥云官网-项目依赖安装配置（二）

所需依赖

"@element-plus/icons-vue": "^2.3.1",//element-plus图标库
"axios": "^1.6.8",//axios
"date-fns": "^3.6.0",//日期格式化插件
"echarts": "^5.5.0",//echarts
"element-plus": "^2.7.3",//element-plusui组件
"pinia": "^2.1.7",//pinia
"pinia-plugin-persistedstate": "^3.2.1",//pinia持久化

npm install element-plus -S
npm install @element-plus/icons-vue -S
npm install axios -S
npm install date-fns -S
npm install echarts -S
npm install pinia -S
npm install pinia-plugin-persistedstate -S

初始化样式src/assets/main.css

h1,h2,h3,h4,h5,h6,body,p,ul,form,dl,dd,dt{
  padding: 0;
  margin: 0;
}
a,a:visited{
  text-decoration: none;
  color: #000;
}
ul,ol,li{
  list-style:none;
}
img{
  display: block;
  border: none;
}
*,
:after,
:before {
  box-sizing:border-box
}

body{
  min-width: 960px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
:root{
  /* header start */
  --nav-text-color: hsla(0, 0%, 100%, .702);
  --nav-hover-color: #fff;
  --nav-active-color: #fff;
  --nav-search-bg-color: rgba(0, 0, 0, .251);
  --nav-login-text-color: #fff;
  /* header end */
}

main.js文件配置

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)

const pinia = createPinia();


app.use(pinia);
pinia.use(piniaPluginPersistedstate);

app.use(router)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$dayjs = dayjs;
app.provide('$axios', axios);

app.mount('#app')

vite.config.js文件配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
   cors: true, 
   open: true, 
   port: 319,
   proxy: {
     '^/api': {
       target: 'http://localhost:3000/',  
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/api/, '')
     }
   }
  },
  build: {
    //指定输出路径
    outDir: "dist",
    //生成静态资源的存放路径
    assetsDir: "assets",
    //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
    assetsInlineLimit: 4096,
    //启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    //构建后是否生成 source map 文件
    sourcemap: false,
    //自定义底层的 Rollup 打包配置
    rollupOptions: {
        input:{//可以配置多个，表示多入口
            index:path.resolve(__dirname,"index.html"),
            // project:resolve(__dirname,"project.html")
        },
        output:{
            // chunkFileNames:'static/js/[name]-[hash].js',
            // entryFileNames:"static/js/[name]-[hash].js",
            // assetFileNames:"static/[ext]/name-[hash].[ext]"
        }
    },
    //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
    emptyOutDir: true,
    //chunk 大小警告的限制
    chunkSizeWarningLimit: 500
}
})

图片加载工具方法封装/src/utils/tools.js

export const showPic = (name) => {
    return new URL(`../assets/img/${name}.png`, import.meta.url).href;
}
export const showIcon = (name) => {
    return new URL(`../assets/icon/${name}.png`, import.meta.url).href;
}

入口文件APP.vue

<template>
  <router-view></router-view>
</template>