Vue脚手架系列06-Vue中使用第三方组件(element-Ui)

420 阅读1分钟

1.组件深入:

组件分类:

  • 通用组件:
    • 基础组件,⼤部分UI都是这种组件,⽐如表单 布局 弹窗等
  • 业务组件:
    • 与需求挂钩,会被复⽤,⽐如抽奖,摇⼀摇等
  • ⻚⾯组件:
    • 每个⻚⾯都是⼀个组件

2.使用第三方组件

1.element-ui安装-完全导入(不推荐):

⽐如vue最流⾏的element,就是典型的通⽤组件,执⾏ npm install element-ui 安装,但是这种方式是完全导入,就是element-ui中的所有组件,无论在项目中是否使用,都会被打包,导致项目体积变大。

🌵main.js中的文件

  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)
  });

2.element-ui(部分导入):

1.在vue-cli中可以使⽤vue add element 安装:🌵安装之前注意提前提交当前⼯作内容,脚⼿架会覆盖若⼲⽂件

选择部分导入后,发现项⽬发⽣了变化,打开App.vue, 可以ctrl+z 撤回

2.部分导入后,会看到项目中多了文件夹:

此时可以在任意组件中使⽤ <el-button>