瓜瓜头条

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

2023-04-25 14:46 由 Jade_g 发表于 #前端开发

最后是完整的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 = 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 = 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')

 

热门相关：帝少的专属：小甜心，太缠人   豪门闪婚：帝少的神秘冷妻   豪门闪婚：帝少的神秘冷妻   大神你人设崩了   寂静王冠