vue项目中常用的一些组件、工具和经验：sass、Vuex、vuescroll、LicenseKeyboard-vue、viewerjs、scrollReveal、notify（精华）
一：vue 中配置跨域访问后台
proxyTable: { '/api': { target: 'http://127.0.0.1:18080', // 后台访问地址 changeOrigin: true, pathRewrite: { '^/api': '' } } }, 配置后可直接在npm run dev 时直接访问后台地址 前缀比真实后台是多了个 /api ,例如：/login/login，实际为：/api/login/login
this.$axios.post('/login/login', user) .then(function (response) { }) .catch(function (error) { });
二：sass-css预编译：
npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！ #打开build文件夹下面的webpack.base.config.js { //下面是没有的需要你手动添加，相当于是编译识别sass! 在rules下： test: /\.scss$/, loaders: ["style", "css", "sass"] } #使用： <style lang="scss" scoped="" type="text/css"> </style> 这里很可能报错：this.getResolve is not a function 这是因为当前sass的版本太高，找到package.json文件，里面的 "sass-loader"的版本更换掉 就行了 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",
三：Vuex安装
npm install vuex --save #创建store文件——>index.js #在mian.js中挂载： import store from './store';//仓库 new Vue({ el: '#app', router, store, render: h => h(App) });
使用示例：
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { //要设置的全局访问的state对象 songUrl: "https://music.163.com/song/media/outer/url?id=id.mp3", //歌曲的url songId: "33894312", //歌曲id编号 isplay: false, //是否播放音乐 }; const getters = { getSongUrl(state) { //实时监听当前要播放的歌曲值的变化(最新状态) return state.songUrl; }, getSongId(state) { //实时监听当前要播放的歌曲编号值的变化(最新状态) return state.songId; }, getIsplay(state) { //实时监听当前要播放的歌曲播放状态的变化(最新状态) return state.isplay; } }; const mutations = { changeSongUrl(state, newUrl) {//设置当前歌曲的url state.songUrl = newUrl; }, changeSongId(state, newId) {//设置当前歌曲的id编号 state.songId = newId; }, changeIsplay(state, newStatus) {//设置当前歌曲的播放状态 state.isplay = newStatus; }, }; const actions = { // hideFooter(context) { //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性 // context.commit('hide'); }; const store = new Vuex.Store({ state, getters, mutations, actions }); export default store;
组件中使用
//在组件中使用： computed: { Id() { return this.$store.getters.getSongId; } }, watch: { Id() { //id变化之后的逻辑 } }, mounted(){ // this.$store.getters.getSongId;获取story中的实时数据 // this.$store.commit("changeSongId", "id");修改story中的实时数据 }
四：vuescroll使用
# 安装模块 npm install vuescroll -S # 引入模块后自动生效 main.js import Vue from 'vue'; import vuescroll from 'vuescroll'; Vue.use(vuescroll); #使用配置： export default { // vuescroll vuescroll: { mode: 'native', // 设置 vuescroll的大小类型， 可选的有percent, number. // 设置为percent会把 vuescroll 的 height 和 width 设置成100%, // 设置成number的话 vuescroll 会自动计算父元素的大小，并将height和width设置成对应的数值。 // 提示:如果父元素的尺寸为百分比大小时建议设置成number,如果父元素大小为一个固定的px的值,那么设置为百分比比较合适一些。 sizeStrategy: 'percent', // 是否开启监听 dom resize detectResize: true, // 下拉刷新相关(slide mode) pullRefresh: { enable: false, // 下拉刷新的提示 tips: { deactive: 'Pull to Refresh', active: 'Release to Refresh', start: 'Refreshing...', beforeDeactive: 'Refresh Successfully!' } }, // 上推加载相关 pushLoad: { enable: false, tips: { deactive: 'Push to Load', active: 'Release to Load', start: 'Loading...', beforeDeactive: 'Load Successfully!' }, auto: false, autoLoadDistance: 0 }, paging: false, zooming: true, // 快照 snapping: { enable: false, width: 100, height: 100 }, /* shipped scroll options */ scroller: { /* 允许滚动出边界 true 或者 false 或者一个数组指定哪个方向可以超出边界，可选项分别是： ['top','bottom','left','right'] */ bouncing: true, /** Enable locking to the main axis if user moves only slightly on one of them at start */ locking: true, /** 最小缩放级别 */ minZoom: 0.5, /** 最大缩放级别 */ maxZoom: 3, /** 滚动速度的倍速 **/ speedMultiplier: 1, /** 到达边界时应用于减速的改变量 **/ penetrationDeceleration: 0.03, /** 到达边界时应用于加速的改变量 **/ penetrationAcceleration: 0.08, /** Whether call e.preventDefault event when sliding the content or not */ preventDefault: true, /** Whether call preventDefault when (mouse/touch)move*/ preventDefaultOnMove: true } }, scrollPanel: { // 组件加载完后的初始滚动量 initialScrollY: false, initialScrollX: false, // 是否禁止x或y方向上的滚动 scrollingX: true, scrollingY: true, speed: 300, // 滚动动画 easing: undefined, // 是否有一个padding样式，样式的大小应该和rail/bar的大小是一样。可以用来阻止内容被滚动条遮住一部分 padding: false， // 有时候原声滚动条可能在左侧, // 请查看 https://github.com/YvesCoding/vuescroll/issues/64 verticalNativeBarPos: 'right' }, //滚动条滚动的地方 rail: { background: '#01a99a', opacity: 0, border: 'none', /** Rail's size(Height/Width) , default -> 6px */ size: '6px', /** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/ specifyBorderRadius: false, /** Rail the distance from the two ends of the X axis and Y axis. **/ gutterOfEnds: null, /** Rail the distance from the side of container. **/ gutterOfSide: '2px', /** Whether to keep rail show or not, default -> false, event content height is not enough */ keepShow: false }, bar: { /** 当不做任何操作时滚动条自动消失的时间 */ showDelay: 500, /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/ specifyBorderRadius: false, /** 是否只在滚动的时候现实滚动条 */ onlyShowBarOnScroll: true, /** 是否保持显示 */ keepShow: false, /** 滚动条颜色, default -> #00a650 */ background: 'rgb(3, 185, 118)', /** 滚动条透明度, default -> 1 */ opacity: 1, /** Styles when you hover scrollbar, it will merge into the current style */ hoverStyle: false }, scrollButton: { enable: false, background: 'rgb(3, 185, 118)', opacity: 1, step: 180, mousedownStep: 30 } };
vue示例
#使用 <div id="app" > <vue-scroll :ops="ops"> <div class="content" v-for= "item in 100" :key="item" > <span>{{item}}</span> </div> </vue-scroll> </div>
ops中可以进行上述参数配置
五：LicenseKeyboard-vue的汽车品牌插件
#安装 npm i vue-license-keyboard --save #在main.js文件中引入 import LicenseKeyboard from; 'vue-license-keyboard'; import 'vue-license-keyboard/lib/vue-license-keyboard.css'; Vue.use(LicenseKeyboard);
//使用示例1： <el-input slot="query-4" v-model.trim="table.queryData.licenseNumber" placeholder="车牌号" > <template slot="prepend"> <LicenseKeyboard v-model="table.queryData.licenseNumber" title="软键盘" /> </template>
#也可以使用 @confirm="handleInput" 进行回调 methods:{ handleInput(value){ console.log('您输入的车牌为:',value); } }
//也可以使用 <LicenseKeyboard v-model="table.queryData.licenseNumber" title="软键盘" > //这里是你的自定义图标或者内容 </LicenseKeyboard>
#嵌入input使用 <Input type="text" v-model="peopleCar.hphm" > <template slot="prepend"> <LicenseKeyboard v-model="peopleCar.hphm" title="软键盘" /> </template> </Input>
六：viewerjs图片预览插件
可以参照：https://www.cnblogs.com/joeblackzqq/p/11569939.html //第一种使用实例 //安装依赖 npm install v-viewer --save //main.js内引用并注册调用 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' //初始化 Vue.use(Viewer, { defaultOptions: { button: true, navbar: true, title: false, toolbar: true } }); 可配置： Viewer.setDefaults({ Options: { "inline": true, "button": true, "navbar": true, "title": false, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" } }); //建议修改的样式 #upload-viewboxs div { width: 100%; } html .viewer-button { background: rgba(17, 97, 155, 0.8) !important; } <template> <div class="content"> <h1>Viewer图片预览插件</h1> <viewer :images="imgs"> <img v-for="src in imgs" :src="src.url" :key="src.title"> </viewer> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '图片1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '图片2' } ] } }, } </script>
第二种使用示例
第二种使用实例： 1、先安装依赖 npm install vue-photo-preview --save 2、main.js内引用并注册调用 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 3、代码中使用xxx.vue <template> <div class="content"> <section> <h1>preview图片预览插件</h1> <img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"> </section> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '图片1', preview: '1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '图片2', preview: '1' } ] } }, } </script> option配置请查看 http://photoswipe.com/documentation/options.html
第三种使用示例
第三种：vue-picture-preview使用介绍 1、先安装依赖 npm install vue-picture-preview --save 2、main.js内引用并注册调用 //main.js iimport vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview) 3、在根组件添加 lg-preview 组件的位置 <!-- APP.vue --> <div id="app"> <router-view></router-view> <lg-preview></lg-preview> </div> 4、代码中使用xxx.vue <template> <div class="content"> <h1>vuePicturePreview图片预览插件</h1> <img v-for="(img,index) in imgs" v-preview="img.url" :src="img.url" :alt="img.title" :key="index" preview-title-enable="true" preview-nav-enable="true"> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '图片1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '图片2' } ] } }, } </script>
七：vue使用scrollReveal滚动插件
//npm安装scrollReveal npm install scrollreveal //引入到组件中 import scrollReveal from ‘scrollreveal’; //在data中注册 data () { return { scrollReveal: scrollReveal() } } //项目中执行，自定义类名。 mounted() { this.scrollReveal.reveal('.reveal-top', { // 动画的时长 duration: 2000, // 延迟时间 delay: 500, // 动画开始的位置，'bottom', 'left', 'top', 'right' origin: 'top', // 回滚的时候是否再次触发动画 reset: false, // 在移动端是否使用动画 mobile: false, // 滚动的距离，单位可以用%，rem等 distance: '200px', // 其他可用的动画效果 opacity: 0.001, easing: 'linear', scale: 0.9, }); }, //将自定义的类名添加到html代码中 <ul> <li class="reveal-top"> <img src="http://g.hiphotos.baidu.com/image/pic/item/37d3d539b6003af37401eb21392ac65c1038b633.jpg" class="img"> </li> <li class="reveal-top"> <img src="http://g.hiphotos.baidu.com/image/pic/item/37d3d539b6003af37401eb21392ac65c1038b633.jpg" class="img"> </li> </ul>
八：vue 项目重点注意：
1.打包时的build里面的配置文件需要修改的地方： 在utils.js里面： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../',//打包新加 }) } else { return ['vue-style-loader'].concat(loaders) } 在webpack.prod.conf.js里面： output: { path: config.build.assetsRoot, publicPath:'./',//打包新加 filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, 2.在运行是需要修改config里面的配置： build对象下面 assetsPublicPath: "./", 3.mode模式 4.使用vue框架时，修改样式不生效，可以使用全局css样式修改（不适用scoped），也可以使用deep方式或者样式穿透（>>>）： 方式一: <style> .fuck { // ... } </style> 方式二: <style lang="scss" scoped> .select { width: 100px; /deep/ .el-input__inner { border: 0; color: #000; } } </style> 方式三: <style lang="scss" scoped> .select { width: 100px; >>> .el-input__inner{ border: 0; color: #000; } } </style> 5.在布局过程中高度不需要获取，当前页面高度可以用100vh表示，内部元素高度可以使用百分比。
九：vue PC端notify语音提示、浏览器标题滚动，闪屏效果插件
两种方式使用：
1.npm方式（有问题）： v2.x npm install @wcjiang/notify --save v1.x npm install title-notify --save import Notify from '@wcjiang/notify'; const notify = new Notify({ message: '有消息了。', // 标题 effect: 'flash', // flash | scroll 闪烁还是滚动 openurl:'https://github.com/jaywcjlove/iNotify', // 点击弹窗打开连接地址 onclick: () => { // 点击弹出的窗之行事件 console.log('---') }, // 可选播放声音 audio:{ // 可以使用数组传多种格式的声音文件 file: ['msg.mp4','msg.mp3','msg.wav'] // 下面也是可以的哦 // file: 'msg.mp4' }, // 标题闪烁，或者滚动速度 interval: 1000, // 可选，默认绿底白字的 Favicon updateFavicon:{ // favicon 字体颜色 textColor: '#fff', // 背景颜色，设置背景颜色透明，将值设置为“transparent” backgroundColor: '#2F9A00' }, // 可选chrome浏览器通知，默认不填写就是下面的内容 notification:{ title:'通知！', // 设置标题 icon:'', // 设置图标 icon 默认为 Favicon body:'您来了一条新消息', // 设置消息内容 } }); notify.player();
方式二（建议）： <script src="https://unpkg.com/@wcjiang/notify/dist/notify.min.js"></script>
在main.js中：
Vue.prototype.notify = new Notify({
message: "有消息了。", // 标题 effect: "scroll", // flash | scroll 闪烁还是滚动 openurl: "", // 点击弹窗打开连接地址 dir: "ltr", //它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）。 // 可选播放声音 audio: { // 可以使用数组传多种格式的声音文件 // file: ["msg.mp4", "msg.mp3", "msg.wav"], // 下面也是可以的哦 file: tipsVoice, }, // 标题闪烁，或者滚动速度 interval: 1000, // 可选，默认绿底白字的 Favicon updateFavicon: { // favicon 字体颜色 textColor: "#fff", // 背景颜色，设置背景颜色透明，将值设置为“transparent” backgroundColor: "#2F9A00", }, // 可选chrome浏览器通知，默认不填写就是下面的内容 notification: { title: "通知！", // 设置标题 icon: "", // 设置图标 icon 默认为 Favicon body: "您来了一条新消息", // 设置消息内容 }, }); notify .notify({ onclick: () => { // 点击弹出的窗执行事件 this.$router.push({ name: "HotelBookOrderList" }); }, onshow: function () { //当通知显示的时候被触发。 console.log("on show"); }, onerror: function () { //每当通知遇到错误时被触发。 console.log("on error"); }, onclose: function () { //当用户关闭通知时被触发。 console.log("on close"); }, }) // .player() .setFavicon(10) .setTitle("有新消息！");
浙公网安备 33010602011771号