最后是完整的vite.config.ts、main.ts配置
1、先用vite創(chuàng)建一個項目
npm create vite@latest
2、安裝element plus
yarn add element-plus @element-plus/icons-vue
vite.config.ts配置組件按需導(dǎo)入，圖標自動導(dǎo)入
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... // 自動導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等 imports: ['vue'], // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style) // 自動導(dǎo)入 Element Plus 相關(guān)函數(shù)，如：ElMessage, ElMessageBox... (帶樣式) resolvers: [ ElementPlusResolver(), // Auto import icon components // 自動導(dǎo)入圖標組件 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 // 自動導(dǎo)入 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: ', }) } </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` 是響應(yīng)式的 ref
// 同時通過插件添加的屬性也會被提取為 ref
// 并且會跳過所有的 action 或非響應(yīng)式 (不是 ref 或 reactive) 的屬性
const {count, double} = storeToRefs(store)
// 作為 action 的 increment 可以直接解構(gòu)
const {increment} = store;
5、安裝router4
yarn add vue-router
/router/index
import * as VueRouter from 'vue-router' // 1. 定義路由組件. // 也可以從其他文件導(dǎo)入 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. 創(chuàng)建路由實例并傳遞 `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預(yù)處理、代理服務(wù)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預(yù)處理器 css: { preprocessorOptions: { scss: { additionalData: `@import "@/style/constant.scss";`,//變量文件，在其他頁面中可以直接使用變量，不用每次引入 }, }, }, server: { https: true, host: '0.0.0.0', port: 8080, proxy: { '/api': { target: 'https://*****/api',//local環(huán)境 changeOrigin: true, //允許跨域 rewrite: (path) => path.replace(/^\/api/, '/'), }, } } })
tsconfig.json文件加上如下配置，否則@引入文件會報錯
{ "compilerOptions": { ...... "baseUrl": "./", "paths": { "@/*":["src/*"], } }, }
7、transition過度效果，和vue2區(qū)別是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",
總結(jié)?
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... // 自動導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等 imports: ['vue'], // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style) // 自動導(dǎo)入 Element Plus 相關(guān)函數(shù)，如：ElMessage, ElMessageBox... (帶樣式) resolvers: [ ElementPlusResolver(), // Auto import icon components // 自動導(dǎo)入圖標組件 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 // 自動導(dǎo)入 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預(yù)處理器 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/, '/'), }, } } })
?文章來源：http://www.zghlxwxcb.cn/news/detail-424852.html
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')
?文章來源地址http://www.zghlxwxcb.cn/news/detail-424852.html
到了這里，關(guān)于vite + vue3 + vue-router4 + ts + element plus + pinia + axios構(gòu)建項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3項目(組件、圖標等按需引入)[保姆級]](https://imgs.yssmx.com/Uploads/2024/01/418790-1.jpeg)
