Element UI入门

最新推荐文章于 2024-06-09 00:15:00 发布

原创最新推荐文章于 2024-06-09 00:15:00 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了Element UI，一个基于Vue 2.0的桌面端组件库，提供了丰富的组件和方便的安装教程。通过vue-cli创建项目，手动选择所需功能如Babel、Router和Vuex，然后安装并引入element-ui到main.js中，即可开始使用。

Element UI

Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网: https://element.eleme.cn/#/zh-CN/component/installation

搭建环境
- 步骤一:打开集成终端通过vue-cli创建项目
  
  vue create eui01
- 步骤二: 手动选择功能(Manually select features)
- 步骤三:选择需要的组件
  - Babel : JavaScript编译器, 用于版本兼容, 复制将 ES6+ 转换成 ES 5.
  - Router : 路由
  - Vuex : 组件数据共享
  
  创建成功后可通过来运行 :

npm run serve

使用 element-ui组件

第一步安装 : npm i element-ui
在这里插入图片描述
第二步:在main.js里引入element-UI

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import  '@/assets/reset.css';

Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')