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>
番外
下载地址改为淘宝镜像
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
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>
6442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
