vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟

更新時(shí)間：2024年07月22日 09:03:36 作者：多喝熱水，重啟試試

本文主要介紹了vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

vite+vue3項(xiàng)目初始化搭建

"nodejs": v18.19.0
"pnpm": 8.15.0
"vue": v3.4.21
"vite": v5.2.0

1.創(chuàng)建項(xiàng)目

Vite中文官網(wǎng)

pnpm create vite@latest

項(xiàng)目名字：gd_web
選擇框架：Vue3
選擇語(yǔ)言：JavaScript
進(jìn)入項(xiàng)目：cd gd_web
安裝依賴: pnpm i
啟動(dòng)項(xiàng)目：pnpm run dev

2.配置.editorconfig

# https://editorconfig.org
# 根目錄配置，表示當(dāng)前目錄是編輯器配置的根目錄
root = true

[*] # 對(duì)所有文件應(yīng)用以下配置
charset = utf-8 # 使用 UTF-8 編碼
indent_style = space # 使用空格進(jìn)行縮進(jìn)
indent_size = 4 # 每個(gè)縮進(jìn)級(jí)別使用 4 個(gè)空格
end_of_line = lf # 使用 LF（Linux 和 macOS 的換行符）
insert_final_newline = true # 在文件末尾插入一行空白
trim_trailing_whitespace = true # 自動(dòng)刪除行末尾的空白字符

[*.md] # 對(duì)擴(kuò)展名為 .md 的 Markdown 文件應(yīng)用以下配置
insert_final_newline = false # 不在文件末尾插入一行空白
trim_trailing_whitespace = false # 不自動(dòng)刪除行末尾的空白字符

3.別名配置

在開(kāi)發(fā)項(xiàng)目的時(shí)候文件與文件關(guān)系可能很復(fù)雜，因此我們需要給src文件夾配置一個(gè)別名！??！

在vite.config.js文件中：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // 配置別名
        alias: {
            "@": path.resolve("./src") // 相對(duì)路徑別名配置，使用 @ 代替 src
        },
        //extensions數(shù)組的意思是在import組件的時(shí)候自動(dòng)補(bǔ)全.vue等文件后綴
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

如果不能識(shí)別path模塊

pnpm install @types/node --save-dev

配置完成后，我們發(fā)現(xiàn)我們 '@'之后沒(méi)有提示，這個(gè)時(shí)候我們?cè)诟夸泟?chuàng)建jsconfig.json文件

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

4.環(huán)境變量的配置

項(xiàng)目開(kāi)發(fā)過(guò)程中，至少會(huì)經(jīng)歷開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境(即正式環(huán)境)三個(gè)階段。不同階段請(qǐng)求的狀態(tài)(如接口地址等)不盡相同，若手動(dòng)切換接口地址是相當(dāng)繁瑣且易出錯(cuò)的。于是環(huán)境變量配置的需求就應(yīng)運(yùn)而生，我們只需做簡(jiǎn)單的配置，把環(huán)境狀態(tài)切換的工作交給代碼。

開(kāi)發(fā)環(huán)境（development）
顧名思義，開(kāi)發(fā)使用的環(huán)境，每位開(kāi)發(fā)人員在自己的dev分支上干活，開(kāi)發(fā)到一定程度，同事會(huì)合并代碼，進(jìn)行聯(lián)調(diào)。

測(cè)試環(huán)境（testing）
測(cè)試同事干活的環(huán)境啦，一般會(huì)由測(cè)試同事自己來(lái)部署，然后在此環(huán)境進(jìn)行測(cè)試

生產(chǎn)環(huán)境（production）
生產(chǎn)環(huán)境是指正式提供對(duì)外服務(wù)的，一般會(huì)關(guān)掉錯(cuò)誤報(bào)告，打開(kāi)錯(cuò)誤日志。(正式提供給客戶使用的環(huán)境。)

注意:一般情況下，一個(gè)環(huán)境對(duì)應(yīng)一臺(tái)服務(wù)器,也有的公司開(kāi)發(fā)與測(cè)試環(huán)境是一臺(tái)服務(wù)器?。?！

項(xiàng)目根目錄分別添加開(kāi)發(fā)、生產(chǎn)和測(cè)試環(huán)境的文件!

.env.development
.env.production
.env.test

文件內(nèi)容：

# 變量必須以 VITE_ 為前綴才能暴露給外部讀取
NODE_ENV = 'development'
VITE_APP_TITLE = '項(xiàng)目名字'
VITE_APP_BASE_API = '/dev-api'
VITE_SERVE = 'http://127.0.0.1:8990'

# 變量必須以 VITE_ 為前綴才能暴露給外部讀取
NODE_ENV = 'production'
VITE_APP_TITLE = '項(xiàng)目名字'
VITE_APP_BASE_API = '/prod-api'
VITE_SERVE = 'http://127.0.0.1:8990'

# 變量必須以 VITE_ 為前綴才能暴露給外部讀取
NODE_ENV = 'test'
VITE_APP_TITLE = '項(xiàng)目名字'
VITE_APP_BASE_API = '/test-api'
VITE_SERVE = 'http://127.0.0.1:8990'

配置運(yùn)行命令：package.json

 "scripts": {
    "dev": "pnpm vite --open",
    "build:test": "pnpm vite build --mode test",
    "build:pro": "pnpm vite build --mode production",
    "preview": "vite preview"
  },

通過(guò)import.meta.env獲取環(huán)境變量

5.安裝css預(yù)處理器sass

pnpm install -D sass sass-loader

組件中使用：

<style scoped lang="scss"></style>

全局樣式定義：
在src/styles目錄下創(chuàng)建一個(gè)index.scss文件；
當(dāng)然項(xiàng)目中需要用到清除默認(rèn)樣式，可以在index.scss引入reset.scss

reset.scss

// index.scss文件中引入
@import "reset.scss";

在入口文件中引入全局樣式：

import '@/styles/index.scss'

在src/styles/index.scss全局樣式文件中沒(méi)有辦法使用變量 . 因此需要給項(xiàng)目中引入全局變量變量.因此需要給項(xiàng)目中引入全局變量變量.因此需要給項(xiàng)目中引入全局變量.

在style/variable.scss創(chuàng)建一個(gè)variable.scss文件！

在vite.config.js文件配置如下:

export default defineConfig((config) => {
	//配置scss全局變量
    css: {
        preprocessorOptions: {
            scss: {
                javascriptEnabled: true,
                additionalData: '@import "./src/styles/variable.scss";'
            }
        }
    }
}

6.集成Element-plus

Element-plus官網(wǎng)

安裝：

pnpm install element-plus --save

配置自動(dòng)導(dǎo)入：需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件

pnpm install -D unplugin-vue-components unplugin-auto-import

在vite配置文件中添加：

// vite.config.ts
import {defineConfig} from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
    // ...
    plugins: [
        // ...
        AutoImport({
            resolvers: [ElementPlusResolver()],
            // 自動(dòng)導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
            imports: ['vue'],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        // ...
    ],
})

配置Element-plus 組件內(nèi)容中文顯示：
main.js文件中添加

// 引入element-plus樣式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale})

Element-plus icon圖標(biāo)全局使用

pnpm install @element-plus/icons-vue

注冊(cè)所有圖標(biāo)，在component/index.js文件中
從 @element-plus/icons-vue 中導(dǎo)入所有圖標(biāo)并進(jìn)行全局注冊(cè)

// 引入element-plus提供的所有圖標(biāo)
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 對(duì)外暴露插件對(duì)象
export default {
    // 必須叫做install方法，會(huì)有一個(gè)APP對(duì)象傳參；
    // 在入口文件引入使用，會(huì)自動(dòng)執(zhí)行該方法
    install(app) {
        // 將element-plus提供的圖標(biāo)注冊(cè)為全局組件
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
    },
}

在入口文件引入src/index.js文件,通過(guò)app.use方法安裝自定義插件

// 注冊(cè)全局組件
import gloablComponent from '@/components/index.js'
app.use(gloablComponent)

使用：詳細(xì)見(jiàn)官網(wǎng)

<!-- 使用 el-icon 為 SVG 圖標(biāo)提供屬性 -->
<template>
    <div>
        <el-icon :size="size" :color="color">
            <Edit/>
        </el-icon>
        <!-- 或者獨(dú)立使用它，不從父級(jí)獲取屬性 -->
        <Edit/>
    </div>
</template>

7.SVG圖標(biāo)配置

安裝SVG依賴插件

pnpm install vite-plugin-svg-icons -D

在vite.config.js中配置插件

plugins: [
    // ...
    // 配置自定義SVG 圖標(biāo)
    createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
    }),
    // ...
]

入口文件(main.js)導(dǎo)入

// 注冊(cè)SVG圖標(biāo)
import 'virtual:svg-icons-register'

將svg封裝為全局組件

因?yàn)轫?xiàng)目很多模塊需要使用圖標(biāo),因此把它封裝為全局組件！！！

在src/components目錄下創(chuàng)建一個(gè)SvgIcon組件:代表如下

<template>
    <div>
        <svg :style="{ width: width, height: height }">
            <use :xlink:href="prefix + name" rel="external nofollow"  :fill="color"></use>
        </svg>
    </div>
</template>

<script setup>
defineProps({
    //xlink:href屬性值的前綴
    prefix: {
        type: String,
        default: '#icon-'
    },
    //svg矢量圖的名字
    name: String,
    //svg圖標(biāo)的顏色
    color: {
        type: String,
        default: ""
    },
    //svg寬度
    width: {
        type: String,
        default: '16px'
    },
    //svg高度
    height: {
        type: String,
        default: '16px'
    }

})
</script>
<style scoped></style>

在src/components文件夾目錄下創(chuàng)建一個(gè)index.js文件：用于注冊(cè)components文件夾內(nèi)部全部全局組件！?。?/p>

import SvgIcon from './SvgIcon'
const components = { SvgIcon }
// 引入element-plus提供的所有圖標(biāo)
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 對(duì)外暴露插件對(duì)象
export default {
    // 必須叫做install方法，會(huì)有一個(gè)APP對(duì)象傳參；
    // 在入口文件引入使用，會(huì)自動(dòng)執(zhí)行該方法
    install(app) {
        //注冊(cè)全局SVG組件
        Object.keys(components).forEach((key) => {
            app.component(key, components[key])
        })
        // 將element-plus提供的圖標(biāo)注冊(cè)為全局組件
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
    },
}

在入口文件引入src/index.js文件,通過(guò)app.use方法安裝自定義插件

// 注冊(cè)全局組件
import globalComponent from '@/components/index.js'
app.use(globalComponent)

8.配置封裝axios

安裝axios：

pnpm install axios

在根目錄下創(chuàng)建utils/request.js

import axios from "axios";
import {ElMessage} from "element-plus";
//創(chuàng)建axios實(shí)例
let request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 5000
})
//請(qǐng)求攔截器
request.interceptors.request.use(config => {
    return config;
});
//響應(yīng)攔截器
request.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    //處理網(wǎng)絡(luò)錯(cuò)誤
    let msg = '';
    let status = error.response.status;
    switch (status) {
        case 401:
            msg = "token過(guò)期";
            break;
        case 403:
            msg = '無(wú)權(quán)訪問(wèn)';
            break;
        case 404:
            msg = "請(qǐng)求地址錯(cuò)誤";
            break;
        case 500:
            msg = "服務(wù)器出現(xiàn)問(wèn)題";
            break;
        default:
            msg = "無(wú)網(wǎng)絡(luò)";

    }
    ElMessage({
        type: 'error',
        message: msg
    })
    return Promise.reject(error);
});
export default request;

9.api接口統(tǒng)一管理

在開(kāi)發(fā)項(xiàng)目的時(shí)候,接口可能很多需要統(tǒng)一管理。在src目錄下去創(chuàng)建api文件夾去統(tǒng)一管理項(xiàng)目的接口；

例如：

//統(tǒng)一管理用戶相關(guān)的接口
import request from '../utils/request.js'

//項(xiàng)目用戶相關(guān)的請(qǐng)求地址
const API = {
    LOGIN_URL: '/admin/acl/index/login',
    USERINFO_URL: '/admin/acl/index/info',
    LOGOUT_URL: '/admin/acl/index/logout',
}

//登錄接口
export const reqLogin = (data) => request.post(API.LOGIN_URL, data)

//獲取用戶信息
export const reqUserInfo = () => request.get(API.USERINFO_URL)

//退出登錄
export const reqLogout = () => request.post(API.LOGOUT_URL)

10.配置vue-router

安裝：

pnpm install vue-router@4

1.創(chuàng)建src/router/index.js文件，使用路由懶加載，優(yōu)化訪問(wèn)性能

import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/home.vue') // 建議進(jìn)行路由懶加載，優(yōu)化訪問(wèn)性能
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/about.vue')
    }
]

const router = createRouter({
    // history: createWebHistory(),    // 使用history模式
    history: createWebHashHistory(),	 // 使用hash模式
    routes
})

export default router

2.在App.vue 文件中使用router-view 組件，路由匹配到組件會(huì)通過(guò)router-view 組件進(jìn)行渲染。

<template>
    <div id="nav">
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about">About</router-link>
    </div>
    <router-view></router-view>
</template>

3.main.js中引入router

// ...
// 引入路由
import router from './router/index.js'
app.use(router)
// ...

11.配置pinia

安裝：

pnpm install pinia

在main.js文件中引入：

// 引入pinia
import {createPinia} from 'pinia'
app.use(createPinia())

創(chuàng)建文件夾src/stores在該文件夾中管理一些公用數(shù)據(jù)，用戶數(shù)據(jù)user.js，購(gòu)物車(chē)數(shù)據(jù)等

定義

//定義關(guān)于counter的store
import {defineStore} from 'pinia'

/*defineStore 是需要傳參數(shù)的，其中第一個(gè)參數(shù)是id，就是一個(gè)唯一的值，
簡(jiǎn)單點(diǎn)說(shuō)就可以理解成是一個(gè)命名空間.
第二個(gè)參數(shù)就是一個(gè)對(duì)象，里面有三個(gè)模塊需要處理，第一個(gè)是 state，
第二個(gè)是 getters，第三個(gè)是 actions。
*/
const useCounter = defineStore("counter", {
    state: () => ({
        count: 66,
    }),

    // getters 類(lèi)似于 vue 里面的計(jì)算屬性，可以對(duì)已有的數(shù)據(jù)進(jìn)行修飾。
    // 不管調(diào)用多少次，getters中的函數(shù)只會(huì)執(zhí)行一次，且都會(huì)緩存。
    getters: {},

    actions: {}
})

//暴露這個(gè)useCounter模塊
export default useCounter

使用

<script setup>
// 首先需要引入一下我們剛剛創(chuàng)建的store
import useCounter from '../stores/counter.js'
// 因?yàn)槭莻€(gè)方法，所以我們得調(diào)用一下
// 注意獲取數(shù)據(jù)后不支持結(jié)構(gòu)，結(jié)構(gòu)則失去響應(yīng)式
const counterStore = useCounter()

console.log(counterStore.count)
</script>

pinia提供了一個(gè)函數(shù)storeToRefs解決。引用官方API storeToRef 作用就是把結(jié)構(gòu)的數(shù)據(jù)使用ref做代理

import {storeToRefs} from 'pinia'

const counterStore = useCounter()
// 結(jié)構(gòu)仍為響應(yīng)式數(shù)據(jù)
const {count} = storeToRefs(counterStore)

12.Proxy代理配置

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
    // 根據(jù)當(dāng)前工作目錄中的 `mode` 加載 .env 文件
    // 設(shè)置第三個(gè)參數(shù)為 '' 來(lái)加載所有環(huán)境變量，而不管是否有 `VITE_` 前綴。
    const env = loadEnv(mode, process.cwd())
    // console.log(env)
    return {
        base: env.VITE_USER_NODE_ENV === 'production' ? './' : '/',
        plugins: [
            vue(),
            // 配置自定義SVG圖標(biāo)
            createSvgIconsPlugin({
                // Specify the icon folder to be cached
                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                // Specify symbolId format
                symbolId: 'icon-[dir]-[name]',
            }),
            // AutoImport({
            //     resolvers: [ElementPlusResolver()],
            //     // 自動(dòng)導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
            //     imports: ['vue'],
            // }),
            // Components({
            //     resolvers: [ElementPlusResolver()],
            // }),
        ],
        resolve: {
            // 配置別名
            alias: {
                "@": path.resolve("./src") // 相對(duì)路徑別名配置，使用 @ 代替 src
            },
            //extensions數(shù)組的意思是在import組件的時(shí)候自動(dòng)補(bǔ)全.vue等文件后綴
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
        },
        // 配置scss變量
        css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                    additionalData: '@import "./src/styles/variable.scss";'
                }
            }
        },
        // 代理跨域
        server: {
            // open: true, //啟動(dòng)項(xiàng)目自動(dòng)彈出瀏覽器
            hmr: true, //開(kāi)啟熱加載
            host: false, //監(jiān)聽(tīng)所有地址
            port: 6688, //啟動(dòng)端口
            strictPort: false, //設(shè)為 true 時(shí)若端口已被占用則會(huì)直接退出，而不是嘗試下一個(gè)可用端口
            https: false, // 是否開(kāi)啟https
            //proxy: createProxy(env.VITE_APP_API_HOST),
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    // 獲取數(shù)據(jù)的服務(wù)器地址設(shè)置
                    target: env.VITE_SERVE,
                    //開(kāi)啟代理跨域
                    changeOrigin: true,
                    // secure：安全的
                    // 如果是https接口，需要配置這個(gè)參數(shù)
                    secure: false,
                    // 路徑重寫(xiě)
                    // 將請(qǐng)求路徑中的 '/api' 替換為 ''
                    rewrite: (path) => path.replace(/^\/api/, ''),
                },
            },
        },
    }

})

到此這篇關(guān)于vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vite+vue3初始化搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: