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文件代码如下:
TypeScriptimport { 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中修改一下代码:
TypeScriptimport { 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图标导入
TypeScript<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