vue常用插件的导入

vuex 原文： https://blog.csdn.net/qq_37600506/article/details/102974578

1、npm安装 npm install vuex --save-dev 2、在store文件夹下创建store.js文件 import Vue from 'vue'; import VueX from 'vuex'; Vue.use(VueX); export default new VueX.Store({ state: {}, getters:{}, mutations:{}, actions:{}, }); 3、在项目的入口js文件main.js文件 import Vue from 'vue' import App from './App' import router from './route' import store from './store/store'//1、引入vuex配置文件 Vue.config.productionTip = false; new Vue({ el: '#app', router, store,// 2、vue实例中使用 components: { App }, template: '<App/>' });

less安装

1、首先使用npm下载依赖； npm install --save less less-loader 2、安装完成后检查是否安装成功； lessc -v 3、main.js引入 important less from 'less' Vue.use(less) 4、运行项目报错 loaderContext.getResolve is not a function 解决办法： 修改package.json文件： "less": "^3.9", "less-loader": "^5.0.0", 5、npm install 后重启项目即可

scss安装

1、命令 npm install node-sass@4.14.1 //安装node-sass npm install sass-loader@7.3.1 --save-dev npm install style-loader --save-dev //安装style-loader 2、使用 <style lang='scss'> </style>

element-ui

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

babel-polyfill 原文：https://www.cnblogs.com/songfengyang/p/12851813.html

1、安装依赖 npm install babel-polyfill --save 2、在main.js中引入 import ‘babel-polyfill’（注：必须引入在最前面，保证所有es6语法都会被解析） 3、下载完成后找到build文件夹下的webpack.base.conf.js下的一段代码 module.exports = { 　　entry: { 　　　　app: ‘./src/main.js’ 　　}, 替换为 module.exports = { context: path.resolve(__dirname, ‘…/’), entry: { 　　app: [“babel-polyfill”, “./src/main.js”], }

animate.css 原文：https://blog.csdn.net/COCOLI_BK/article/details/108996795

1、安装依赖： npm install animate.css --save 2、在main.js中引入： import animated from ‘animate.css’ Vue.use(animated)

vue集成vue2-animate插件实现常用动画 原文：https://blog.csdn.net/u013144287/article/details/90406839 官方：https://www.npmjs.com/package/vue2-animate

一、安装 npm install --save vue2-animate 二、main.js引入, 加入以下这句 import 'vue2-animate/dist/vue2-animate.min.css' 三、使用，在XXX.vue界面，脚手架生成的vue页面模板都是固定的 <template> <div> <transition name="bounce"> <div v-if="show" class="adim"></div> </transition> <el-button @click="animatedFn">动画</el-button> </div> </template> <script> export default { name: "", data() { return { show: true, }; }, components: {}, methods: { animatedFn() { this.show = !this.show; }, }, }; </script> <style scoped> .adim { width: 100px; height: 100px; background: #f00; } </style>

echarts 原文：https://www.cnblogs.com/wr1991/p/10755689.html

1、安装依赖： npm install echarts --save 2、main.js 中引入 echarts 依赖 import echarts from 'echarts' Vue.prototype.$echarts = echarts;

Vant vue移动端ui组件 原文：https://vant-contrib.gitee.io/vant/#/zh-CN/home

wangeditor： 富文本编辑器插件 官网：http://www.wangeditor.com/doc/

vue-video-player（视频播放插件） 原文：https://blog.csdn.net/weixin_38684316/article/details/88070737 注意：视频地址和封面地址均引用的是服务器端得，本地的视频和图片是加载不出来的

一、安装 npm install vue-video-player -S 二、导入main.js //main.js import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' import 'videojs-contrib-hls' import VideoPlayer from 'vue-video-player' Vue.use(VideoPlayer); 三、使用 html: <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> js: <script> export default { name: "Video", data() { return { playerOptions: { playbackRates: [1.0, 2.0, 3.0], //播放速度 autoplay: false, //如果true,浏览器准备好时开始回放。 muted: false, // 默认情况下将会消除任何音频。 loop: false, // 导致视频一结束就重新开始。 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 sources: [{ type: "video/mp4", type: "video/ogg", src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //url地址 }], poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg", //你的封面地址 width: document.documentElement.clientWidth, notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按钮 } } } } } </script>

vue-awesome-swiper 轮播图插件 原文：https://blog.csdn.net/u012570307/article/details/107203851/

1、 安装指定版本 npm install vue-awesome-swiper@3 --save-dev 2、main.js引入 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 3、组件代码 <template> <div class="recommendPage"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> // 引入插件 import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, // 显示分页 pagination: { el: ".swiper-pagination", clickable: true //允许分页点击跳转 }, // 设置点击箭头 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } } }; }, computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted() { // current swiper instance // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了 console.log("this is current swiper instance object", this.swiper); // this.swiper.slideTo(3, 1000, false); } }; </script> <style scoped > .recommendPage .swiper-container{ position: relative; width: 100%; height: 200px; background: pink; } .recommendPage .swiper-container .swiper-slide{ width: 100%; line-height: 200px; background: yellowgreen; color: #000; font-size: 16px; text-align: center; } </style>