Sử dụng Vite để xây dựng giàn giáo nhanh chóng

Tùy chọn dòng lệnh chỉ định trực tiếp tên dự án và mẫu bạn muốn sử dụng, dự án Vite + Vue, chạy (khuyên dùng sợi)

# npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, cần có thêm dấu gạch ngang kép: npm init vite@latest my-vue-app -- --template vue # sợi sợi tạo vite my-vue-app --template vue # pnpm pnpm tạo vite my-vue-app -- --template vue

Ở đây, chúng tôi muốn trực tiếp tạo mẫu dự án Vue3+Vite2+ts, vì vậy lệnh chúng tôi thực hiện là: sợi tạo vite my-vue-app --template vue-ts, vì vậy chúng tôi không cần bạn cài đặt và định cấu hình riêng biệt ts.

cd vào thư mục dự án, cài đặt các phụ thuộc của node_modules và chạy dự án

# cd vào thư mục dự án my-vue-app cd my-vue-app # Cài đặt sợi phụ thuộc # Chạy nhà phát triển sợi dự án

Tại thời điểm này, dự án vue3.0+vite2+typescript thuần túy nhất đã hoàn thành. Nhập http://localhost:3000/ vào thanh địa chỉ trình duyệt và bạn sẽ thấy trang khởi động sau, sau đó bạn có thể cài đặt các plugin cần thiết.

Bí danh tham chiếu đường dẫn tệp cấu hình

Sửa đổi cấu hình reslove trong vite.config.ts

nhập {defineConfig } từ 'vite' nhập vue từ '@vitejs/plugin-vue' đường dẫn nhập từ 'path' // https://vitejs.dev/config/ xuất default definConfig({ plugin: [vue()], giải quyết: { bí danh: { '@': path.resolve(__dirname, 'src'), }, }, })

Sửa đổi cấu hình của tệp tsconfig.json

{ "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "baseUrl": ".", "paths": { "@/*":["src/*"] } }, "include": [ "src/**/*.ts", "src/**/*.d .ts", "src/**/*.tsx", "src/**/*.vue" ] }

Định cấu hình định tuyến

Cài đặt

# npm npm cài đặt vue-router@4 # sợi sợi thêm vue-router@4

Tạo thư mục bộ định tuyến mới trong src để quản lý định tuyến tập trung và tạo tệp index.ts mới trong thư mục bộ định tuyến.

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' const Routes: RouteRecordRaw[] = [ { path: '/', name: 'Login', // Lưu ý hậu tố vue ở đây: () => import('@/pages/login/Login.vue'), meta: { title: 'Login', }, }, ] const router = createRouter({ history: createWebHistory(), Routes, strict: true, // Vị trí cuộn mong muốn ScrollBehavior(to, from, savePosition) { return new Promise(resolve => { if (savedPosition) { return savePosition; } else { if (from. meta. saveSrollTop) { const top: number = document.documentElement.scrollTop || document.body.scrollTop giải quyết ({ left: 0, top }); } } }); } }) hàm xuất setupRouter(app: App) { app.use(router);

Sửa đổi tệp nhập mian.ts

nhập { createApp } từ "vue"; nhập Ứng dụng từ "./App.vue"; bộ định tuyến nhập, { setupRouter } từ './router'; const app = createApp(App); ; // Mount phiên bản APP sau khi tuyến đường đã sẵn sàng chờ router.isReady();

Cấu hình định tuyến khác có thể được chuyển sang vue-router (https://next.router.vuejs.org/zh/introduction.html). vue-router4.x hỗ trợ TypeScript và loại định tuyến là RouteRecordRaw. Trường meta cho phép chúng tôi mở rộng giao diện RouteMeta để nhập vào tính đa dạng của nó theo các nhu cầu kinh doanh khác nhau. Các cấu hình trong meta sau chỉ mang tính chất tham khảo:

// đánh máy.d.ts hoặc router.ts nhập 'vue-router' khai báo mô-đun 'vue-router' { giao diện RouteMeta { // Tiêu đề trang, thường là bắt buộc. title: string; // Biểu tượng biểu tượng menu?: string; // Định cấu hình quyền của menu: string[]; // Có bật bộ nhớ đệm trang keepAlive không?: // Chúng tôi không muốn hiển thị ẩn trong menu cho các trang phụ? : boolean; // Thứ tự sắp xếp menu?: số; // Các liên kết bên ngoài lồng nhau frameUrl?: string;

Định cấu hình scss tiền xử lý css

Cài đặt

sợi thêm sass-loader --dev sợi thêm phi tiêu-sass --dev sợi thêm sass --dev

Định cấu hình tệp kiểu scss chung. Thêm thư mục kiểu trong thư mục src để lưu trữ tệp kiểu chung. Tạo tệp biến.scss mới để quản lý thống nhất các biến màu được khai báo:

$trắng: #FFFFFF; $màu chính: #1890ff; $màu thành công: #67C23A; $màu cảnh báo: #E6A23C; $màu nguy hiểm: #F56C6C;

Khi được sử dụng trong các thành phần, hãy đưa tệp kiểu này vào dự án trên toàn cầu trong vite.config.ts và nó có thể được sử dụng trên toàn cầu. Không cần phải giới thiệu lại tệp này hoặc các biến màu trong bất kỳ thành phần nào.

css: { preprocessorOptions: { scss: { ModifyVars: {}, javascriptEnabled: true, // Lưu ý phần giới thiệu ở đây extraData: '@import "@/style/varibles.scss";'

Được sử dụng trong các thành phần

.div { color: $primary-color;

Đóng gói yêu cầu thống nhất

Trong thư mục src, tạo một thư mục http mới và thêm index.ts, config.ts, core.ts, type.d.ts, utils.ts trong thư mục http.

lõi.ts

nhập Axios, { AxiosRequestConfig, CancelTokenStatic, AxiosInstance } từ "axios"; nhập NProgress từ 'nprogress' nhập { genConfig } từ "./config"; nhập { TransformConfigByMethod } từ "./utils"; , HttpResponse, HttpError } từ "./types.d"; class Http { constructor() { this.httpInterceptorsRequest(); this.httpInterceptorsResponse() } // Khởi tạo đối tượng cấu hình initConfig tĩnh riêng tư: HttpRequestConfig = {}; Đối tượng Axios Instance hiện tại axiosInstance tĩnh riêng tư: AxiosInstance = Axios.create(genConfig()); // Lưu phiên bản http riêng tư tĩnh HttpInstance: Http; // đối tượng hủy axios riêng tư CancelToken: CancelTokenStatic = Axios.CancelToken; // Đã hủy mảng chứng từ riêng sourceTokenList: Array = [] ; // Ghi lại khóa của cancelToken riêng tư currentCancelTokenKey = ""; public get cancelTokenList(): Array { return this.sourceTokenList; } // eslint-disable-next-line class-methods-use-this public set cancelTokenList(value) { Throw new Error("cancelTokenList không được phép giá trị" } /** * @description Các chức năng tạo riêng không được phép khởi động tạo* @returns void 0 */ // constructor() {} /** * @description Tạo khóa hủy duy nhất * @param config cấu hình axios * @returns string */ // eslint-disable-next-line class- phương thức-sử dụng-this Private static genUniqueKey(config: HttpRequestConfig): string { return `${config.url }--${JSON.stringify(config.data)}`; } /** * @description Hủy các yêu cầu lặp lại* @returns void 0 */ riêng tư cancelRepeatRequest(): void { const temp: { [key: string]: boolean } = {}; this.sourceTokenList = this.sourceTokenList.reduce<>>((res: Mảng, cancelToken: cancelTokenType) => { const { cancelKey, cancelExecutor } = cancelToken; if (!temp[cancelKey]) { temp[cancelKey] = true; res.push(cancelToken); }, [] ); } /** * @description Xóa CancelToken đã chỉ định * @returns void 0 */ riêng tư deleteCancelTokenByCancelKey(cancelKey: string): void { this.sourceTokenList = this.sourceTokenList.length < 1? this.sourceTokenList.filter( cancelToken => cancelToken.cancelKey !== cancelKey ) : [ ] } /** * @description Yêu cầu chặn*; @returns void 0 */ riêng httpInterceptorsRequest(): void { Http.axiosInstance.interceptors. request.use( (config: HttpRequestConfig) => { const $config = config; NProgress.start(); // Mỗi lần chuyển trang, tiến trình thanh được gọi là const cancelKey = Http.genUniqueKey($config); $config.cancelToken = new this.CancelToken( (cancelExecutor: (cancel: Any) => void) => { this.sourceTokenList.push ({ cancelKey, cancelExecutor } } ); this.cancelRepeatRequest(); xác định xem bài đăng/nhận và các phương thức khác có thể được truyền vào và gọi lại hay không, nếu không thì thực hiện cài đặt khởi động tạo và gọi lại if (typeof config. beforeRequestCallback === "function") { config.b BeforeRequestCallback($config); } if (Http .initConfig.b BeforeRequestCallback) { Http.initConfig.b BeforeRequestCallback($config); $config } trả về $config }, lỗi => { trả về Promise.từ chối (lỗi); ); } /** * @description Xóa cancelTokenList hiện tại * @returns void 0 */ public clearCancelTokenList(): void { this.sourceTokenList.length = 0; /** * @description Chặn phản hồi hồi * @returns void 0 */ httpInterceptorsResponse riêng tư(): void { const instance = Http.axiosInstance; instance.interceptors.response.use( (response: HttpResoponse) => { const $config = reply.config; // Xóa hiện tại canceltoken mỗi khi yêu cầu thành công const cancelKey = Http.genUniqueKey($config); this. truyền vào và gọi lại hay không, nếu không thì thực hiện cài đặt khởi động và gọi lại if (typeof $config. beforeResponseCallback === "function") { $config.BeforeResponseCallback(response); } if (Http.initConfig.b BeforeResponseCallback) { Http.initConfig.b BeforeResponseCallback(response); return reply.data } return reply.data }, (error: HttpError) => { const $error = error // Xác định xem mảng thông báo mã hóa hủy tồn tại trong yêu cầu hiện tại hay không và nếu nó tồn tại, vui lòng xóa nó (đơn) Quá trình yêu cầu) nếu (this.currentCancelTokenKey) { const haskey = this.sourceTokenList.filter( cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey ).length; (haskey) { this.sourceTokenList = this.sourceTokenList.filter( cancelToken => cancelToken. cancelKey !== this.currentCancelTokenKey ); this.currentCancelTokenKey = "" } } $error.isCancelRequest = Axios.isCancel($error);done(); // Tất cả các phản hồi ngoại lệ được phân tách với yêu cầu trả lời/không yêu cầu hủy bỏ Promise.reject($error); } yêu cầu khai báo( phương thức:RequestMethods, url: string, param?: AxiosRequestConfig, axiosConfig?: HttpRequestConfig ): Promise { const config = TransformConfigByMethod(param, {phương thức, url, ...axiosConfig } như HttpRequestConfig); // về new Promise((resolve, chối) => { Http.axiosInstance .request(config) .then((response: known) => { Resolve(response); }) .catch((lỗi: bất kỳ) => {từ chối(lỗi); }); } bài đăng khai báo( url: string, params?: T, config?: HttpRequestConfig ): Lời hứa { trả lại cái này.request("bài đăng", url, thông số, config } được công khai( url: string,); thông số?: T, config?: HttpRequestConfig ): Lời hứa { trả lại cái này.request("get", url, params, config); } } xuất http mặc định; trướcResponseCallback(response); return reply.data } return reply.data }, (error: HttpError) => { const $error = error; // Xác định thông báo mã hóa định nghĩa abit tồn tại trong yêu cầu hiện tại bằng không và nếu có thì Xóa (quy trình yêu cầu duy nhất) if (this.currentCancelTokenKey) { const haskey = this.sourceTokenList.filter( cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey ).length; if (haskey) { this.sourceTokenList = this.sourceTokenList.filter( cancelToken => cancelToken.cancelKey !== this.currentCancelTokenKey ); "; Axios.isCancel($error); Nguồn gốc của yêu cầu công khai(phương thức: requestMethods, url: string, param?: AxiosRequestConfig, axiosConfig?: HttpRequestConfig): Promise { const config = TransformConfigByMethod(param, { Method, url, ...axiosConfig } as HttpRequestConfig); Http.axiosInstance .request(config) .then((response: known) => { Resolve( phản hồi); }) .catch((lỗi: bất kỳ) => { từ chối(lỗi); }); ; } post khai( url: string, params?: T, config?: HttpRequestConfig ): Lời hứa { trả lại cái này.request("bài đăng", url, thông số, config } được công khai( url: string, params?: T, config?: HttpRequestConfig ): Lời hứa { trả lại cái này.request("get", url, params, config); } } xuất http mặc định; trướcResponseCallback(response); return reply.data } return reply.data }, (error: HttpError) => { const $error = error; // Xác định thông báo mã hóa định nghĩa abit tồn tại trong yêu cầu hiện tại bằng không và nếu có thì Xóa (quy trình yêu cầu duy nhất) if (this.currentCancelTokenKey) { const haskey = this.sourceTokenList.filter( cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey ).length; if (haskey) { this.sourceTokenList = this.sourceTokenList.filter( cancelToken => cancelToken.cancelKey !== this.currentCancelTokenKey ); "; Axios.isCancel($error); Nguồn gốc của yêu cầu công khai(phương thức:RequestMethods, url: string, param?: AxiosRequestConfig, axiosConfig?: HttpRequestConfig): Promise { const config = TransformConfigByMethod(param, { Method, url, ...axiosConfig } as HttpRequestConfig); Http.axiosInstance .request(config) .then((response: known) => { Resolve( phản hồi); }) .catch((lỗi: bất kỳ) => { từ chối(lỗi); }); ; } post khai( url: string, params?: T, config?: HttpRequestConfig ): Lời hứa { trả lại cái này.request("bài đăng", url, thông số, config } được công khai( url: string, params?: T, config?: HttpRequestConfig ): Lời hứa { trả lại cái này.request("get", url, params, config); } } xuất http mặc định;

config.ts

nhập { AxiosRequestConfig } từ "axios"; nhập { loại trừProps } từ "./utils"; /** *Cấu hình mặc định*/ xuất const defaultConfig: AxiosRequestConfig = { baseURL: "", // hết thời gian chờ 10 giây: 10000, tiêu đề : { Chấp nhận: "application/json, text/plain, */*", "Content-Type": "application/json", "X- Đã yêu cầu-Với": "XMLHttpRequest" } }; hàm xuất genConfig(config?: AxiosRequestConfig): AxiosRequestConfig { if (!config) { return defaultConfig } const { headers } = config; (tiêu đề && typeof tiêu đề === "object") { defaultConfig.headers = { ... defaultConfig.headers, ...headers }; ...excludeProps(config!, "headers"), ...defaultConfig }; } xuất const PHƯƠNG PHÁP = ["post", "get", "xóa", "option", "vá"] ;

utils.ts

enter { HttpRequestConfig } from "./types.d"; xuất loại hàm trừProps( Origin: T, prop: string ): { [key: string]: T } { return Object.keys(origin) .filter(key => !prop.includes(key)) .reduce((res, key) = > { res[key] = Origin[key]; return res }, {} as { [key: string]: T }); TransformConfigByMethod(params: Any, config: HttpRequestConfig ): HttpRequestConfig { const { Method } = config const props = ["delete", "get", "head", "options"].includes( Method!.toLocaleLowerCase() ) ? "params" : "data"; return { ...config, [props]: params };

loại.d.ts

nhập Axios, { AxiosRequestConfig, Canceler, AxiosResponse, Method, AxiosError } từ "axios"; nhập { METHODS } từ "./config"; loại xuất cancelTokenType = { cancelKey: string; thức, "lấy" | "đăng" | "option" | "head" >; giao diện mở rộng HttpRequestConfig AxiosRequestConfig { // Trước khi được yêu cầu gửi beforeRequestCallback?: (request: HttpRequestConfig) => void; // Trước khi thực hiện trả về tương ứng beforeResponseCallback?: (response: HttpResoponse ) => void } giao diện xuất HttpResoponse open; AxiosResponse { config: HttpRequestConfig; } giao diện xuất HttpError mở rộng AxiosError { isCancelRequest?: boolean } xuất lớp mặc định Http { cancelTokenList: Array; clearCancelTokenList(): yêu cầu vô hiệu( phương thức:RequestMethods, url: string, param? : AxiosRequestConfig, axiosConfig?: HttpRequestConfig ): Promise; bưu kiện( url: string, params?: T, config?: HttpRequestConfig ): Lời hứa;lấy( url: string, params?: T, config?: HttpRequestConfig ): Lời hứa }

chỉ mục.ts

nhập http từ "./core"; xuất const http = http mới();

Quản lý apisystem tối đa

Thêm api thư mục bên dưới src để quản lý thống nhất các giao diện trong dự án và phân tích chúng theo các mô-đun.

Ví dụ: thêm user.ts và type.ts trong api tệp, được sử dụng để lưu trữ giao diện yêu cầu và loại thông tin đăng nhập, đăng ký và các mô-đun khác tương ứng.

// login.ts nhập { http } từ "@/http/index"; nhập { ILoginReq, ILoginRes } từ "./types"; res:any = chờ http.post('/login/info', req) trả về res dưới dạng ILoginRes } # hoặc xuất const getLogin1 = async(req: ILoginParams): Promise => { const res:any = chờ http.request('post', '/login/info', req) trả về res dưới dạng ILoginRes }

// type.ts xuất giao diện ILoginReq { userName: string; mật khẩu: string; } xuất giao diện ILoginRes { access_token: string; phạm vi: chuỗi token_type: chuỗi hết hạn_in: chuỗi }

Ngoài việc tự đóng gói các axios theo cách thủ công, ở đây chúng tôi cũng đề xuất một thư viện yêu cầu vue3 rất mạnh: VueRequest, có các chức năng rất phong phú (tôi bí mật nói với bạn rằng tôi cũng đang sử dụng nó). Địa chỉ trang web chính thức: https://www.attojs.com/.

Quản lý trạng thái Pinia

Pinia là một thư viện quản lý trạng thái nhẹ dành cho Vue.js đã trở nên rất phổ biến gần đây. Nó sử dụng hệ thống phản ứng mới trong Vue 3 để xây dựng thư viện quản lý trạng thái trực quan và được gõ đầy đủ.

Vì vuex 4 không thân thiện với việc hỗ trợ Typescript nên ban quản lý nhà nước đã từ bỏ vuex và nhận nuôi pinia. Tác giả của pinia là thành viên của nhóm cốt lõi Vue, và pinia đã chính thức gia nhập Vue và trở thành thành viên của Vue. Youdao pinia có thể thay thế vuex nên các bạn cứ yên tâm sử dụng (các dự án của công ty cũng đang sử dụng).

Địa chỉ trang web chính thức của Pinia (https://pinia.vuejs.org).

Một số ưu điểm của Pinia:

(1) Thiết kế API của Pinia rất gần với đề xuất của Vuex 5.

(2) Không cần tùy chỉnh các kiểu phức tạp như Vuex 4 để hỗ trợ Typescript, nó vốn đã được trang bị khả năng suy luận kiểu hoàn hảo.

(3) Thiết kế mô-đun, mỗi cửa hàng bạn giới thiệu có thể tự động phân chia khi đóng gói.

(4) Không có cấu trúc lồng nhau, nhưng bạn có thể sử dụng nó để kết hợp chéo giữa bất kỳ cửa hàng nào.

(5) Pinia được liên kết với devtools Vue và sẽ không ảnh hưởng đến trải nghiệm phát triển Vue 3.

Thành công của Pinia có thể nhờ vào các tính năng độc đáo của nó để quản lý dữ liệu được lưu trữ (khả năng mở rộng, tổ chức mô-đun lưu trữ, nhóm các thay đổi trạng thái, tạo nhiều bộ lưu trữ, v.v.).

Mặt khác, Vuex cũng là một thư viện quản lý state phổ biến được xây dựng cho Vue framework và cũng là thư viện quản lý state được team core Vue đề xuất. Vuex tập trung mạnh vào khả năng mở rộng ứng dụng, công thái học của nhà phát triển và sự tự tin. Nó dựa trên kiến trúc lưu lượng tương tự như Redux.

Cả Pinia và Vuex đều rất nhanh và trong một số trường hợp, ứng dụng web sử dụng Pinia sẽ nhanh hơn sử dụng Vuex. Sự cải thiện hiệu suất này có thể là do kích thước cực kỳ nhẹ của Pinia, khoảng 1KB.

Cài đặt

# Cài đặt sợi thêm pinia@next

Tạo một thư mục cửa hàng mới trong src và tạo các thư mục index.ts, Mutation-types (quản lý tập trung các biến), type.ts (loại) và các thư mục mô-đun (trạng thái quản lý mô-đun) trong thư mục cửa hàng.

// index.ts loại nhập { Ứng dụng } từ "vue"; nhập { createPinia } từ "pinia"; const store = createPinia(); hàm xuất setupStore(app: App) { app.use(store) } xuất khẩu { cửa hàng }

// module/user.ts nhập {defineStore } từ 'pinia'; nhập { store } từ '@/store'; nhập { ACCESS_TOKEN } từ '@/store/mutation-types'; store/types' import const useUserStore = defineStore({ // Id ở đây rất quan trọng id: 'app-user', state: (): IUserState => ({ token: localStorge.getItem(ACCESS_TOKEN) }), getters: { getToken(): string { return this.token; } }, actions: { setToken(token: string) { this.token = token }, // Đăng nhập đăng nhập không đồng bộ; ( userInfo) { thử { const phản hồi = đang chờ đăng nhập (userInfo); const { kết quả, mã } = phản hồi if (code ===; ResultEnum.SUCCESS) { localStorage.setItem(ACCESS_TOKEN, result.token); this.setToken(result.token); } return Promise.resolve(response); } Catch (e) { return Promise.reject(e); , } }) // Cần được sử dụng bên ngoài chức năng xuất thiết lập useUserStoreHook() { return useUserStore(store); }

/// Mutation-types.ts // Quản lý thống nhất các biến xuất const ACCESS_TOKEN = 'ACCESS-TOKEN' // Mã thông báo người dùng

Sửa đổi main.ts

nhập { createApp } từ 'vue' nhập Ứng dụng từ './App.vue' nhập { setupStore } từ '@/store' nhập bộ định tuyến từ './router/index' const app = createApp(App) // Quản lý trạng thái gắn kết setupStore(app); app.use(router) app.mount('#app')

Được sử dụng trong các thành phần

Giới thiệu cách sử dụng getters

// module/user.ts nhập {defineStore } từ 'pinia'; nhập { store } từ '@/store'; nhập { ACCESS_TOKEN } từ '@/store/mutation-types'; store/types' import const useUserStore = defineStore({ // Id ở đây rất quan trọng id: 'app-user', state: (): IUserState => ({ token: localStorge.getItem(ACCESS_TOKEN), tên: '' }), getters: { getToken(): string { return this.token; }, nameLength: (state) => state.name.length, }, actions: { setToken( token: string) { this.token = token }, // Đăng nhập đăng nhập không đồng bộ(userInfo) { // Gọi giao diện và xử lý logic} } }) // Cần được sử dụng bên ngoài chức năng xuất thiết lập useUserStoreHook() { return useUserStore(store);

hành động

Điều này rất khác với Vuex. Pinia chỉ cung cấp cách xác định các quy tắc về cách thay đổi trạng thái. Nó loại bỏ các đột biến và chỉ dựa vào Hành động.

Pinia làm cho Hành động trở nên linh hoạt hơn.

• Có thể được gọi thông qua các thành phần hoặc các hành động khác.

• Có thể được gọi từ các hành động trong các cửa hàng khác.

• Được gọi trực tiếp trên phiên bản cửa hàng.

• Hỗ trợ đồng bộ hoặc không đồng bộ.

• Có bất kỳ số lượng tham số.

• Có thể chứa logic về cách thay đổi trạng thái (tức là vai trò của đột biến vuex).

• Thuộc tính trạng thái có thể được thay đổi trực tiếp bằng phương thức $patch.

  Để biết cách sử dụng chi tiết hơn, vui lòng tham khảo trang web hành động chính thức trong Pinia:

  Cách sử dụng các hành động (https://pinia.vuejs.org/core-concepts/actions.html).

Cấu hình biến môi trường

vite cung cấp hai chế độ: chế độ phát triển với máy chủ phát triển và chế độ sản xuất. Trong thư mục gốc của dự án, chúng tôi tạo tệp cấu hình phát triển mới .env.development và tệp cấu hình sản xuất .env.production.

# Thư mục gốc của trang web VITE_APP_BASE_URL= ''

Được sử dụng trong các thành phần:

console.log(import.meta.env.VITE_APP_BASE_URL)

Định cấu hình pack.json để phân biệt giữa môi trường phát triển và môi trường sản xuất.

"build:dev": "vue-tsc --noEmit && vite build --mode Development", "build:pro": "vue-tsc --noEmit && vite build --mode production",

Sử dụng thư viện thành phần

Chỉ cần chọn thư viện thành phần phù hợp theo nhu cầu dự án của bạn. Dưới đây là hai thư viện thành phần tuyệt vời mà Element-plus và Naive UI khuyên dùng. Dưới đây là phần giới thiệu ngắn gọn về cách sử dụng chúng.

Sử dụng phần tử cộng (https://element-plus.gitee.io/zh-CN/)

sợi thêm phần tử-cộng

Các cách giới thiệu theo yêu cầu được đề xuất:

Để giới thiệu theo yêu cầu, bạn cần cài đặt 2 plug-in làplugin-vue-comComponents vàplugin-auto-import.

sợi thêm -D rút phích cắm-vue-thành phần rút phích cắm-tự động nhập

Sau đó viết cấu hình vào vite.config.ts và bạn có thể sử dụng thành phần element plus trong dự án mà không cần giới thiệu lại.

// vite.config.ts nhập AutoImport từ 'unplugin-auto-import/vite' nhập Thành phần từ 'unplugin-vue-comComponents/vite' nhập { ElementPlusResolver } từ 'unplugin-vue-comComponents/resolvers' xuất mặc định { plugin: [ // ... AutoImport({ Resolvers: [ElementPlusResolver()], }), Components({ Resolvers: [ElementPlusResolver()], }), ], }

Giao diện người dùng ngây thơ（https://www.naiveui.com/zh-CN/os-theme）

#Cài đặt phông chữ npm i -D ngây thơ #Cài đặt phông chữ npm i -D vfonts

Cài đặt các thành phần trên toàn cầu theo yêu cầu.

nhập { createApp } từ 'vue' nhập { // tạo ui tạo ngây thơ, // thành phần NButton } từ 'naive-ui' const ngây thơ = create({ thành phần: [NButton] }) const app = createApp() app.use (ngây thơ)

Sau khi cài đặt, bạn có thể sử dụng các thành phần đã cài đặt của mình trong SFC như thế này.

Cấu hình cơ bản chung của Vite

Cấu hình cơ bản

Chạy cấu hình đại lý và gói.

máy chủ: { máy chủ: '0.0.0.0', cổng: 3000, mở: đúng, https: sai, proxy: {} },

Xóa cửa sổ giao diện điều khiển khỏi môi trường sản xuất.

build:{ ... terserOptions: { nén: { drop_console: true, drop_window: true } } }

Môi trường sản xuất tạo ra các tệp .gz. Bật gzip có thể nén rất nhiều tài nguyên tĩnh, điều này đóng một vai trò quan trọng trong tốc độ tải trang. Sử dụng vite-plugin-compression để nén tài nguyên bằng gzip hoặc brotli. Bước này yêu cầu sự hợp tác của máy chủ Vite chỉ có thể đóng gói các tệp .gz cho bạn. Plug-in này rất dễ sử dụng, bạn thậm chí không cần cấu hình các tham số mà chỉ cần nhập nó.

# Cài đặt sợi thêm --dev vite-plugin-nén

// Thêm import viteCompression from 'vite-plugin-compression' trong vite.config.ts // Gzip nén môi trường sản xuất để tạo các tệp .gz viteCompression({ chi tiết: true, vô hiệu hóa: false, ngưỡng: 10240, thuật toán: 'gzip ', máy lẻ: '.gz', }),

Cấu hình tệp vite.config.ts cuối cùng như sau (bạn có thể định cấu hình nó theo nhu cầu dự án của mình).

nhập {defineConfig } từ 'vite' nhập vue từ '@vitejs/plugin-vue' đường dẫn nhập từ 'path' //@ts-ignore nhập viteCompression từ 'vite-plugin-compression' // https://vitejs.dev /config/ import default defaultConfig({ base: './', // Đường dẫn đóng gói plugin: [ vue(), // gzip nén môi trường sản xuất để tạo ra các tệp .gz viteCompression({ chi tiết: true, vô hiệu hóa: sai, ngưỡng: 10240, thuật toán: 'gzip', ext: '.gz', }), ], // Định cấu hình bí danh giải quyết: { alias: { '@': path.resolve(__dirname, 'src'), }, }, css:{ preprocessorOptions:{ scss:{extraData:'@import "@/assets/style/mian.scss";' } } }, //Khởi động máy chủ cấu hình dịch vụ: { hosting: '0.0.0.0', port: 8000, open: true, https: false, proxy: {} } , // Cấu hình đóng gói môi trường sản xuất // Xóa bản dựng cửa sổ bảng điều khiển: { terserOptions: { nén: { drop_console: true, drop_window: true, }, }, }, })

Bài cuối cùng nói về Vue3.0+typescript+Vite+Pinia+Element-plus để xây dựng vue3 framework! Bài viết kết thúc tại đây, nếu bạn muốn biết thêm về Vue3.0+typescript+Vite+Pinia+Element-plus để xây dựng vue3 framework! Về nội dung, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .