vue
前端小李
这个作者很懒,什么都没留下…
展开
-
vue 3.x中 非父子组件之间的传值
在vue3.x版本中,非父子组件之间的传值需要借助第三方模块儿mitt来实现下载安装mitt模块儿npm i --save mitt2.创建一个js模块儿(bus.js)// 引入mitt模块儿import mitt from 'mitt'// 创建bus实例const bus=mitt();//导出bus实例export default bus;分别在子组件中导入bus模块儿控制台输出bus实例,发现其是一个对象使用emit属性发送自定义事件,on属性监听自定义原创 2022-01-04 19:10:25 · 918 阅读 · 1 评论 -
vue项目中使用h5+
创建一个plus.js文件let plusExtends = (fn)=>{ if(window.plus){ fn(); }else{ document.addEventListener('plusready', fn, false) }}export default plusExtends在main.js中引入并挂在到vue原型上;import plusExtends from './plus.js'Vue.prototype.$pl原创 2021-12-22 22:10:17 · 1574 阅读 · 1 评论 -
vue脚手架中使用vantui
1.下载安装vant-ui# Vue 2 项目,安装 Vant 2:npm i vant -S2.自动按需引入组件 (推荐)# 安装插件npm i babel-plugin-import -D// 可以在 babel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true原创 2021-08-27 09:37:03 · 433 阅读 · 0 评论 -
webpack 打包 html js
1.创建项目安装webpack 依赖新建一个demo文件,cmd进去(首先要安装 Node.js, Node.js 自带了软件包管理器 npm)依次执行,npm init -y,生成package.json文件npm install webpack -g 全局安装webpacknpm install webpack --save-dev 项目中安装成功以后构建如下的文件建构,index.html:one.js:main.js:3.打包html,js。打包html需要使原创 2020-08-10 16:23:01 · 615 阅读 · 0 评论 -
vue项目中使用H5+
安装muinpm i vue-awesome-mui在main.js 文件中引入import Mui from 'vue-awesome-mui';Vue.use(Mui);需要用到H5Plus 的地方首先需要:methods:{// 扩展API准备完成后要执行的操作 plusReady () { var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview },}created () {//原创 2020-05-29 17:35:36 · 6283 阅读 · 2 评论 -
vue cli3.0使用axios跨域请求
1.下载依赖vue add axios2.根目录下新建vue.config.js 配置跨域代理 proxy: { '/api': { target: 'https://yg.icbcyct.com/',//对应自己的接口 changeOrigin: true, ws:...原创 2020-03-20 09:31:13 · 865 阅读 · 0 评论 -
vue cli3.0 引入 element ui
1.引入vue add elementHow do you want to import Element? -->选择 Import on demand (关键)Choose the locale you want to load–>选择 zh-CN2.回车后,系统会自动配置引入babel.config.jsmain.jssrc\plugins\element.jsAp...原创 2020-03-19 15:10:05 · 370 阅读 · 0 评论 -
vue cli3.0 打包并在本地查看时页面空白问题
解决办法:执行下面命令:npm install http-server -g然后在dist文件下执行:http-server直接打开上面的网址访问就可以了。原创 2020-03-19 14:45:28 · 856 阅读 · 0 评论 -
Vue: 解决打包后element-ui图标字体不显示的问题
在build/utils.js下找到if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-lo...原创 2019-12-19 17:41:33 · 1618 阅读 · 0 评论 -
elementui把上传的图片转为base64
使用组件,然后on-change绑定一个方法来获取文件信息,auto-upload设置为false即可 <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false"> <el-button size="small" type="p...原创 2019-10-25 09:24:32 · 1023 阅读 · 0 评论 -
vue监听手机物理健
在index.html页面中引入mui.js<script type='text/javascript' src='./static/mui.min.js'></script>添加js代码mui.init({ keyEventBind: { backbutton: true //关闭back按键监听 }});// //首页返回键...原创 2019-09-17 15:50:18 · 229 阅读 · 0 评论 -
vue开发App监听 手机物理键
// BBBB.vuemounted(){ // 如果支持 popstate 一般移动端都支持了 if (window.history && window.history.pushState) { // 往历史记录里面添加一条新的当前页面的url history.pushState(null, null, document.URL); // 给 p...原创 2019-07-24 22:42:24 · 318 阅读 · 0 评论 -
vue路由过渡动画效果
template:<template> <div id="app"> <transition :name="transitionName"> <router-view class="Router" /> </transition> </div></template>...原创 2019-05-31 10:50:05 · 716 阅读 · 0 评论 -
vue打包后唱出隐藏变省略号失效问题。
源代码overflow: hidden; white-space: nowrap; text-overflow: ellipsis;解决代码 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*! autoprefixer: off */ -webk...原创 2019-05-31 08:54:36 · 160 阅读 · 0 评论 -
vue开发 Element UI 的使用
1、npm安装elementuinpm i element-ui -S2、引入 Element在 main.js 中写入以下内容:import Vue from 'vue';import { Button } from 'element-ui';Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };Vue.use(But...原创 2019-02-23 17:53:10 · 263 阅读 · 0 评论 -
vue 开发App监听手机 返回键返回上级路由以及退出
vue 开发App监听手机 返回键返回上级路由以及退出一、mui进行手机物理键的监听首先安装 vue-awesome-muinpm i vue-awesome-mui二、在main.js注册vue-awesome-muiimport Mui from "vue-awesome-mui"Vue.use(Mui)三、在index.html中监听手机返回键 <script>...原创 2019-02-19 00:24:19 · 2339 阅读 · 7 评论 -
vue-router 守卫
1、全局前置守卫可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等...原创 2019-02-28 15:05:48 · 100 阅读 · 0 评论 -
Vue UI组件库
Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中,通过GitHub上根据star数量、文档丰...原创 2019-02-25 09:39:34 · 250 阅读 · 0 评论 -
vue前端设置操作超时退出登陆
废话不多说,直接上代码 mounted() { var that = this //设置超时退出 var lastTime = new Date().getTime(); var currentTime = new Date().getTime(); var timeOut = 10 * 60 * 1000; //设置超时时间:...原创 2019-03-06 15:43:43 · 7632 阅读 · 0 评论 -
vue打包后背景图片不显示问题
打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可。原创 2019-03-09 20:28:16 · 740 阅读 · 0 评论 -
APP开发合作流程
原创 2019-03-08 10:15:54 · 618 阅读 · 0 评论 -
vue请求本地数据
1、创建json文件建议在static文件夹下创建2、在需要请求的页面引入json文件3、下载请求数据模块儿,可以根据情况选择这里我用axios模块儿4、到config文件夹下的index.js文件里配置Api proxyTable: { '/api': { // 生产环境地址 // tar...原创 2019-03-29 16:35:20 · 1385 阅读 · 0 评论 -
移动端取消页面缩放
只需要加一句代码<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />解决的话麻烦点个赞!!!!!!原创 2019-04-04 16:27:33 · 435 阅读 · 0 评论 -
vue快速搭建后台管理系统两个ui库
Avue:https://avue.top/Avuex:https://avuex.avue.top/原创 2019-04-23 09:58:02 · 1746 阅读 · 0 评论 -
vue rem 适配移动端
1.下载lib-flexiblenpm i lib-flexible --save2.在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3.安装px2rem-loadernpm install px2rem-loader4.配置px2rem-loader在build文件中找到util.js,将px2rem-loader添加...原创 2019-04-29 15:57:43 · 278 阅读 · 0 评论 -
vue开发APP切换页面动画过度效果
实现问题1.如何判断切换路由时是前进还是后退2.每次切换时向左向右切换动画如何实现实现原理1.我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.import VueRouter from 'vue-router'import Home from '../components/home/home'im...原创 2019-02-17 23:18:52 · 1795 阅读 · 0 评论