![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue知识点
记录工作中遇到的容易忘记的点
weixin_43831302
这个作者很懒,什么都没留下…
展开
-
用vue-cli搭建一个项目配合element-ui做一个公司需要的后台管理系统
1.npm install -g @vue/cli || npm install -g @vue/cli-service-global 2. npm install -g @vue/cli-init 3. vue init webpack my-project 4. 在my-project项目目录中 npm i element-ui -S 5. 在main.js文件中放入以下代码 5-1)im...原创 2019-04-16 20:32:54 · 1044 阅读 · 0 评论 -
vue(2.x,3.0)配置跨域代理
导语:首先,每一个前端开发人员都应该知道同源策略,同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,所谓同源是指,域名,协议,端口相同。有一个不同时,都将请求不到资源,将无法“跨域”获取资源。 import Vue from ‘vue’ import axios from ‘axios’ import VueAxios from ‘vue-axios’ V...转载 2019-11-20 16:15:23 · 455 阅读 · 0 评论 -
如何在vue项目中引入字体图标
第一步,进入阿里图标库,选择自己需要的图标 第二步 选择之后不要点击下载,点击加入购物车 第三步 点击右上角的购物车,然后点击添加至项目可以新建项目名称, 第四步,然后点击红字复制代码,注(画红框的是引用字体图标时的名字) 点击画框的地方,在新窗口打开,然后复制里面的内容 在vue项目中这个文件中创建一个icon文件夹,然后创建一个iconfont.css,将之前复制的代码全部粘贴进去...转载 2019-04-13 20:36:46 · 7311 阅读 · 0 评论 -
vue-cli3.0配置不同的网址(根据不同的环境进行网址切换)
在生产环境和开发环境的时候,有些变量是不一样的,比如接口,打包的时候就需要切换, 所以配置下环境变量,通过不同命令行切换不同环境api等信息 (1)先在package.json文件中添加: "scripts": { "dev": "vue-cli-service serve --mode dev", "build": "vue-cli-service build --mode prd", }, 在运行后面加上 --mode 新增的文件后缀 (2-1)在项目目录下建立 .env.dev文原创 2020-06-17 11:30:43 · 947 阅读 · 0 评论 -
vue@cli3适配h5页面
1.在public里面的index.html添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/> 2.vue-cli3.0结合lib-flexible, px2rem 实现移动端适配。 第一部分:项目中引入 lib-flexible npm install lib-flexible --s原创 2020-06-08 16:39:52 · 438 阅读 · 0 评论 -
vscode快速建立代码片段
打开vscode编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我们输入vue,将代码ctrl+c 到vue-html.json { "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>...转载 2020-04-25 15:18:04 · 524 阅读 · 0 评论 -
icon-font引入到vue-cli3项目中
iconfont 的三种使用方式 Unicode 个人习惯在src目录下新建一个icon文件夹存放下载的样式文件 然后在src目录下新建style.css文件统一管理样式 @font-face { font-family: “iconfont”; src: url(’./icon/iconfont.eot’); /* IE9*/ src: url(’./icon/iconfont.eot#ief...转载 2019-08-26 21:22:41 · 430 阅读 · 0 评论 -
vue-cli3和vue2.0使用scss定义全局变量
1,可以新建一个文件夹style 新建main.scss 在这个文件里写入用的比较频繁的样式 如下 2.因为vue-cli3一些配置文件都是放在vue-config.js文件里面的 所以在vue-config.js文件写入(如果新建项目没有这个文件,就在根目录下新建这个文件) 然后就可以在全局使用我们定义的变量了 如果在写样式中遇到多个地方要使用相同的样式,可以利用scss的函数来将其提取出来...原创 2019-08-26 16:14:38 · 1690 阅读 · 0 评论 -
vue移动端项目手机预览
1.cmd 输入ipconfig 获取本机的ip地址 2.如果是vue-cli3搭建的项目 因为没有config文件夹,这边需在根目录新建一个 vue.config.js文件基本上所有的一些配制都在这里, 3.在这个文件里使用到 所有 webpack-dev-server 的选项都支持。注意: 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到...原创 2019-08-23 16:28:43 · 383 阅读 · 0 评论 -
vue-cli3+vant+vantRem完成移动端适配的问题
本文从如下链接转载:https://blog.csdn.net/qq_37942845/article/details/90444784 1、安装vue-cli3脚手架,不懂的去vue-cli官网 npm install -g @vue/cli 2、通过vue-cli3创建项目 vue create my-project 创建的过程有很多选项,我的常用选项: 简单介绍一下: a、Babel :转码...原创 2019-08-23 09:50:55 · 1136 阅读 · 0 评论 -
vue项目解决移动端适配的问题
1.这个操作是利用vue cli webpack 搭建的项目 步骤如下 npm install -g vue-cli vue init webpack your-Project-Name cd your-Project-Name npm install npm run dev 2.安装 npm i lib-flexible --save 在项目入口文件 main.js 里 引入 lib-fle...原创 2019-08-22 17:53:46 · 1059 阅读 · 0 评论 -
Vue的slot-scope的场景
Vue的插槽slot,分为3种 匿名插槽 具名插槽 作用域插槽 匿名插槽代码如下 1.父组件: 菜单1 2.子组件 这里是子组件 具名插槽 有name属性 子组件 父组件 作用域插槽 | 带数据的插槽 父组件对于这个数据可以多次使用,也可以赋予不同的样式 父组件 这里是父组件 {...转载 2019-08-13 14:02:37 · 105 阅读 · 0 评论 -
vue实现九宫格大转盘抽奖
恭喜获得 {{ award.name }} <div id="rotary-table" class='margin-auto'> <div class="award " style='z-in...原创 2019-04-28 09:28:39 · 1510 阅读 · 0 评论 -
关于vue返回上个页面如何携带参数的方法
1,我们可以在项目中新建一个空实例对象,作为中央数据总线,用来传递和接收数据,具体如下 新建一个文件夹 eventListener文件夹在src中,然后新建js文件,命名为listener(可以随意命名) 内容如下 import Vue from ‘vue’ var eventLIister = new Vue({}); export default eventLIister 2)在要传递数据的...原创 2019-04-04 11:43:12 · 12524 阅读 · 0 评论 -
如何在vue循环列表中实现点赞改变icon和字体颜色,不可取消点赞
1,在项目中将icon变成字体图标, 如何引入的话可以百度一下 2.页面操作代码如下原创 2019-04-13 19:58:57 · 3171 阅读 · 1 评论 -
如何使用router-link跳转时改变tab的颜色,
exact-active-class 配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。 Router Link 1 Router Link 2 active-class 设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。 Router Link 1 Router Link 2 注意这里 class 使用 active_clas...转载 2019-04-16 11:15:33 · 1897 阅读 · 0 评论 -
vue中router-link标签所必备了解属性
to 表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。 Home Home Home Home Home User Register replace 设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 hi...转载 2019-04-16 11:16:37 · 169 阅读 · 0 评论 -
路由跳转,判断是否登录
router.beforeEach((to, from, next) => { // 路由过滤,判断是否登录 当需要在某些页面进行判断是否登录时可以写在路由元中进行判断,如果项目必备必须登录才可以看,可已直接进行判断,无需写在路由元中 if (to.matched.some(record => record.meta.requireAuth)) { if (localStorage.l...转载 2019-04-16 11:19:16 · 1845 阅读 · 0 评论 -
Vue.js使用filter自定义过滤器对时间进行格式化(javascript原生写法)
一、自定义date.js /** 对Date的扩展,将 Date 转化为指定格式的String 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) eg: “yyyy-MM-dd hh:mm:ss.S” ==> 2006-07-0...转载 2019-04-16 11:43:21 · 541 阅读 · 0 评论 -
Vue中的样式绑定
Vue 中的样式绑定分为两种 class 以对象的形式,给对应的字段名指定 相应的类名 以数组的形式,往该数组中添加 想要设置 成为的类 style 以对象的形式,给这个对象设置CSS 样式,相当于 写CSS 样式一样 以数组的形式,直接往数组中增删 相应的样式 Vue中的样式绑定 <div id="app"> <div @click='han...转载 2019-04-16 11:44:06 · 91 阅读 · 0 评论 -
解决vue页面之间跳转,页面不是在顶部的问题
在项目的main.js中加入以下代码就可解决 scrollBehavior(to,from,savedPosition){ if(savedPosition){ return savedPosition; }else{ return {x:0,y:0} } }, 或者 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }...转载 2019-04-18 17:32:55 · 1784 阅读 · 0 评论 -
修改vux组件轮播图样式的问题
我是刚入门的前端小菜鸟,代码很low,做个笔记把 1.将组件配置的小圆点隐藏, 2,自己来写两个需要的小点, 3,然后通过@on-index-change (currentIndex) 轮播 index 变化时触发的这个事件 因为我这边是想做到scroll X的效果,所以没有采用自动轮播,里面的内容也是采用自行配制的,所以这边自定义一个index,通过它来判断从而改变小按钮的颜色,代码如下 htm...原创 2019-03-20 23:40:03 · 1157 阅读 · 0 评论