1、main.ts文件 import { createApp } from 'vue'import App from'@/App.vue'import route from'@/route/router'import store from'@/store/store'import api from'@/request/api'import ElementPlus from'element-plus'import'element-plus/dist/index.css'import global from'@/components/global.vue'const ...
import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') 在组件中使用Element Plus 组件 你可以像在普通的Vue 组件中一样使用 Element Plus 组件。例如: tsx <template> <el-button type="primary">主要按钮...
/** * @type {import('tailwindcss').Config} */export default { content: [ './index.html', './src/**/*.{vue,js,ts,jsx,tsx}' ], theme: { extend: {}, }, plugins: [],};在src目录下新建index.css文件，并添加以下内容：@tailwind base;@tailwind components;@tailwind...
(1) 安装 pnpm install element-plus (2) 完全引入 import{ createApp }from'vue'// 引入Element-Plus组件和样式importElementPlusfrom'element-plus'
而Element-Plus是一套基于Vue3的优秀UI组件库,它提供了丰富的UI组件,方便我们快速搭建页面,并且支持Tsx语法,使得我们可以更加便捷地使用这些组件。 2. Tsx基础知识 Tsx是一种结合了JavaScript和XML的语法,它使得我们可以在JavaScript中编写类似HTML的代码。在Vue3中,我们可以通过使用Tsx语法来定义组件,这样可以使我们...
1、在src/components目录下建一个组件:Pagination.tsx import { defineComponent } from "vue"; import style from './_pagination.module.scss';//样式可以根据自己需求添加 export default defineComponent({ props: { total: { type: Number, default: 50, }, currentPage: { type: Number, default: 1, ...
parent.tsx import{defineComponent,ref}from'vue';importMyCountfrom'./MyCount';exportdefaultdefineComponent({name:'About',setup() {constmsg=ref('你好!');constmsgClick=()=>{msg.value='你好!小明';};constresetMsgClick=()=>{msg.value='你好!';};constnum=ref(8);consthandleChange=(value:...
安装指令:npm install element-plus --save 自动按需导入指令:npm install -D unplugin-vue-components unplugin-auto-import 在项目配置文件中配置如下代码: import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' /** element plus 自动按需导入插件 start */ ...
// views//dynamicForm/form.tsx import { ElIcon, ElButton } from 'element-plus' import { Search } from '@element-plus/icons-vue' import { useForm } from '@/hooks/useForm' export const useFormIterate = (events?: any) => { const { model, ...arg } = useForm({ form: { label...
而且Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。 主要是要熟练一下 Vue3,好准备用 Vue3 重构一下自己的网站项目: blog-vue-typescript ,计划是过年期间会着手重构这个项目,年后会上线。 1. 初化化项目 全局安装 vite-app ...