vite中文文檔：https://cn.vitejs.dev
創建項目（node版本12以上）
npm init @vitejs/app 項目名 （注意：npm init vite-app xxx是vite1.0）
選擇vue
image.png
如果使用typescript，選擇vue-ts
image
創建完成
image
目錄如下：
image
增加別名
修改vite.config.js文件
import { resolve } from "path";
export default defineConfig({
resolve: {
alias: {
"@": resolve(__dirname, "src")
}
}
})
使用：import HelloWorld from "@/components/HelloWorld .vue";
區分開發環境和生產環境（如接口調用時不同url）
默認：執行vite 時是 development 開發模式，vite build時是 production 生產模式
- 在項目根目錄下新建文件：（不同模式下獲取變量對應的不同的值）
.env.development
VITE_APP_TITLE='開發環境'
VITE_APP_BASE_URL='/'
.env.production
VITE_APP_TITLE='生產環境'
VITE_APP_BASE_URL='/api'
自定義環境變量命名規范：必須以VITE_為前綴
- 可以為自定義變量增加TypeScript類型定義，src目錄下env.d.ts文件中增加：
interface ImportMetaEnv {
VITE_APP_TITLE: string,
VITE_APP_BASE_URL: string
}
- 通常還會有測試環境test等其他自定義模式，例如
修改package.json文件中scripts，指定模式：
"scripts": {
"dev": "vite",
"test": "rimraf ./test && vue-tsc --noEmit && vite build --mode test",
"build": "rimraf ./dist && vue-tsc --noEmit && vite build --mode production",
"serve": "vite preview"
}
修改vite.config.js:
export default defineConfig(({ command, mode }) => {
return {
build: {
outDir: mode === "production" ? "dist" : "test"
}
}
})
（npm install rimraf --save-dev，刪除指定文件夾）
按需引入element-plus組件及其樣式
安裝依賴：
npm install element-plus --save
npm install vite-plugin-components vite-plugin-style-import --save-dev
1.修改vite.config.js:
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
import styleImport from 'vite-plugin-style-import';
export default defineConfig(({ command, mode }) => {
return {
plugins: [
vue(),
//按需引入element-plus組件
ViteComponents({
customComponentResolvers: [ElementPlusResolver()],
}),
//按需引入element-plus組件樣式
styleImport({
libs: [{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
return `element-plus/theme-chalk/${name}.css`;
}
}]
})]
}
})
- 直接使用element-plus的組件，無需其他修改
<el-button type="warning" icon="el-icon-close" circle></el-button>
- build時tslint報錯：
Cannot find module 'element-plus/es/popper' or its corresponding type declarations...
解決：忽略node_modules檢查
package.json -> scripts -> build，添加--skipLibCheck
"build": "rimraf ./dist && vue-tsc --noEmit --skipLibCheck && vite build"
或者，tsconfig.json -> compilerOptions -> 添加 skipLibCheck: true
"compilerOptions": {
"skipLibCheck": true
}
使用scss
安裝依賴：
npm install sass --save-dev
- vite.config.js文件里增加css: {...}，可配置公共樣式和全局變量：
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/assets/index.scss";' // 此處為字符串加分號；，多個文件分號分割
}
}
}
})
- index.scss，變量$color，和css類選擇器樣式color
$color: green;
.color {
color: red;
}
- 使用變量和樣式，文字為綠色
<template>
<div>
...
<h4 class="color">2.方法</h4>
...
</div>
</template>
<style lang="scss" scoped>
.color {
color: $color;
}
</style>
路由vue-router
安裝vue-router 4.x版本：
npm install vue-router@next --save
- src目錄下新建文件夾router，router文件夾下新建文件index.ts
import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
const routes: RouteRecordRaw[] = [
{path: "/", redirect: "/home"},
{
path: "/home",
name: "Home",
component: () => import("@/views/index.vue"),
},
{
path: "/logo",
name: "Logo",
component: () => import("@/views/Logo.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
- 修改main.ts
import router from "./router/index"
createApp(App).use(router).mount('#app')
vuex 4.x
安裝依賴：
npm install vuex@next --save
-
src目錄下新建store文件夾，store文件夾下新建modules文件夾和index.ts文件
image.png
舉個栗子：title.ts，寫法和vue2無差別
import {getAxios} from "@/utils/request";
const title = {
namespaced: true,
state: {
titles: []
},
mutations: {
showTitle(state, action){
state.titles = action.payload
}
},
actions: {
showTitle({commit}){
return new Promise((resolve, reject) => {
getAxios('/json/article-list.json').then(resp => {
let action = {
type: 'showTitle',
payload: resp
}
commit(action)
resolve()
}).catch(err => {
console.log(err)
reject()
})
})
}
},
getters: {
getTitle(state){
return state.titles.map((item: {title: string}) => item.title).join(",")
}
}
}
export default title
modules/index.ts
import user from "@/store/modules/user";
import title from "@/store/modules/title";
export default {
user,
title
}
- 創建store
index.ts：
import { createStore } from "vuex";
import modules from "./modules";
const store = createStore({
modules
})
export default store
main.ts:
import {createApp} from 'vue'
import App from './App.vue'
import router from "@/router"
import store from "@/store";
const app = createApp(App)
app.use(router).use(store).mount('#app')
- 使用
import {ref} from 'vue'
import {useStore} from "vuex";
export default {
name: 'demo',
setup() {
const store = useStore();
const title = ref("");
const showTitle = () => {
store.dispatch('title/showTitle').then(() => {
title.value = store.getters["title/getTitle"];
});
}
return {
title,
showTitle
}
}
axios及vite配置代碼解決開發環境跨域問題
安裝依賴：
npm install axios --save
封裝axios get、post請求方法，不同環境不同baseURL：
import axios from "axios";
//顯示、隱藏loading加載中
let httpRequestCount: number = 0;
let loading: any = null;
export const showLoading = () => {
if (httpRequestCount === 0) {
// 顯示loading
}
httpRequestCount++;
}
const hideLoading = () => {
httpRequestCount--;
if (httpRequestCount === 0) {
loading.close();
}
}
//axios攔截器數據處理
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL,
timeout: 15000
});
service.interceptors.request.use(
config => {
showLoading();
config.headers.token = "123";
return config
},
error => {
hideLoading();
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
hideLoading();
const {code, data, msg} = response.data;
if(code === 200) {
return Promise.resolve(data);
}else {
// 提示錯誤信息
return Promise.reject(data);
}
},
error => {
hideLoading();
// 提示錯誤信息
return Promise.reject(error);
}
);
export const getAxios = (url: string, params: object | null = {}, option: object | null = {}) => {
return service({
url,
params,
method: "get",
...option
})
}
export const postAxios = (url: string, params: object | null = {}, option: object | null = {}) => {
return service({
url,
params,
method: "post",
...option
})
}
修改vite.config.js
export default defineConfig(({ command, mode }) => {
return {
server: {
proxy: {
'/api': {
target: 'http://xxx.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
}
})
