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文件代码如下:

TypeScript 复制代码
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中修改一下代码:

TypeScript 复制代码
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图标导入

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

相关推荐
艾莉丝努力练剑2 小时前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
武子康3 小时前
Java-72 深入浅出 RPC Dubbo 上手 生产者模块详解
java·spring boot·分布式·后端·rpc·dubbo·nio
椰椰椰耶4 小时前
【Spring】拦截器详解
java·后端·spring
brzhang5 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
倔强青铜36 小时前
苦练Python第18天:Python异常处理锦囊
开发语言·python
u_topian6 小时前
【个人笔记】Qt使用的一些易错问题
开发语言·笔记·qt
珊瑚里的鱼7 小时前
LeetCode 692题解 | 前K个高频单词
开发语言·c++·算法·leetcode·职场和发展·学习方法
AI+程序员在路上7 小时前
QTextCodec的功能及其在Qt5及Qt6中的演变
开发语言·c++·qt
xingshanchang7 小时前
Matlab的命令行窗口内容的记录-利用diary记录日志/保存命令窗口输出
开发语言·matlab