![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
一腔&孤勇
这个作者很懒,什么都没留下…
展开
-
vue移动音乐app开发笔记 二. 搭建项目骨架,配置路由与开发首页界面
文章目录项目目录开发首页界面新建首页文件修改App.vue效果图项目目录开发首页界面新建首页文件在pages中新建一个index的文件夹首先首页界面主要分4个部分,所以我们在components中新建4个vue组件,并在index.vue中使用修改App.vue我们常在开发中碰到这个问题:设计师给我的图纸是一个界面占满整个屏幕,但是我们的界面总是能左右稍微滑动一点我们可以在a...原创 2020-02-01 15:41:08 · 258 阅读 · 0 评论 -
vue移动音乐app开发笔记 一. 搭建git环境以及新建vue移动端项目的准备工作
文章目录搭建git环境一. 在GitHub搭建远程代码仓库二. 创建git文件夹三. 克隆GitHub代码四. 将本地项目与远程仓库建立连接五.测试远程连接创建开发分支创建移动端的vue工程一.创建vue项目二.引入第三方样式文件三.引入第三方js文件搭建git环境一. 在GitHub搭建远程代码仓库创建成功二. 创建git文件夹在相应路径下输入以下命令git init复制...原创 2020-01-31 15:37:54 · 400 阅读 · 0 评论 -
vue踩坑笔记 十二.vue中引入vuex
文章目录安装依赖引入vuex样例代码安装依赖npm i vuex -s引入vuex在src目录下新建一个store目录,分别创建以下文件项目比较简单,建一个state文件,一个mutations文件就行,如果项目规模大还可以按需创建getters文件,actions文件等mutations.jsexport default { changeCity (state, val) ...原创 2020-01-19 10:58:31 · 673 阅读 · 0 评论 -
vue踩坑笔记 十一.vue中引入滑块组件
文章目录效果图安装依赖常见用法完整代码效果图安装依赖npm install better-scroll -S常见用法BetterScroll 最常见的应用场景是列表滚动,我们来看一下它的 html 结构。<div class="wrapper"> <ul class="content"> <li>...</li> ...原创 2020-01-18 13:37:25 · 372 阅读 · 0 评论 -
vue踩坑笔记 十.使用vue进行数据mock
文章目录安装依赖建立mock文件mock样例代码全局引用mock在组件中使用常见用法安装依赖npm install --save-dev mockjsnpm install --save axios建立mock文件src目录下创建mock文件夹,创建index.js文件mock样例代码import Mock from 'mockjs' const data={ "i...原创 2020-01-17 20:31:46 · 279 阅读 · 0 评论 -
vue踩坑笔记 九.移动端vue坑
移动端vue页面禁止移动/滚动当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,代码如下<template> <div @touchmove.prevent> <h3 class="main-bk">{{ title }}</h3> <p>您好!{{provider}}:</p&...原创 2020-01-17 20:05:57 · 363 阅读 · 0 评论 -
vue踩坑笔记 八.新建一个移动端vue项目的准备工作
文章目录搭建git环境创建vue项目引入第三方样式文件引入第三方js文件提交项目在github上查看该项目搭建git环境1.运行git init命令生成一个git环境2.去githuab上新建一个项目3.运行 git clone命令,将github上的代码克隆下来4.将github上的项目的ssh密钥链接复制下来运行下面命令将本地仓库与远程仓库建立连接git remote ad...原创 2020-01-16 10:58:04 · 207 阅读 · 0 评论 -
vue踩坑笔记 七.使用ip地址访问本机运行的vue项目
文章目录一.确保本机tomocat 或者apache运行正常二.获取本机ip地址进入dos界面获取本机ip地址三.输入ip地址加端口号四.运行错误或拒绝访问(很关键)五.重启项目一.确保本机tomocat 或者apache运行正常在浏览器使用localhost或者127.0.0.1访问相关资源,保证web网络服务器正常二.获取本机ip地址进入dos界面win+R输入cmd获取本机i...原创 2019-11-30 12:10:17 · 472 阅读 · 0 评论 -
vue踩坑笔记 六.less的安装与使用
文章目录下载依赖全局配置组件中使用完整示例下载依赖npm install less less-loader --save全局配置修改build/webpack.base.conf.js文件module: { rules: [ { test: /\.scss$/, loaders: ["style", "css", "sass","style-...原创 2019-11-12 17:27:17 · 308 阅读 · 0 评论 -
vue 踩坑笔记 五.图片懒加载
文章目录1.下载插件2.全局配置3.组件中使用4.天坑1.**循环一定不能放图片上!!!!**2.图片显示有问题时注意require3.占位图片加载有问题时1.下载插件npm install vue-lazyload --save2.全局配置在main.js中进行配置import VueLazyload from ‘vue-lazyload’Vue.use(VueLazylo...原创 2019-11-12 17:05:41 · 187 阅读 · 0 评论 -
vue踩坑笔记 四.封装网络请求(axios)
文章目录1.多网络操作进行封装2.将网络请求的域名以及公共部分封装至配置文件3.对每一个页面的请求进行整理4.设置所有页面的网络请求的出口5.在全局对api进行设置6.实际运用1.多网络操作进行封装新建一个http文件,将所有与网络有关的操作都放在此文件中(单一指责)示例代码/** * 封装的axios的工具类 * 负责请求的公共配置,以及请求拦截,响应拦截,错误处理,网络不佳处理...原创 2019-11-12 14:19:05 · 540 阅读 · 0 评论 -
vue踩坑笔记 三. vue使用axios进行跨域
文章目录下载axios引用axios修改node配置进行跨域访问下载axiosnpm install axios --save引用axios在需要axios请求的组件进行引用import axios from ‘axios’修改node配置proxyTable: { "需要进行跨域访问时访问的域名":{ target:"目标域名", changeO...原创 2019-11-12 14:04:44 · 184 阅读 · 0 评论 -
vue 踩坑笔记 二.vue引入阿里矢量图库的矢量图
文章目录1. 进入阿里矢量图官网2.新建项目3.找到自己需要的矢量图4.在需要的组件内进行引入5.在放置矢量图7.修改html(class中粘贴矢量图代码,一定要加iconfont !!!!)1. 进入阿里矢量图官网阿里适量图库2.新建项目新建一个自己的项目3.找到自己需要的矢量图将该图标存入某个项目内src/assets目录下新建一个目录,将复制的文件粘贴进去...原创 2019-11-12 13:53:13 · 1286 阅读 · 0 评论 -
vue 踩坑笔记 一.在vue中使用swiper生成轮播图效果
文章目录1. 下载swiper依赖2. 查看官网文档3. 引入swiper4. 引入swiper样式(一定要引)5.在data中对swiper进行配置6.配置模板文件7.完整代码1. 下载swiper依赖npm install vue-awesome-swiper --save2. 查看官网文档swipper官网3. 引入swiperimport { swiper, swiperSli...原创 2019-11-12 12:04:07 · 635 阅读 · 0 评论 -
es6 入坑笔记(一)---let,const,解构,字符串模板
let 全面取代var大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内坑:for(let i =0;i < 10; i++){ let i=20; }这个例子存在父子作用域,即(){}各为一个作用域,所以i可以重复letconst即静态变量值不允许改变,常用于声明为一...原创 2018-11-07 23:20:21 · 139 阅读 · 0 评论 -
es6 入坑笔记(二)---函数扩展,箭头函数,扩展运算符...
函数扩展1.函数可以有默认值 function demo( a = 10,b ){}2.函数可以使用解构 function demo( { a = 0,b = 0 } = {} ){}3.函数参数最后可以多一个逗号function demo(a,b,c,){}坑:1.与for等父子域不同function(a){ let a=10;}会报错,因为...原创 2018-11-07 23:21:00 · 107 阅读 · 0 评论 -
es6 入坑笔记(三)---数组,对象扩展
数组扩展循环arr.foreach(){//回调函数function(val,index,arr){//val:当前读取到的数组的值,index:当前读取道德数组的索引,arr:当前的数组名}} 映射arr.map同foreach,但是map每读取一条信息都会有一个返回值,从而可以整理数据结构let newArr=arr.map(){//回调函数...原创 2018-11-07 23:21:41 · 86 阅读 · 0 评论 -
es6 入坑笔记(四)---异步处理
promise用于js的异步处理形式:1.申明一个promise的对象let p = new Promise(function(成功时的参数,失败时的参数){ if(。。。。){ 成功时的参数(成功时想传的值); }else{ 失败时的参数(失败时想传的值); }});调用then方法p.then(//第一个为成功时调用的回调函数(成功时想...原创 2018-11-07 23:22:57 · 123 阅读 · 0 评论 -
es6 入坑笔记(五)
Symbol主要用做key或私有变量,Symbol是唯一的不可重复的,也是一个单独的数据类型定义形式:let demo=Symbol("aaaa");1.Symbol不能使用new定义2.如果当作对象的key则该对象使用for in 循环时不能遍历出来 ...原创 2018-11-08 11:28:32 · 115 阅读 · 0 评论 -
vue入坑笔记
1.vue的地址的绑定时需要处理,不然地址会被视为一段字符串不会被解析出来解决办法:src: require('../images/leftico01.png')2.vue的具名路由的嵌套类似于这样的嵌套,你从a至b时虽然路由已经跳转,但是vue会视两个页面为同一个页面,不会将组件重新载入但是这样的嵌套则完全没有问题简而言之,就是兄弟关系则路由不能使用同一组件,但是...原创 2018-11-07 23:16:45 · 148 阅读 · 0 评论