vite + vue3 + vue-router4 + ts + element plus + pinia + axios構建專案-有解無憂

最后是完整的vite.config.ts、main.ts配置

1、先用vite創建一個專案

npm create vite@latest

2、安裝element plus

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

vite.config.ts配置組件按需匯入，圖示自動匯入

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 = https://www.cnblogs.com/gxp69/archive/2023/04/25/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,
        }),

    ],
})

main.ts配置

/**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>

3、安裝axios

yarn add axios

main.ts

/**axios*/
import axios from "@/plugins/axios";//配置封裝

$vueApp.config.globalProperties.$axios = axios;

4、安裝pinia

yarn add pinia

/stores/index.ts

import { createPinia} from 'pinia'
const pinia = createPinia()

export default pinia;

/stores/counter.ts

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

main.ts

/**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;

5、安裝router4

yarn add vue-router

/router/index

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;

main.ts

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

6、vite.config.ts常用配置@檔案路徑、css預處理、代理服務https(需要證書，否則會報錯)

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/, '/'),
            },
        }
    }
})

tsconfig.json檔案加上如下配置，否則@引入檔案會報錯

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

}

7、transition過度效果，和vue2區別是class名稱變了

<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);
}

8、自定義指令

yarn add throttle-debounce

/directive/clickDebounce

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)
}

main.ts

/**指令*/
import debounceDirective from '@/directive/clickDebounce/index.js'

debounceDirective($vueApp);

9、過濾器

/filters/index

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

main.ts

/**過濾器*/
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>

10、打包

打包報錯把package.json中

"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 = https://www.cnblogs.com/gxp69/archive/2023/04/25/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')

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551232.html

標籤：其他

上一篇：帶你了解關于FastAPI快速開發Web API專案中的模板和Jinja

下一篇：返回列表