成都思乐网站建设,推广方法有哪些,wordpress 仪表盘 500,免费做自荐书的网站Vue (发音为 /vjuː/#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库。
最终效果#xff1a; 环境搭建
已安装 16.0 或更高版本的 Node.js#xff0c;终端#xff1a;
npm init vuelatest这一…Vue (发音为 /vjuː/类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库。
最终效果 环境搭建
已安装 16.0 或更高版本的 Node.js终端
npm init vuelatest这一指令将会安装并执行 create-vue它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示
✔ Project name: … your-project-name
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in ./your-project-name...
Done.然后 cd your-project-namenpm installnpm run dev然后打开提示的演示网址就能看到Vue的预览页面了。
Element Plus
element的安装
npm install element-plus --save
npm install element-plus/icons-vue上边安装了element和内置的图标库。
// main.js
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vueconst app createApp(App)app.use(ElementPlus)
app.mount(#app)然后再入口处引入element即可使用element了。
明暗主题的切换
明暗主题的切换非常简单首先在项目的index.html中添加classdark
html langen classdark在组件中使用Vueuse的内置函数就可以搞定了。
import { useDark, useToggle } from vueuse/core
const toggleDark useToggle(isDark)模板里添加一个开关
el-switch v-modelisDark sizelarge classmt-2 stylemargin-left: 24px inline-prompt :active-iconMoon :inactive-iconSunny /这样就可以自由切换应用的明暗主题了,其他具体代码可以查看代码仓库
最后项目地址
GitHub - bosichong/elementplus-test-demo
