Vue3 Element Plus WindiCSS 项目开发环境搭建

一 概述

MVVM 是 Model-View-ViewModel 的简写,它本质上是 MVC 的改进版。MVVM 将其中的 View 的状态和行为抽象化,并且将视图 UI 和业务逻辑分开。
(1)M:即 Model(模型),包括数据和一些基本操作。
(2)V:即 View(视图),指页面渲染结果。
(3)VM:即 View-Model,指模型与视图间的双向操作(无须开发者干涉)。

二 项目实战

2.1 安装 Node.js

根据研发环境类型,安装 Node.js,官网:https://nodejs.org

2.2 安装 Vue 并创建项目

访问 Vue 官网:https://cn.vuejs.org,将默认镜像切换为国内镜像:

npm config get registry
npm config set registry https://registry.npmmirror.com # 切换为国内淘宝镜像
# npm config set registry https://registry.npmjs.org # 切换回国外镜像
# npm config get registry # 查看当前系统源
# npm install -g nrm open@8.4.2 --save # 使用nrm管理源
# nrm ls # 列出当前可用包
# nrm use taobao # 将源切换为淘宝源

创建项目:

npm init vite@latest mapms -- --template vue # 当前工作目录 E:\workspace\web
cd mapms
npm install
npm run dev

2.3 安装 VSCode 插件

  1. Vue Language Features (Volar)
  2. Vue 3 Snippets
  3. Vue 3 Support - All In One

2.4 引入 Element Plus

引入 Element Plus,官网:https://element-plus.org, 安装:

npm install element-plus --save # https://element-plus.org/zh-CN/#/zh-CN

在 main.js 中导入:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

清空 main.js 其他代码,加入:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

清空 App.vue 文件内的标签内的内容,在 Element Plus 指南找到 button 复制标签 template 代码:

<template><el-row class="mb-4"><el-button disabled>Default</el-button><el-button type="primary" disabled>Primary</el-button><el-button type="success" disabled>Success</el-button><el-button type="info" disabled>Info</el-button><el-button type="warning" disabled>Warning</el-button><el-button type="danger" disabled>Danger</el-button></el-row><el-row><el-button plain disabled>Plain</el-button><el-button type="primary" plain disabled>Primary</el-button><el-button type="success" plain disabled>Success</el-button><el-button type="info" plain disabled>Info</el-button><el-button type="warning" plain disabled>Warning</el-button><el-button type="danger" plain disabled>Danger</el-button></el-row>
</template>

2.5 安装 WindiCSS

Windi CSS 中文文档:https://cn.windicss.org,安装 Windi CSS:

npm i -D vite-plugin-windicss windicss

在你的 Vite 配置中添加插件:

import WindiCSS from 'vite-plugin-windicss' // 不能忘记export default {plugins: [vue(), WindiCSS()],
}

main.js 引入:

import 'virtual:windi.css'

在 vscode 安装插件:WindiCSS IntelliSense。

2.6 安装配置 Vue Router

访问:https://router.vuejs.org/zh;执行 npm 安装命令:

npm install vue-router@4 # https://router.vuejs.org/zh/introduction.html

引入 VueRouter,在src目录新建router目录,创建index.js文件,加入以下内容 :

import { createRouter, createWebHashHistory } from 'vue-router';
import Index from '~/pages/index.vue'
import About from '~/pages/about.vue'
import NotFound from '~/pages/404.vue'
import Login from '~/pages/login.vue'const routers = [{path: '/',component: Index
},{path: '/about',component: About
},{path: '/login',component: Login
},{path: '/:pathMatch(.*)*',name: "NotFound",component: NotFound
}];const router = createRouter({ history: createWebHashHistory(), routes: routers });export default router;

注: 以上代码已完成"/“,”/about","/login"和一个404页面的路径。
在main.js中加入:

import router from './router'
app.use(router)

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

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

相关文章

13. 从零用Rust编写正反向代理, HTTP中的压缩gzip,deflate,brotli算法

wmproxy wmproxy是由Rust编写&#xff0c;已实现http/https代理&#xff0c;socks5代理&#xff0c; 反向代理&#xff0c;静态文件服务器&#xff0c;内网穿透&#xff0c;配置热更新等&#xff0c; 后续将实现websocket代理等&#xff0c;同时会将实现过程分享出来&#xff…

mysql的索引约束检查触发器

索引&#xff1a; MySQL 索引是一种用于提高查询性能的关键数据库特性。通过在表上创建索引&#xff0c;MySQL 可以更有效地定位和检索数据&#xff0c;从而加速查询操作。以下是关于 MySQL 索引的一些基本信息&#xff1a; 1. **索引类型&#xff1a;** - **单列索引&…

构建智慧储能物联网,4G工业路由器远程监测在线管理

物联网技术的发展为智慧储能管理带来了革命性的变化。其中&#xff0c;4G工业路由器IR5000通过丰富的连接能力如串口RS485/232或网口的方式&#xff0c;实现了与储能现场各设备的连接&#xff0c;包括电表、电能检测器、防孤岛装置、BMS电池管理系统、监控服务器、储能控制器、…

WEB渗透—PHP反序列化(五)

Web渗透—PHP反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩…

xcrun: error: invalid active developer path

macOS升级完成后出现 xcrun: error: invalid active developer path问题。 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun这是由于 Xcode command line tools 丢…

Python-Selenium-使用 pywinauto 实现 Input 上传文件

当前环境&#xff1a;Win10 Python3.7 pywinauto0.6.8&#xff0c;selenium3.14.1 示例代码 from pywinauto import Desktop import osapp Desktop() dialog app[打开] dialog[Edit].set_edit_text(os.getcwd() .\\example-01.jpg) dialog[Button].click() 其他方法&…

LINUX SD卡备份的镜像+烧录启动时自动扩展最后一个分区

在开发到生产过程中,对系统镜像的备份及再烧录过程是必不可少的。经常看到烧录官方镜像的时候,我们会发现当镜像第一次启动后,磁盘空间会自动扩充到整个TF/SD卡。那么当我们自己制作镜像的时候,能不能去除未使用的空间,制作体积较小的镜像,并在该镜像启动时自动扩展,从而…

【影像组学入门百问】#29---#31

#29-影像组学研究中&#xff0c;消除不同影像间因设备和扫 描参数引起的差异的方法有哪些&#xff1f; 在影像组学研究中&#xff0c;消除不同影像间因设备和扫描参数引起的差异至关重要。以下是一些常用的方法&#xff1a; 1.归一化&#xff08;Normalization&#xff09;&a…

喜报|棱镜七彩获评江苏省专精特新中小企业

近日&#xff0c;江苏省工业和信息化厅发布《关于江苏省2023年专精特新中小企业和2020年度专精特新企业复核通过企业名单的公示》&#xff0c;棱镜七彩成功入选2023年江苏省省级专精特新中小企业名单。 图 2023年省级专精特新中小企业公式名单节选 “专精特新”是国家为鼓励中…

Python纯净式下载与安装

1. 下载 Download Python | Python.org 建议下老版本些的&#xff0c;毕竟求稳。 点击需要的版本&#xff0c;然后滑倒最下面&#xff0c;可以看到不同系统对应的下载选项&#xff1a; 2. 安装 如果下载慢的话&#xff0c;可以复制链接到迅雷下载&#xff0c;下载完成后&…

这个食堂管理大招,再不知道就晚了!

随着社会的不断发展&#xff0c;餐饮行业也在不断创新和进步。在这个数字化时代&#xff0c;智能技术为各行各业提供了更高效、便捷的解决方案。 食堂作为人们日常生活中不可或缺的一部分&#xff0c;也迎来了智能化的时代。智慧收银系统不仅提高了食堂的运营效率&#xff0c;还…

应用Transformer和CNN进行计算机视觉任务各自的优缺点

Transformer 和 CNN&#xff08;卷积神经网络&#xff09;是用于计算机视觉任务的两种不同的深度学习架构&#xff0c;各自具有一些优点和局限性。 一、Transformer: 优点&#xff1a; 全局信息关系建模&#xff1a; Transformer 通过自注意力机制&#xff08;self-attentio…

【算法Hot100系列】删除链表的倒数第 N 个结点

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

探讨二维半导体的概念、应用前景及其与传统半导体的差异

当探讨二维半导体时&#xff0c;我们置身于科技革新的前沿。这种材料以其纳米级薄度和独特电学性质区别于传统半导体&#xff0c;引发了科学界的广泛兴趣。本文将深入探讨二维半导体的概念、应用前景及其与传统半导体的差异。 什么是二维半导体&#xff1f; 二维半导体是由单…

常见的游戏类型

中懿游游戏开发&#xff0c;游戏类型繁多&#xff0c;涵盖了各种不同的主题、玩法和风格。以下是一些常见的游戏类型&#xff1a; 动作游戏&#xff08;Action Games&#xff09;&#xff1a; 包括快节奏的战斗和反应要求高的游戏&#xff0c;例如《侠盗猎车手》、《荣誉战士…

分享4个文件自动备份方法,持续保护重要数据安全!

​如何执行文件自动备份任务&#xff1f;随着网络科技日新月异的高速发展&#xff0c;电脑和手机等电子设备在我们的日常工作生活中扮演着越来越重要的角色&#xff0c;使用频率逐渐增加&#xff0c;慢慢地也就离不开它了&#xff0c;从而导致积累在电脑中的重要数据量也在不断…

HackTheBox-Machines--Broker

文章目录 1 端口扫描2 测试思路3 漏洞探测4 CVE-2023-46604漏洞利用5.权限提升 Broker 测试过程 1 端口扫描 nmap -sC -sV 10.129.41.282 测试思路 目标开启了22、80、61616端口&#xff0c;在服务器开启了非web及一些需要账号密码进行登录的端口时&#xff0c;我们的入手点从这…

测试用例设计方法六脉神剑——第五剑:化气为型,场景用例破云

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

08‐Mysql全局优化与Mysql 8.0新特详解

文章目录 Mysql全局优化总结配置文件my.ini或my.cnf的全局参数最大连接数允许用户连接的最大数量MySQL能够暂存的连接数量JDBC连接空闲等待时长client连接空闲等待时长innodb线程并发数innodb存储引擎buffer pool缓存大小行锁锁定时间redo log写入策略binlog写入磁盘机制排序线…

22.JSP技术

JSP起源 在很多动态网页中&#xff0c;绝大部分内容都是固定不变的&#xff0c;只有局部内容需要动态产生和改变。如果使用Servlet程序来输出只有局部内容需要动态改变的网页&#xff0c;其中所有的静态内容也需要程序员用Java程序代码产生&#xff0c;整个Servlet程序的代码将…