(一)添加依赖模块 在package.json文件中添加vant模块的依赖,如: // package.json { "dependencies": { "vant": "^2.1.6" } } (二)配置语言资源文件 1.目录结构如下: 本测试工程的代码目录是这样的:在src文件夹中创建一个lang文件夹,在lang文件夹中分别创建index.js文件.zh_cn.js文件和en_us.js文件. 2.zh_cn.js和en_us.js资源文件

其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 慕课网demo的  git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 因为上篇文章:使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.v

1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>my-first-

第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断(当前图片安装的是2.2.3版本,如果想安装更高或者其他可以更改版本号) 然后在命令行窗口中输入指令,即可完成安装 npm install 第二步:更改webpack.base.conf.js文件 在文件指定位置添加代码 var webpack = require('webpac

我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为什么调用:this.$refs.audioRef.play()方法不能播放音乐? 回答:ios? 如果是ios的话有限制.媒体的播放操作需要放在交互事件的回调函数里才能生效.

1.首先配置路由, import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: require('../components/home.vue'), children: [ { path: 'user', name: 'user', component: requir

如果是刚配置好的全局变量需要 重新启动一下vue才能通过proccess.env.xxx 获取到 如果想在html中使用 需要在data中声明一个变量 然后在vue生命周期中 将process.env.xxx 赋值给这个变量 例如我在 .env.dev 文件中刚配置了一个 上传文件 的url // 测试环境标记 package.json用 VUE_APP_MODE = 'dev' NODE_ENV = 'development' // 测试环境 url请求路径 VUE_APP_URL = 'ht

转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是vue1.0是可以的 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: vue2.0丢弃了: $index 和 $key 新数组语法如下: 解决后: 结果:

前言 再一次vue2.0的开发中,遇到这样的一个问题,使用less与处理器,封装了一套关于项目的主题,但是使用的时候,main.js中引入后依然不能直接使用定义的@theme-bg等less定义的颜色,经过查阅后,我么需要进行一些配置,百度上找了很多方法,但是都有一些问题,这里经过实践总结,总结在这,以此记录自己的开发点击 配置前的准备 npm install less less-loader -s   百度上很多方法说需要配置webpack.base.conf.js(建议省略) { test

1.自己的github建一个项目. 2.本地vue2.0项目初始化. 安装node.js,检查node版(node -v). 安装webpack(npm install webpack -g),检查webpack版本.(webpage -v). 安装vue-cli脚手架(npm install vue-cli -g),检查版本.(vue -V). 接下来用vue-cli构建项目 vue init webpack myProject 3.将项目关联git地址,首次提交代码. 新建一个文件夹名为(v

goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可以上下滚动. good.vue: 为了兼容性问题呢,设置flex之后还设置了宽度,使得在不兼容flex的浏览器也能有80px的宽: 外壳就是这样了: 开始填内容了 同样的,我们还是利用vue-resource这个技术去拿到数据,获取goods数据: goods需要用data去绑定,因为后面需要用到g

header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为

组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯,我们可以在ESLint进行设置,如下: 回到入口js文件main.js,为了好看,我们给它加上分号: 不过这是就会报错了: 所以要到eslintrc.js去设置(上面对应可以去官网查看怎么配置),使它接受这样的编码方式. 现在的App.vue如下: 然后我们编写组件来替换那三个区块. 创建header组件 将

eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未定义. 原因: 1:要验证的DOM,还没有加载出来. 2:有可能this.$refs[ruleForm].validate() 方式不识别.需要使用: this.$refs.ruleForm.validate(); 解决方法 1: 要验证的DOM,还没有加载出来. this.ticketDialog

github链接 借鉴吾记APP,使用 vue2.0+vue-router+vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp 负责处理静态资源打包.压缩,欢迎打赏star!!! 安利一下 吾记前端构建流程 本地环境准备 安装node: * https://nodejs.org/en/download/ ("node": ">=6.0",对应需要升级node-sass,不然使用不了!) 配

1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie 然后一路回车 接着 进入项目目录 cd vue-movie 然后安装项目依赖包 cnpm install 没安装cnpm的先执行这个命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 接着 npm run dev 看到

new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount('#app') render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来 vue.2.0的渲染过程: 1.首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果. 2

Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el:

前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_eleme,欢迎Star. ratings seller 一.评论组件-ratings 评论组件主要分为三块 评分信息-overview 评论选择-ratingselect 评论详细信息 评分信息部分 左侧评分 布局Dom <div class="ratings-content">

vue2.0中  怎么引用less? 第一步: 安装less依赖, npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", } 现在基本上已经安装完成了,然后在使用的时候在style标签里加上lang=”less”里面

vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已经被<router-link>组件替代了 <router-link>组件支持用户在具有路由功能的应用中点击导航.通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css