vue3+vite@4+ts+elementplus创建项目详解
1、第一步创建项目npm init vite@4
2、设置vue3.2局域网可访问配置:
找到项目路径下的package.json目录下找到script对象下面添加一下代码:
"serve": "vite --host 0.0.0.0"
启动项目命令不在是dev而是:npm 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配置与使用 npm i vant@next -S 安装完成开始配置
5、 安装路由 npm 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、按需导入:
npm install element-plus --save
npm install -D unplugin-vue-components 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>
7、安装其他必备插件:
npm i axios -S 直接安装即可使用
npm i sass sass-loader -D
原文地址:https://blog.csdn.net/cyz141001/article/details/142703509
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!