Vue 使用Element Plus

矫情吗；* 2024-05-07 22:26 80阅读 0赞

## 1.官网[安装 | Element PlusA Vue 3 based component library for designers and developers![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://element-plus.gitee.io/zh-CN/guide/installation.html\#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8][_ Element PlusA Vue 3 based component library for designers and developers_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_element-plus.gitee.io_zh-CN_guide_installation.html_E4_BD_BF_E7_94_A8_E5_8C_85_E7_AE_A1_E7_90_86_E5_99_A8] ##

npm install element-plus --save

## 2. 全局安装图标 ##

npm install @element-plus/icons-vue

## 3. main.ts 使用 ElementPlus插件 ##

import { createApp } from 'vue'import App from './App.vue'
    //加入路由import router from './router/index';//导入storeimport store from './store/index'
    //使用ElementPlus插件import ElementPlus from 'element-plus'//引用ElementPlus样式import 'element-plus/dist/index.css'import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    const app=createApp(App)//全局导入饿了么图标for (const [key, component] of Object.entries(ElementPlusIconsVue)) {    app.component(key, component)  }app.use(router)//并通过use，使用路由app.use(store)//使用ElementPlus插件app.use(ElementPlus)app.mount('#app')
    
    import { createApp } from 'vue'
    import App from './App.vue'
    
    //加入路由
    import router from './router/index';
    //导入store
    import store from './store/index'
    
    //使用ElementPlus插件
    import ElementPlus from 'element-plus'
    //引用ElementPlus样式
    import 'element-plus/dist/index.css'
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    
    const app=createApp(App)
    //全局导入饿了么图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
      }
    app.use(router)
    //并通过use，使用路由
    app.use(store)
    //使用ElementPlus插件
    app.use(ElementPlus)
    app.mount('#app')

## 4.正则表达式在线测试|菜鸟工具 ##

[正则表达式在线测试 | 菜鸟工具一、校验数字的表达式 数字：^\[0-9\]\*$ n位的数字：^\\d\{n\}$ 至少n位的数字：^\\d\{n,\}$ m-n位的数字：^\\d\{m,n\}$ 零和非零开头的数字：^(0|\[1-9\]\[0-9\]\*)$ 非零开头的最多带两位小数的数字：^(\[1-9\]\[0-9\]\*)+(\\.\[0-9\]\{1,2\})?$ 带1-2位小数的正数或负数：^(\\-)?\\d+(\\.\\d\{1,2\})$ 正数、负数、和小数：^(\\-|\\+)?\\d+(\\.\\..![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://www.jyshare.com/front-end/854/][_ _ _0-9_ n_d_n_ _n_d_n_ m-n_d_m_n_ _0_1-9_0-9_ _1-9_0-9_._0-9_1_2_ _1-2_-_d_._d_1_2_ _-_d_._.._icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_www.jyshare.com_front-end_854]

[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[_ Element PlusA Vue 3 based component library for designers and developers_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_element-plus.gitee.io_zh-CN_guide_installation.html_E4_BD_BF_E7_94_A8_E5_8C_85_E7_AE_A1_E7_90_86_E5_99_A8]: https://element-plus.gitee.io/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8
[_ _ _0-9_ n_d_n_ _n_d_n_ m-n_d_m_n_ _0_1-9_0-9_ _1-9_0-9_._0-9_1_2_ _1-2_-_d_._d_1_2_ _-_d_._.._icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_www.jyshare.com_front-end_854]: https://www.jyshare.com/front-end/854/