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>