随笔分类 -  vue基础

Vue项目的一些优化策略
摘要:Vue项目完成后就要从开发环境转成生产环境 一些第三方的包体积过大,导致生成js文件过于庞大,这是时候可以生成打包报告来查看项目中的问题 1.生成报告有两种方式,一种使用npm run build --report 2.另一种使用vue脚手架的ui可视化面板,在项目中输入vue ui 3.点击生产环 阅读全文

posted @ 2020-04-08 10:46 日暮途远i 阅读(564) 评论(0) 推荐(0)

vue中按需使用第三方插件
摘要:基于vue-cli3 1.安装element-ui 和按需加载插件 cnpm install element-ui babel-plugin-component --save-dev 2.添加配置,在根目录新建babelrc,需要重启服务 { "presets": [["es2015", { "mo 阅读全文

posted @ 2020-02-15 19:51 日暮途远i 阅读(1497) 评论(0) 推荐(0)

Vuex基础
摘要:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex的组成: State:数据仓库(数据的唯一来源,可以用来实例化存储全部数据) getter:用来获取数据 (用来获取的数据的方法,好比 阅读全文

posted @ 2019-12-30 15:18 日暮途远i 阅读(104) 评论(0) 推荐(0)

vue项目如何在手机上测试
摘要:在package.json中的dev属性中添加--host ip地址即可 访问方法: http://192.168.31.253:8080/#/seller 带二维码的浏览器手机直接扫描即可,不带二维码的浏览器 百度草料二维码直接把网址放进去生成二维码再扫描即可 当然这些前提需要主机和测试手机在同一 阅读全文

posted @ 2019-08-31 13:59 日暮途远i

vue中实现@2x和@3x图片加载,以及cssmap的使用方式
摘要:在前端开发中因为屏幕像素比的关系,经常要根据各种型号手机的dpi来加载不同分辨率的图片,来提高性能以及更好的展示 在vue开发中秉承组件化的开发原则,所有和该组件相关的图片应该和该组件在一个文件夹下,所以把这个组件全部相关的图片放入组件目录下,并按相同的规律命名文件 接下来定义一个mixin.les 阅读全文

posted @ 2019-08-28 17:42 日暮途远i

vue项目中使用vue-router
摘要:要使用vue-router,首先需要在项目根目录的package.json中添加依赖 接着使用npm install 下载对应的依赖包,当然也可以直接 npm install vue-router --save-dev 安装 引入vue-router 阅读全文

posted @ 2019-08-27 18:43 日暮途远i

使用Vue实现购物车功能
摘要:要实现的效果如图下 遍历循环data中购物车的数据渲染到页面上,产品的所有字段,购买的数量,以及单价 先遍历直接能用的数据: 接着对购物车产品数量表单进行双向数据绑定,给左右按钮加一个点击事件使用三元表达式判断当前产品数量进行累加或者递减 通过单价*数量绑定总金额: 接下来给产品列表,每一项添加一个 阅读全文

posted @ 2019-06-20 09:52 日暮途远i

vue项目中使用axios发送ajax
摘要:首先使用npm安装axios: 安装好后可以去package.json中查看相关依赖 在HOME.VUE中引入axios 在static目录下新建一个文件夹mock,在里面存放各种模拟数据 定义一个获取首页数据的方法,把获取到的数据打印出来 获取成功: 在本地测试的时候需要使用mock数据,但是在正 阅读全文

posted @ 2019-06-16 10:55 日暮途远i

在VUE的项目中使用字体图标以及Stylus
摘要:字体图标可以从阿里巴巴的矢量图标库里下载: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1 比方说我需要一个搜索图标,可以把其先添加到购物车 在项目里可以把添加过去的icon下载下来 下载 阅读全文

posted @ 2019-06-12 15:34 日暮途远i

Vue在使用组件中的一些需要记住的点
摘要:1.这样的写法会因为HTML的规则tbody里只能有tr,td标签而解析错误 正确的写法如下: 同理select下也只能有option,ul里只能有li,要使用组件也可以使用类似的方法 2.子组件需要绑定数据情况需要把数据作为一个函数返回 会报错: 正确写法: 3.使用ref可以获取到VUE实例下面 阅读全文

posted @ 2019-06-12 09:30 日暮途远i

Vue简易动画实现和使用animate.css库
摘要:简单使用动画方法: 使用keyframes动画帧 自定义Clss名字: 通过自定义CLASS可以方便的使用一些动画库,比如animate.css 在Vue中使用js动画库,在这里使用velocity这个js库 给多个元素添加动画: 给组件添加动画也一样 给列表添加动画过度效果,只需要把transit 阅读全文

posted @ 2019-06-11 13:04 日暮途远i

使用Vue.js进行数据绑定以及父子组件传值
摘要:最近准备快速复习一下Vue,做几个小DEMO来复习一下 写个todolist 使用v-model进行数据的双向绑定,当input里面的内容发生变化,vue实例里的inputValue也发生变化,同理当input.value发生变化时input的也会变化 给按钮绑定的点击事件添加上把input的内容添 阅读全文

posted @ 2019-05-30 18:10 日暮途远i 阅读(757) 评论(0) 推荐(0)