watch 监视模式里面有个独特的方法handler 注意要加上deep: true.deep为true时,当对象的key值改变时也监听 当值发生改变被watch监视到触发了事件 开始执行handler 把修改的值items放到封装好的函数save存储到浏览器本地存储 在data数据里面把items 默认读取浏览器的本地存储,fetch有做处理,如果没有值默认是一个空数组 localstorage get 和 set 的封装方法store.js 通过import Store from './st

在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边打包后就不会报路径问题了.(请用起服务的方法来打开打包后的index.html,如anywhere来打开index.html). 当然也可以用express方法,这个就不详说了. vue 构建项目vue-cli vue 构建项目遇到的问题 vue 构建项目 文件引入

1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue-cli脚手架,执行以下命令: $ npm install -g vue-cli 安装脚手架 $ vue init webpack demo 利用webpack生成一个模板,项目名是demo $ cd demo 进入到demo项目 $ npm install 安装依赖 $ npm run dev 运行

1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到. 解决办法: 改为  ‘./ ’这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找.再次打包,页面基本正常. 2.vue打包后CSS中引用的背景图片不显示问题  静态资源的引用有两种路径: 绝对路径:

1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue-axios 配置模板: import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 使用: Vue.axios.get(api).then((re

构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用webpack模板创建项目 vue init webpack my-project //进去新创建的文件夹 cd my-project //打开package.json 看scripts字段 //dev 可以使用npm run dev 或者 npm start 开启开发模式 //build 可以使用np

第一步: brew install nodejs(MAC机子下)  Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo chmod -R 777 /usr/local/lib/node_modules/ 第三步: npm install -g cnpm --registry= https://registry.npm.taobao.org(安装淘宝镜像/或者使用自己公司代理) 第四步: 安装webpackcnpm i

第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config.js,指定入口,输出文件 3.在main.js中写代码,App.vue中写代码 4.让我们的项目能运行App.vue 5.打包运行我们的项目 webpack--config webpack.develop.config.js ===>bundle.js 创建template.html 在里面导入bu

今天构建vue项目执行npm install初始化后报错 run `npm audit fix` to fix them, or `npm audit` for details 出现这问题控制台会有一系列提示,让你输入对应命令,所以我进行了如下命令操作: 1:首先安装模块依赖: npm install 2:如果出现以上提示,继续输入: (npm audit fix 含义: 检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再自己进行跟踪和修复.) npm audit fix 3:如果出

1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpack 安装的时候报了: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):npm WARN

1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpack 安装的时候报了: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):npm WARN

在webpack配置文件下改为 host:'0.0.0.0' 改为后启动跳转不到登录页面 需手动修改浏览器上的0.0.0.0:8080为自己ip加上:8080 就可以在别的电脑上进行访问了 举一反三: 严格说来,0.0.0.0已经不是一个真正意义上的IP地址了.它表示的是这样一个集合:所有不清楚的主机和目的网络.这里的“不清楚”是指在本机的路由 表里没有特定条目指明如何到达.对本机来说,它就是一个“收容所”,所有不认识的“三无”人员,一 律送进去.如果你在网络设置中设置了缺省网关,那么Windo

最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储,localStorage.sessionStorage.可以用来代替cookie的一部分存储功能,他比cookie存储量更大.比较实用. 两者用法类似.localStorage存储,如果不清除那么一直存在:sessionStorage是在一个会话级别上存在,如果会话关闭,那么就没了.顾名思义吧. 他

localStorage-cache本地存储的缓存管理 距离上次的组件开发有近三个月的时间了,最近一直在做一些杂事,无法静下心来写写代码,也是在学习emberjs,在emberjs中有一个很重要的东西 -- localstorage_adapter,本地存储适配器,利用它可以很方便的把数据保存在本地的localStorage中,但我今天要讲的,并不是ember,也不是适配器,我是个比较念旧的人,所以我对cookie很情有独钟,当然,cookie也会有各种问题,于是我就来改造下localStora

各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video> <video src="pr6.mp4" width="320" height="240"></video> 2.autoplay:是否自动播放 <video src="pr6.mp4" aut

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在客户端,服务器能够知道其中的信息. session保存在服务器,客户端不知道其中的信息: 一..h5之前,web本地存储都是由cookie完成,缺点:不适合大量数据存储2 与服务器的请求,速度慢,效率低. 二.h5提供了两种在客户端存储数据的新方法:1.localStorage:无时间限制,除非手工

当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于web应用程序一个很重要的原因是它的本地化存储得到了很好的支持.对于本地应用程序,操作系统会提供一个抽象层,用于存储和获取特定于应用程序的数据,这些数据可以存储于注册表.INI文件,或者其他什么地方,这取决于操作系统的实现,如果本地应用程序需要不单是键值对形式的本地存储,可以使用嵌入式数据库或其他很多种

用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localstorage是用于取代cookie的一些应用场景 cookie的大小只能是4KB且会跟在url的头中传输,locatlstorage的优势在于以下几点: 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小

首先需要明确的是:Vue.js 不支持 IE8 及其以下 IE 版本,一般用与移动端,基础:开启最高权限的DOS命令(否则会出现意外的错误提示)   注意:个人小推荐如果我们不知道如何才能开启最高权限的DOS命令,个人安利一个软件DISM++,功能主要清楚系统垃圾什么的,在小工具里会有个春哥附体  这样在弹出框里打cmd,唤出的命令提示符就是最高权限了,话不多说进入正题 1.安装node.js,检测版本node -v,还要检测包管理工具npm -v 这里需要说明下,因为在官网下载安装node.j