1.iconfont图标
1.下载图标的代码
2.放到assets文件夹中
3.使用时需要引入CSS样式
2.Ui工具(饿了么)
网址:http://element-cn.eleme.io/#/zh-CN
1.完整引入
1.安装:npm i element-ui -S
2.在 main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2.按需加载
1.安装 babel-plugin-component:npm install babel-plugin-component -D
2.将 .babelrc 修改为:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime",[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]]
}
3.引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
3.swiper工具
网址:https://github.com/surmon-china/vue-awesome-swiper
1.安装:npm install vue-awesome-swiper --save
2.全局引入:
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.局部引入:
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
4.使用
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了,比如axios网络请求
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
5.常用组件库
vue官网–生态系统–vue资源