vue3+vite@4+ts+elementplus创建项目详解

1、第一步创建项目cnpm init vite@4

2、设置vue3.2局域网可访问配置：

找到项目路径下的package.json目录下找到script对象下面添加一下代码：

"serve": "vite --host 0.0.0.0"

启动项目命令不在是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目录，创建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
注册路由组件：在main.ts文件中注册：
import router from './router'

app.use(router)

6、按需导入：

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图标导入
<script lang="ts" setup>import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
</script>