vue.js
文章平均质量分 56
vue实战项目记录,总结开发中遇到的问题。
南山小舍
这个作者很懒,什么都没留下…
展开
-
vue实现简单移动端电商项目
在这里简单介绍下自己做的简单版电商项目技术选型vue2.x,vue-router,axios,vuex,脚手架:vue-cli 3.0UI选型:cube-ui项目简介该项目是简易的前端移动端电商项目,涵盖了首页,商品列表页,搜索页面,购物车页面,个人中心页面。当前项目采用mock数据实现简单效果显示项目搭建使用的vue-cli3.0进行搭建项目,所需框架可按照上述的需求进行安装依赖附上项目的package.json{ "name": "jdshop", "version":原创 2021-08-25 14:16:14 · 1669 阅读 · 2 评论 -
vuex状态持久化保存,页面刷新保留
最近做的SPA项目用到了vuex,在项目的使用中遇到了一个问题就是当刷新网页后,保存在vuex实例store里的数据会丢失。在这里做个记录。一、产生原因JavaScript代码是运行在内存中的,代码运行时的所有变量,函数,都是保存在内存中的。刷新页面时,以前的内存被释放,重新加载代码,变量重新赋值。这些数据想要存储就必须存储在外部,这时浏览器提供的存储API localStorage,sessionStorage,IndexDB ,cookie就派上用途了。这些API可以将数据存储在硬盘上,做持久化原创 2021-05-24 16:35:17 · 1148 阅读 · 0 评论 -
简写Vue2&&Vue3.0实现原理
Vue2.x是通过 object.defineProperty来实现双向数据绑定的。以下是基本实现的小demohtml:<input type="" name="" id="text" onkeyup="show()"> <h1 id="showText"></h1>js:var obj = {};//首先定义一个空的对象var targetValue=document.getElementById('text');var showValue = do原创 2021-03-23 13:37:39 · 86 阅读 · 0 评论 -
vue前端设置跨域(跨端口)
前端项目访问接口是8080,后台项目提供接口是8081,这种跨端口的跨域问题,前端处理方案如下原创 2021-02-24 23:55:57 · 10284 阅读 · 2 评论 -
vue+echarts实现数据展示大屏
简单介绍一个数据展示大屏。适用于中小型项目展示,只做学习交流。技术栈前端:vue+echarts+axios+vue-router+less后台:node+koa2+websocket开发IDE:IDEA项目展示PS:图表使用数据均为自造数据,与任何应用或者数据均无关。项目展示效果:1、图表自动切换,图表不同类目切换效果2、大屏主题切换3、单独图表放大缩小效果开发准备一、前端项目的准备1.1. vue-cli 脚手架创建项目1.1.1 脚手架环境安装node install原创 2020-12-28 23:18:51 · 5078 阅读 · 9 评论 -
VUE+echarts实现省份,中国地图
总结下项目中vue项目引入echarts地图的实现过程及效果前提条件main.js 全局引入echartsimport 'echarts/map/js/china'import china from 'echarts/map/json/china.json'echarts.registerMap('china', china)Vue.prototype.$echarts = echarts省份地图文件具体实现在对应的页面实现效果<template> <div&g原创 2020-07-15 23:06:45 · 5686 阅读 · 12 评论 -
Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
问题出现场景 今天在vue中引入echarts时,运行报错 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】 ## 问题排查 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: var myChart = echarts.init(this.$refs.map)原创 2020-07-15 22:43:41 · 2747 阅读 · 0 评论 -
Vue.js实战之利用vue-router实现跳转页面
前言使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。在查看官网以及网上相关资料整理如下记录官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html这次的实例主要实现下图的效果:一、配置 Router用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装在这里插入代码片cnp原创 2020-07-21 00:53:27 · 993 阅读 · 0 评论