26 vue项目中elementui的使用

1 使用第三方插件

https://github.com/vuejs/awesome-vue#components--libraries

集合了来自社区贡献的数以千计的插件和库。

2 使用第三方UI框架

饿了么UED团队推出的vue 前端框架：

PC（web端）框架：

(element UI ， iview)

element UI 官网：The world's most popular Vue UI framework

element UI github：https://github.com/ElemeFE/element

移动端框架：

(mint UI)

mint UI官网：https://mint-ui.github.io/docs/

mint UI github：https://github.com/ElemeFE/mint-ui

3 安装element-ui

npm i element-ui -S

-S
即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在

-D
即--dev（开发）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

注意：在使用npm install一个插件的时候，需要添加上-s或-d，不然不会再package.json中显示

 

 

4 使用element-ui

完整引入

在 main.js 中写入以下内容：（详见element-ui官网

）

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

https://element.eleme.cn/#/zh-CN/component/quickstart    可以添加好看的组件（注意样式也要拷贝）

简略步骤

# 步骤
    -安装 npm i element-ui -S
    -配置main.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    -在组件中使用
        复制好看的代码过来即可