vite + vue3 + vue

您所在的位置：网站首页 › ts变量声明 › vite + vue3 + vue

vite + vue3 + vue

#vite + vue3 + vue| 来源: 网络整理| 查看: 265

最后是完整的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});

页面文件使用

按钮

showMessage const {proxy} = getCurrentInstance() as any; const showMessage = () => { proxy.$message.success({ message: 'proxy: ', type: 'success' }) }

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)

页面使用

count:{{ count }},double:{{ double }} increment 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: 'Home1111' } // 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名称变了

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

页面使用

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

【本文地址】

vite + vue3 + vue

vite + vue3 + vue

今日新闻

推荐新闻