1、第一步創(chuàng)建項(xiàng)目cnpm init vite@4

2、設(shè)置vue3.2局域網(wǎng)可訪問配置：

找到項(xiàng)目路徑下的package.json目錄下找到script對(duì)象下面添加一下代碼：

? ? ? ?"serve": "vite --host 0.0.0.0"

啟動(dòng)項(xiàng)目命令不在是dev而是：cnpm run serve

?3、第二部：在vite.config.ts中添加以下代碼配置：

?import { resolve } from 'path';

? ? ? ? export default defineConfig({

? ? ? ? ? ? ? ? server:{

? ? ? ? ? ? ? ? ? ? ? ? open:true,

? ? ? ? ? ? ? ? ? ? ? ? port:8088

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? resolve:{

? ? ? ? ? ? ? ? ? ? ? ? alias:{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '@':path.resolve(__dirname,'src')

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? plugins:[vue()],

? ? ? ? })

4、安裝vant配置與使用 cnpm i vant@next -S 安裝完成開始配置?

5、?安裝路由 cnpm install vue-router@latest 配置:在src目錄下新建router目錄，創(chuàng)建index.ts文件代碼如下:?

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [{path:'/',name:'',component:Layout,}
]
})
export default router

注冊(cè)路由組件：在main.ts文件中注冊(cè)：
import router from './router'

app.use(router)

6、按需導(dǎo)入：?

cnpm install?element-plus --save

cnpm install @element-plus/icons-vue

cnpm install -D unplugin-vue-components

cnpm install -D unplugin-auto-import

在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: [vue(),// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

element-plus圖標(biāo)導(dǎo)入

<script lang="ts" setup>import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
</script>

7、安裝其他必備插件：?

? ? ? ? cnpm i axios -S 直接安裝即可使用

? ? ? ? cnpm i less -D

? ? ? ? cnpm i sass sass-loader -D