![](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-global2. npm install -g @vue/cli-init3. vue init webpack my-project4. 在my-project项目目录中 npm i element-ui -S5. 在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 · 454 阅读 · 0 评论 -
如何在vue项目中引入字体图标
第一步,进入阿里图标库,选择自己需要的图标第二步 选择之后不要点击下载,点击加入购物车第三步 点击右上角的购物车,然后点击添加至项目可以新建项目名称,第四步,然后点击红字复制代码,注(画红框的是引用字体图标时的名字)点击画框的地方,在新窗口打开,然后复制里面的内容在vue项目中这个文件中创建一个icon文件夹,然后创建一个iconfont.css,将之前复制的代码全部粘贴进去...转载 2019-04-13 20:36:46 · 7310 阅读 · 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 · 946 阅读 · 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-flexiblenpm install lib-flexible --s原创 2020-06-08 16:39:52 · 436 阅读 · 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 · 429 阅读 · 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 · 382 阅读 · 0 评论 -
vue-cli3+vant+vantRem完成移动端适配的问题
本文从如下链接转载:https://blog.csdn.net/qq_37942845/article/details/904447841、安装vue-cli3脚手架,不懂的去vue-cli官网npm install -g @vue/cli2、通过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-clivue init webpack your-Project-Namecd your-Project-Name npm installnpm run dev2.安装 npm i lib-flexible --save在项目入口文件 main.js 里 引入 lib-fle...原创 2019-08-22 17:53:46 · 1059 阅读 · 0 评论 -
Vue的slot-scope的场景
Vue的插槽slot,分为3种匿名插槽具名插槽作用域插槽匿名插槽代码如下1.父组件:菜单12.子组件这里是子组件具名插槽 有name属性子组件父组件作用域插槽 | 带数据的插槽 父组件对于这个数据可以多次使用,也可以赋予不同的样式父组件 这里是父组件 {...转载 2019-08-13 14:02:37 · 104 阅读 · 0 评论 -
vue实现九宫格大转盘抽奖
恭喜获得 {{ award.name }} <div id="rotary-table" class='margin-auto'> <div class="award " style='z-in...原创 2019-04-28 09:28:39 · 1509 阅读 · 0 评论 -
关于vue返回上个页面如何携带参数的方法
1,我们可以在项目中新建一个空实例对象,作为中央数据总线,用来传递和接收数据,具体如下新建一个文件夹eventListener文件夹在src中,然后新建js文件,命名为listener(可以随意命名)内容如下import Vue from ‘vue’var eventLIister = new Vue({});export default eventLIister2)在要传递数据的...原创 2019-04-04 11:43:12 · 12523 阅读 · 0 评论 -
如何在vue循环列表中实现点赞改变icon和字体颜色,不可取消点赞
1,在项目中将icon变成字体图标,如何引入的话可以百度一下2.页面操作代码如下原创 2019-04-13 19:58:57 · 3164 阅读 · 1 评论 -
如何使用router-link跳转时改变tab的颜色,
exact-active-class配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。 Router Link 1 Router Link 2active-class设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。 Router Link 1 Router Link 2注意这里 class 使用 active_clas...转载 2019-04-16 11:15:33 · 1894 阅读 · 0 评论 -
vue中router-link标签所必备了解属性
to表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。HomeHomeHomeHomeHomeUserRegisterreplace设置 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 · 1843 阅读 · 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 · 90 阅读 · 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 · 1783 阅读 · 0 评论 -
修改vux组件轮播图样式的问题
我是刚入门的前端小菜鸟,代码很low,做个笔记把1.将组件配置的小圆点隐藏,2,自己来写两个需要的小点,3,然后通过@on-index-change (currentIndex) 轮播 index 变化时触发的这个事件因为我这边是想做到scroll X的效果,所以没有采用自动轮播,里面的内容也是采用自行配制的,所以这边自定义一个index,通过它来判断从而改变小按钮的颜色,代码如下htm...原创 2019-03-20 23:40:03 · 1157 阅读 · 0 评论