傻瓜式配置新项目vite+vue3+Element-plus+unocss+vue-router+axios+pinia+打包成zip_unocss vite

缘由：由于不经常创建新项目导致每次都忘，在这做个记录，再用的时候就直接翻翻，不用再查了

这里插一句，vite.config.ts 会被多次编辑，不用每次复制，结尾会贴一份完整的代码

路由守卫待续......

可能还有其他也待续......

写了一天写不动了......

1.先初始化项目

1.1 选择用vite构建，输入下面命令

npm create vite@latest

1.2 会问你是否继续，直接回车，默认为yes

1.3 输入项目名字

1.4 输入package.json中的名字，不能有大写

1.5 选择你所用的框架，用上下方向键选择，然后回车，我这里用了vue

1.6 选择用什么类型来开发，也是用上下方向键选择，然后回车，我这里用了TypeScript

1.7 然后就创建好了

1.8 然后跟着命令跑起来就行了，这是完整的截图

2.配置UI element-plus(点击这里查看文档)

2.1 先下载UI

npm install element-plus --save

2.2  然后配置按需导入

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
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'
 
export default defineConfig({
  // ...
  plugins: [
    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
  ],
})

2.3 自定义一个主题

2.3.1 先下载所需要的依赖

npm i @types/node scss -D

2.3.2 创建一个scss文件，路径为 src/assets/css/element.scss

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #ff7e00,
    ),
  ),
);
 
// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
// @use "element-plus/theme-chalk/src/index.scss" as *;

 2.3.3 配置 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'
 
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver(
+        {importStyle: 'sass'}
      )],
    }),
  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/assets/css/element.scss" as *;`,
+      }
+    }
+  }
})

3.配置unocss(点击这里查看文档)

3.1 下载依赖

npm i unocss @unocss/preset-rem-to-px -D

 3.2 创建unocss.config.ts

import { defineConfig, presetUno, presetAttributify } from 'unocss';
// presetAttributify 属性化模式，属性冲突时，可以通过默认un-前缀来解决：<div m-2 rounded text-teal-400 >代替class</div>
import presetRemToPx from '@unocss/preset-rem-to-px';
// 此处我用了rem to px的预设，所以后面不加单位的数字的话会直接被转化为px（如果不用这个预设，就需要用m-100px之类的）
 
export default defineConfig({
  presets: [presetUno(), presetAttributify(), presetRemToPx({ baseFontSize: 4 })],
  rules: [
    [/^fs-(\d+)$/, ([, num]) => ({ 'font-size': `${num}px` })],
    [/^lh-(\d+)$/, ([, num]) => ({ 'line-height': `${num}px` })]
  ],
  variants: [
    matcher => {
      if (!matcher.startsWith('hover:')) {
        return matcher;
      }
      return {
        matcher: matcher.slice(6),
        selector: s => `${s}:hover`
      };
    }
  ],
  shortcuts: {
    'center': 'flex items-center justify-center'
  }
});

3.3 配置 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'
+ import Unocss from 'unocss/vite'
 
export default defineConfig({
  plugins: [
    vue(),
+    Unocss({
+      configFile: '@/unocss.config.ts'
+    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: 'sass'
      })],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      }
    }
  }
})

3.4 配置main.ts 

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
+ import 'uno.css'
 
createApp(App).mount('#app')

4.配置vue-router

4.1 先下载依赖

npm install vue-router@4 -D

4.2 在src下创建 router/index.ts

import { createRouter,createWebHashHistory } from "vue-router";
import login from '@/views/login/login.vue'
import home from '@/views/home/home.vue'
 
 
let routes = [
  {
    path:'/',
    redirect:'/login'
  },
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/home',
    name: 'home',
    component: home
  }
]
 
const router = createRouter({
  history:createWebHashHistory(),
  routes
})
 
export default router

4.3 在 main.ts 中配置

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'uno.css'
+ import router from '@/router/index.ts'
 
 
- createApp(App).mount('#app')
+ createApp(App).use(router).mount('#app')

4.4 如果用了ts报错找不到类型啥的，在根目录下的 vite-env.d.ts 添加下面这个

/// <reference types="vite/client" />
 
 
+ declare module "*ts"
+ declare module "*vue"

4.5 路由守卫 路由守卫先待续......

const WhiteList = ['/login']; // 配置白名单
router.beforeEach((to, from, next)=> {
  if (WhiteList.indexOf(to.fullPath) !== -1) { // 判断前往页面是都存在于白名单
    next()
  } else {
    if (localStorage.getItem('userInfo')) {// 判断用户是否d登录
      if (to.name) { // 判断是否存在路由的name名字，如果有则代表有路由表已经存在，name继续前往，反之，则不存在
        next()
      }
      else {// 当路由不存在，录取路由，动态添加路由表，
        let localRoutes: any = localStorage.getItem('routes');
        let recursionList = recursionParam(JSON.parse(localRoutes));
        for (let item of recursionList) {
          router.addRoute(item)
        }
        next({ ...to, replace: true })
      }
    } else {
      next('/login')
    }
  }
});

5.配置交互axios

5.1先设置环境变量+代理

5.1.1 根目录下创建.env.production和.env.development

# .env.development
VITE_APP_MODE = "development"
#base api
VITE_APP_BASE_API = "/aaa/"
 
 
# .env.production
VITE_APP_MODE = "production"
#base api
VITE_APP_BASE_API = "https://xxx.xxx.com/"

5.1.2 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'
import Unocss from 'unocss/vite'
 
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      configFile: '@/unocss.config.ts'
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: 'sass'
      })],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      }
    }
  },
+  server: {
+    proxy: {
+      // 字符串代理
+      '/xxx': {
+        target: 'https://xxx.xxx.com/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/xxx/, '')
+      }
+    }
+  }
})

5.2 配置axios

5.2.1 先下载axios

npm i axios qs -D

5.2.2 在src/utils下创建 api.js 编写 axios 的统一方法

import axios from "axios"
import qs from "qs"
import { ElMessage } from 'element-plus'
let key = "loading";
 
const _LOGIN_URL = import.meta.env.VITE_APP_LOGIN_URL;
 
const instance = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 6000,
});
 
axios.interceptors.response.use((res) => {
  // return
  if (res.status != 200) {
    ElMessage.error("暂无网络，请稍后重试");
    ElMessage.destroy(key);
    return;
  }
  if (!res.data.code || res.config.headers.status == 3) {
    ElMessage.destroy(key);
    return res.data;
  }
  if (res.data.code == 301) {
    ElMessage.error("身份已过期，请重新登录");
    ElMessage.destroy(key);
    let expireTime = setTimeout(() => {
      window.location.href = _LOGIN_URL;
      clearTimeout(expireTime);
    }, 3000);
    return;
  }
  if (res.data.code == 313) {
    ElMessage.error("未登录，请登录");
    ElMessage.destroy(key);
    let notLoginTime = setTimeout(() => {
      window.location.href = _LOGIN_URL;
      clearTimeout(notLoginTime);
    }, 3000);
    return;
  }
  ElMessage.destroy(key);
  return res.data;
},
  (error) => {
    return error;
  }
);
 
instance.interceptors.request.use((config) => {
  console.log(config);
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
}
);
 
const requestApi = (method, url, params, status, headers) => {
  // status 0: 都显示 1: 不显示loading 2: 不显示报错 3: 都不显示
  if (status != 1 || status != 3) {
    message.loading({ content: "加载中", key: key, duration: 0 });
  }
  headers.status = status;
  return new Promise((resolve, reject) => {
    instance({
      method: method,
      headers: headers,
      url,
      params: method == "GET" && params,
      data: method == "POST" && qs.stringify(params)
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    });
  })
}
 
const login = (params) => requestApi("POST", "/login", params, 0, { "Content-Type": "application/x-www-form-urlencoded" });
 
export {
  login
}

6. 配置pinia

6.1 先下载所需的依赖

  pinia-plugin-persistedstate是为了将store存在本地存储中，这样刷新页面关键信息也不会丢失

npm install pinia pinia-plugin-persistedstate -D

6.2 然后在 main.ts 中配置 

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'uno.css'
import router from '@/router/index.ts'
+ import { createPinia } from "pinia";
+ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 
- createApp(App).use(router).mount('#app')
 
 
 
+ const app = createApp(App);
+ const store = createPinia();
+ store.use(piniaPluginPersistedstate);
 
+ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+   app.component(key, component)
+ }
+ app.use(router).use(store).mount("#app");

6.3 如何配置 

  简单举个例子，创建文件，路径为 src/store/user.ts 

import { defineStore } from "pinia"
 
let _LOGIN_URL = import.meta.env.VITE_APP_LOGIN_URL; // 从环境变量中拿到当前应该跳转到哪个地址
 
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      token: '', // 用户token
      userInfo: {}, // 用户信息
    }
  },
  persist: {
    storage: sessionStorage, // 这里设置存储方式，也可以是 localStorage
    paths: ['userInfo', 'token'], // 要存储的哪个字段
  },
  actions: {
    setToken(token: string) {
      this.token = token; // 修改
    },
    setUserInfo(userInfo: any) {
      this.userInfo = userInfo;
    },
    logout() {
      window.sessionStorage.clear();
      window.location.href = _LOGIN_URL;
      // 调用方法，这里只能把存储里的删掉，pinia本身还需要多加一步$reset()来清除，这个后面有体现
    }
  }
})

6.4 如何调用操作 

在vue文件中，举个例子，可以结合自己需求去完成

<script setup lang="ts">
  import { useUserStore } from "@/store/user";
  const userStore: any = useUserStore();
 
 
  onMounted(() => {
    if (!userStore.token) { // 这里直接就能使用
      // 没有登录信息
      router.push({
        name: "login",
      });
      return;
    }
 
    // 这里举个例子怎么使用
 
    // 1. 调用事件去修改
    let token = "xajxbnajsbxjasbxhsbxhsabxjhbsajhbxa";
    userStore.setToken(token); 
 
    // 2. 本身自带的方法去修改
    userStore.$patch((state) => {
      state.token = token;
    })
 
    // 3.直接修改不推荐，能不用就不用吧
    userStore.token = token;
  })
 
  const logout = () => {
    // 退出登录
    userStore.$reset(); // 清空本身store中所有数据
    userStore.logout(); // 调用方法
  };
</script>

7. 配置打包zip 

7.1 先下载依赖

pnpm install vite-plugin-zip-pack -D

7.2 配置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'
import Unocss from 'unocss/vite'
+ import zipPack from "vite-plugin-zip-pack";
 
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      configFile: '@/unocss.config.ts'
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: 'sass'
      })],
    }),
    + zipPack({
    +   inDir: 'xxx', // 输入的文件夹，即要打包的文件夹
    +   outDir: './', // 打包好的zip文件放置的位置
    +   outFileName: 'xxx.zip', // 打包好的文件名
    +   pathPrefix: '' // 可选，文件路径前缀
    + }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      }
    }
  },
  server: {
    proxy: {
      // 字符串代理
      '/xxx': {
        target: 'https://xxx.xxx.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/xxx/, '')
      }
    }
  }
})

8. 结尾

8.1 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'
import Unocss from 'unocss/vite'
import zipPack from "vite-plugin-zip-pack"
 
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      configFile: '@/unocss.config.ts'
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: 'sass'
      })],
    }),
    zipPack({
      inDir: 'xxx', // 输入的文件夹，即要打包的文件夹
      outDir: './', // 打包好的zip文件放置的文件夹
      outFileName: 'xxx.zip', // 打包好的文件名
      pathPrefix: '' // 可选，文件路径前缀
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      }
    }
  },
  server: {
    proxy: {
      // 字符串代理
      '/xxx': {
        target: 'https://xxx.xxx.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/xxx/, '')
      },
    }
  }
})

8.2 main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'uno.css'
import router from '@/router/index.ts'
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
createApp(App).use(router).mount('#app')
 
const app = createApp(App);
const store = createPinia();
store.use(piniaPluginPersistedstate);
 
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
 
app.use(router).use(store).mount("#app");