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>

7、安装其他必备插件: 

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

        cnpm i less -D

        cnpm i sass sass-loader -D

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54360.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《深度学习》OpenCV 摄像头OCR 过程及案例解析

目录 一、摄像头OCR 1、含义 2、一般操作步骤 1&#xff09;安装OpenCV库 2&#xff09;设置摄像头 3&#xff09;图像采集 4&#xff09;图像预处理 5&#xff09;文本识别 6&#xff09;文本处理 7&#xff09;结果显示 二、案例实现 1、定义展示图像函数 2、定…

《C++20:编程世界的新变革与应用场景探索》

C 作为一种广泛应用的编程语言&#xff0c;一直在不断演进和发展。C20 的到来为开发者带来了众多令人兴奋的新特性&#xff0c;这些特性不仅提升了 C 的编程效率、代码可读性和可维护性&#xff0c;还为各种应用场景带来了新的解决方案。在本文中&#xff0c;我们将深入探讨 C2…

Java - LeetCode面试经典150题 - 哈希表 (二)

哈希表 383. 赎金信 题目 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 提示…

深入理解 JavaScript 事件循环机制:单线程中的异步处理核心

深入理解 JavaScript 事件循环机制&#xff1a;单线程中的异步处理核心 JavaScript 是一门单线程的编程语言&#xff0c;也就是说它在同一时间只能执行一个任务。然而&#xff0c;现代 Web 应用经常需要处理大量的异步操作&#xff0c;如用户输入、网络请求、定时器等。为了确…

[CSP-J 2021] 插入排序

[CSP-J 2021] 插入排序 题目描述 插入排序是一种非常常见且简单的排序算法。小 Z 是一名大一的新生&#xff0c;今天 H 老师刚刚在上课的时候讲了插入排序算法。 假设比较两个元素的时间为 O ( 1 ) \mathcal O(1) O(1)&#xff0c;则插入排序可以以 O ( n 2 ) \mathcal O(…

《迁移学习》—— 将 ResNet18 模型迁移到食物分类项目中

文章目录 一、迁移学习的简单介绍1.迁移学习是什么&#xff1f;2.迁移学习的步骤 二、数据集介绍三、代码实现1. 步骤2.所用到方法介绍的文章链接3. 完整代码 一、迁移学习的简单介绍 1.迁移学习是什么&#xff1f; 迁移学习是指利用已经训练好的模型&#xff0c;在新的任务上…

鸿蒙开发(NEXT/API 12)【状态查询与订阅】手机侧应用开发

注意 该接口的调用需要在开发者联盟申请设备基础信息权限与穿戴用户状态权限&#xff0c;穿戴用户状态权限还需获得用户授权。 实时查询穿戴设备可用空间、电量状态。订阅穿戴设备连接状态、低电量告警、用户心率告警。查询和订阅穿戴设备充电状态、佩戴状态、设备模式。 使…

初识Django

前言: 各位观众老爷们好&#xff0c;最近几个月都没怎么更新&#xff0c;主要是最近的事情太多了&#xff0c;我也在继续学习Django框架&#xff0c;之前还参加了一些比赛&#xff0c;现在我会开始持续更新Django的学习&#xff0c;这个过程会比较久&#xff0c;我会把我学习的…

MySQL--三大范式(超详解)

目录 一、前言二、三大范式2.1概念2.2第一范式&#xff08;1NF&#xff09;2.3第二范式&#xff08;2NF&#xff09;2.3第三范式&#xff08;3NF&#xff09; 一、前言 欢迎大家来到权权的博客~欢迎大家对我的博客进行指导&#xff0c;有什么不对的地方&#xff0c;我会及时改进…

嘴尚绝卤味:健康美味的双重奏

在当今快节奏的生活中&#xff0c;人们对美食的追求不再仅仅停留于味蕾的满足&#xff0c;更加注重食物的健康与营养。在这一背景下&#xff0c;"嘴尚绝卤味"以其独特的健康理念与精湛的制作工艺&#xff0c;成为了市场上备受瞩目的卤味品牌。本文将从"嘴尚绝卤…

Django学习笔记九:RESTAPI添加用户认证和授权

在Django REST Framework中添加用户认证和授权&#xff0c;通常涉及以下几个步骤&#xff1a; 1. 认证&#xff08;Authentication&#xff09; 认证是指确定用户身份的过程。Django REST Framework提供了多种认证方式&#xff1a; Token Authentication&#xff1a;通过一个…

Kotlin基本知识

Kotlin是一种现代的静态类型编程语言&#xff0c;由JetBrains公司在2010年推出&#xff0c;并被Google在2019年宣布为Android开发的首选语言。 超过 50% 的专业 Android 开发者使用 Kotlin 作为主要语言&#xff0c;而只有 30% 使用 Java 作为主要语言。 70% 以 Kotlin 为主要语…

APK安装包arm64-v8a、armeabi-v7a、x86、x86_64如何区别?(2024年10月1日)

其实就是安卓CPU的进步史 安卓CPU类型: arm64-v8a: 第8代、64位ARM处理器&#xff0c;目前手机大多数是此架构(新手机&#xff0c;可以无脑选择)armeabiv-v7a: 第七代及以上的 ARM 处理器。2011年5月以后生产的大部分安卓设备都使用它armeabi: 第5代、第6代的ARM处理器&#…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑光伏不确定性的配电网谐波监测优化配置方法 》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

华为云技术深度解析:以系统性创新加速智能化升级

华为云技术深度解析&#xff1a;以系统性创新加速智能化升级 在当今数字化转型的浪潮中&#xff0c;云计算作为关键的基础设施&#xff0c;正以前所未有的速度推动着各行各业的智能化升级。作为全球领先的云服务提供商&#xff0c;华为云凭借其深厚的技术积累和创新实力&#…

Azure DevOps Server:不能指派新增的用户

Contents 1. 概述2. 解决方案 1. 概述 近期和微软Azure DevOps项目组解决了一个“无法指派开发人员”的问题&#xff0c;在此分享给大家。问题描述&#xff1a; 在一个数据量比较大的Azure DevOps Server的部署环境中&#xff0c;用户发现将新用户的AD域账户添加到Azure DevOps…

《15分钟轻松学 Python》教程目录

为什么要写这个教程呢&#xff0c;主要是因为即使是AI技术突起的时代&#xff0c;想要用好AI做开发&#xff0c;那肯定离不开Python&#xff0c;就算最轻量级的智能体都有代码块要写&#xff0c;所以不一定要掌握完完整整的Python&#xff0c;只要掌握基础就能应对大部分场景。…

数据看板如何提升决策效率?

数据看板作为一种直观、高效的数据可视化工具&#xff0c;在这一过程中发挥着至关重要的作用。以一家中型制造企业为例&#xff0c;每天面临着生产计划的安排、原材料的采购、产品质量的把控以及市场销售的策略制定等诸多业务场景。在生产线上&#xff0c;需要确保设备的高效运…

《计算机原理与系统结构》学习系列

系列文章目录 一、计算机概要与技术 二、指令&#xff1a;计算机的语言&#xff08;上&#xff09; 三、指令&#xff1a;计算机的语言&#xff08;中&#xff09; 四、指令&#xff1a;计算机的语言&#xff08;下&#xff09; 五、计算机的算数运算&#xff08;上&#…

【隐私计算篇】多方安全计算之函数秘密共享(FSS)

1. 函数秘密共享(FSS)定义 秘密共享是一种将一个值拆分为多个份额的方法&#xff0c;形式有多种&#xff0c;可以参考《安全多方计算(MPC)矩阵乘法算子的原理分析》。这里主要提及加法秘密共享&#xff0c;使得&#xff1a;这些份额可以重新组合以还原出秘密值&#xff1b;任…