vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目

npm create vite@latest

yarn add element-plus @element-plus/icons-vue

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

import path from 'path' 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' // @ts-ignore import Icons from 'unplugin-icons/vite' // @ts-ignore import IconsResolver from 'unplugin-icons/resolver' // @ts-ignore const pathSrc = path.resolve(__dirname, 'src/types')  // https://vitejs.dev/config/ export default defineConfig({     plugins: [         vue(),         AutoImport({             // Auto import functions from Vue, e.g. ref, reactive, toRef...             // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等             imports: ['vue'],              // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)             // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)             resolvers: [                 ElementPlusResolver(),                  // Auto import icon components                 // 自动导入图标组件                 IconsResolver({                     prefix: 'Icon',                 }),             ],              dts: path.resolve(pathSrc, 'auto-imports.d.ts'),         }),         Components({             resolvers: [                 // Auto register icon components                 // 自动注册图标组件                 //{prefix}-{collection}-{icon},                 // By default, the prefix is set to i while you can customize via config                 // 'ep'是element plus 图标的标识（固定的）https://icon-sets.iconify.design/                 IconsResolver({                     enabledCollections: ['ep'],                 }),                 // Auto register Element Plus components                 // 自动导入 Element Plus 组件                 ElementPlusResolver(),             ],              dts: path.resolve(pathSrc, 'components.d.ts'),         }),         Icons({             autoInstall: true,         }),      ], })

/**ElementPlus*/ import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'  $vueApp.use(ElementPlus, {size: 'small', zIndex: 100});

<i-ep-edit/> <el-button type="primary">      <i-ep-edit slot="icon"/>      按钮 </el-button>

<el-button type="primary" @click="showMessage">showMessage</el-button>

<script setup lang="ts">  const {proxy} = getCurrentInstance() as any;  const showMessage = () => {     proxy.$message.success({         message: 'proxy: ',         type: 'success'     }) } </script>

yarn add axios

/**axios*/ import axios from "@/plugins/axios";//配置封装  $vueApp.config.globalProperties.$axios = axios;

yarn add pinia

import { createPinia} from 'pinia' const pinia = createPinia()  export default pinia;

import {defineStore} from "pinia"; export const useCounterStore = defineStore('counter', {     state: () => ({ count: 0 }),     getters: {         double: (state) => state.count * 2,     },     actions: {         increment() {             this.count++         },     }, })

/**pinia*/ import pinia from './stores/index';  $vueApp.use(pinia)

 <div>             count:{{ count }},double:{{ double }}             <el-button type="primary" @click="increment">increment</el-button> </div>

import {storeToRefs} from 'pinia' import {useCounterStore} from '@/stores/counter' // 可以在组件中的任意位置访问 `store` 变量 ✨ const store = useCounterStore() // `name` 和 `doubleCount` 是响应式的 ref // 同时通过插件添加的属性也会被提取为 ref // 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性 const {count, double} = storeToRefs(store) // 作为 action 的 increment 可以直接解构 const {increment} = store;

yarn add vue-router

import * as VueRouter from 'vue-router'  // 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home1111</div>' }  // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [     { path: '/', component: Home },     { path: '/about', component:  () => import('@/views/about.vue') },     { path: '/test', component: () => import('@/views/test.vue') }, ]  // 3. 创建路由实例并传递 `routes` 配置 // 你可以在这里输入更多的配置，但我们在这里 // 暂时保持简单 const router = VueRouter.createRouter({     history: VueRouter.createWebHistory(),     routes, // `routes: routes` 的缩写 }) export default router;

/**路由*/ import router from '@/router/index'; $vueApp.use(router)

npm install -D @vitejs/plugin-basic-ssl

import path from 'path' import {defineConfig} from 'vite' import basicSsl from '@vitejs/plugin-basic-ssl'   // https://vitejs.dev/config/ export default defineConfig({     plugins: [         //https证书         basicSsl(),     ],     resolve: {         alias: [             {                 find: '@',                 // @ts-ignore                 replacement: path.resolve(__dirname, 'src'),             }         ],     },     // css预处理器     css: {         preprocessorOptions: {             scss: {                 additionalData: `@import "@/style/constant.scss";`,//变量文件，在其他页面中可以直接使用变量，不用每次引入             },         },     },     server: {         https: true,         host: '0.0.0.0',         port: 8080,         proxy: {             '/api': {                 target: 'https://*****/api',//local环境                 changeOrigin: true, //允许跨域                 rewrite: (path) => path.replace(/^/api/, '/'),             },         }     } })

{   "compilerOptions": {     ......     "baseUrl": "./",     "paths": {       "@/*":["src/*"],     }   },  }

<router-view v-slot="{ Component }">             <transition name="fade-transform">                 <component :is="Component" />             </transition>         </router-view>

/* fade-transform */ .fade-transform-leave-active, .fade-transform-enter-active {   transition: all .2s; }  .fade-transform-enter-from {   opacity: 0;   transform: translateX(-30px); }  .fade-transform-leave-to {   opacity: 0;   transform: translateX(30px); }

yarn add throttle-debounce

import {on, off} from '@/utils/dom'   let fn = null, $vueApp = null; const debounceDirective = {     name: 'debounce',     install(Vue, {defaultTime = 300} = {}) {         $vueApp.directive('debounce', {             beforeMount(el, {value, arg}) {                 fn = debounce(arg || defaultTime, value)                 on(el, 'click', fn)             },              unMounted: function (el) {                 if (fn) {                     off(el, 'click', fn)                 }             },         })     }, } export default (vueApp) => {     $vueApp = vueApp;     $vueApp.use(debounceDirective) }

/**指令*/ import debounceDirective from '@/directive/clickDebounce/index.js'  debounceDirective($vueApp);

const getTime = (time, type = 1) => {   return 'getTime' } export default{   getTime }

/**过滤器*/ import filters from './filters/index.js'  Object.keys(filters).forEach(     (k) =>         ((             $vueApp.config.globalProperties.$filters ||             ($vueApp.config.globalProperties.$filters = {})         )[k] = filters[k]) )

   <div>         {{ $filters.getTime(Date.now()) }}     </div>

"build": "vue-tsc && vite build",

"build": "vite build",

import path from 'path' 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 basicSsl from '@vitejs/plugin-basic-ssl' // @ts-ignore import Icons from 'unplugin-icons/vite' // @ts-ignore import IconsResolver from 'unplugin-icons/resolver' // @ts-ignore const pathSrc = path.resolve(__dirname, 'src/types')  // https://vitejs.dev/config/ export default defineConfig({     plugins: [         vue(),         AutoImport({             // Auto import functions from Vue, e.g. ref, reactive, toRef...             // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等             imports: ['vue'],              // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)             // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)             resolvers: [                 ElementPlusResolver(),                  // Auto import icon components                 // 自动导入图标组件                 IconsResolver({                     prefix: 'Icon',                 }),             ],              dts: path.resolve(pathSrc, 'auto-imports.d.ts'),         }),         Components({             resolvers: [                 // Auto register icon components                 // 自动注册图标组件                 //{prefix}-{collection}-{icon},                 // By default, the prefix is set to i while you can customize via config                 // 'ep'是element plus 图标的标识（固定的）https://icon-sets.iconify.design/                 IconsResolver({                     enabledCollections: ['ep'],                 }),                 // Auto register Element Plus components                 // 自动导入 Element Plus 组件                 ElementPlusResolver(),             ],              dts: path.resolve(pathSrc, 'components.d.ts'),         }),         Icons({             autoInstall: true,         }),         //https证书         basicSsl(),     ],     resolve: {         alias: [             {                 find: '@',                 // @ts-ignore                 replacement: path.resolve(__dirname, 'src'),             }         ],     },     // css预处理器     css: {         preprocessorOptions: {             scss: {                 additionalData: `@import "@/style/constant.scss";`,             },         },     },     server: {         https: true,         host: '0.0.0.0',         port: 8080,         proxy: {             '/api': {                 target: 'https://*******/api',                 changeOrigin: true, //允许跨域                 rewrite: (path) => path.replace(/^/api/, '/'),             },         }     } })

import {createApp} from 'vue' import '@/style/index.scss' import App from './App.vue'  const $vueApp = createApp(App);  /**ElementPlus*/ import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'  $vueApp.use(ElementPlus, {size: 'small', zIndex: 100});  /**过滤器*/ import filters from './filters/index.js'  Object.keys(filters).forEach(     (k) =>         ((             $vueApp.config.globalProperties.$filters ||             ($vueApp.config.globalProperties.$filters = {})         )[k] = filters[k]) )  /**axios*/ import axios from "@/plugins/axios";  $vueApp.config.globalProperties.$axios = axios;  /**pinia*/ import pinia from './stores/index';  $vueApp.use(pinia)  /**指令*/ import debounceDirective from '@/directive/clickDebounce/index.js'  debounceDirective($vueApp);  /**路由*/ import router from '@/router/index'; $vueApp.use(router)  $vueApp.mount('#app')