VSCode中格式化vue文件时，单引号变双引号，自动加分号的解决办法
首先需要在根目录下创建.prettierrc.json文件文件中写：{ "singleQuote": true, "semi": false}这个.prettierrc.json文件我尝试过在vue当前项目的根目录下创建发现创建不了，百度了下可以用cmd命令行创建，我用的是windows系统(win10)。具体步骤：打开vue当前项目的根目录 > 在该文件夹路径上输入cmd，用命令行创建 > 输入echo >.prettierrc.json > 回车 >
vue只有package-lock.json，没有package.json文件的时候
一、前言当博主把项目中的package.json与package-lock.json文件，还有node_moudle文件删除，然后执行npm init之后，发现竟然没有package.json，真是奇怪最后百度发现：当package.json与package-lock.json都不存在，执行"npm install"时，node会重新生成package-lock.json文件，然后把node_modules中的模块信息全部记入package-lock.json文件，但不会生成package.json文
一、学习Vue项目去哪儿网首页开发
俗话说“好记性不如烂笔头”，在这里记录一下vue项目学习的笔记，下面是去哪儿网App首页开发的总结和感受。文章目录vue项目中引入Sass创建iconfont项目Home.vueHeader.vue使用webpack对项目进行维护vue项目中引入Sass现在比较习惯用scss，所以安装Sass依赖包，使用以下命令行：npm install [email protected] --savenpm install node-sass --save执行完毕后，找到build文件夹，在文件夹里面的we
二、Vue项目中使用vue-awesome-swiper实现首页轮播图
文章目录在码云上创建一个分支安装Swiper插件新建Swiper.vue组件在Home.vue导入Swiper组件推送到码云合并分支Github文档：https://github.com/surmon-china/vue-awesome-swiper官方文档：https://www.swiper.com.cn/在码云上创建一个分支然后输入命令行git pull和git checkout index-swipper在该分支上进行轮播图功能的开发。命令行npm run dev启动下项目。安装Swi
三、Vue项目去哪儿网首页图标区域布局及逻辑实现
文章目录在码云创建index-icons分支创建Icons.vue组件在Home.vue中引用Icons.vue组件在码云创建index-icons分支然后在根目录下cmd，分别输入命令行如下进行图标区域功能的开发git pullgit checkout index-icons创建Icons.vue组件在Home.vue中引用Icons.vue组件...
四、Vue项目去哪儿网首页推荐和周末游组件并使用Axios获取数据
文章目录在码云创建index-recommended分支在Home.vue中引用Recommend.vue组件和Weekend.vue组件Recommend.vue组件Weekend.vue组件ajax请求在码云创建index-recommended分支然后在根目录下cmd，输入命令行git pullgit checkout index-recommendedgit statusnpm run dev在Home.vue中引用Recommend.vue组件和Weekend.vue组件Rec
五、Vue项目去哪儿网城市选择页面Header
文章目录码云创建city-router分支在router > index.js中配置路由在pages文件夹下新建city文件夹Header.vue推送到分支，合并到主分支码云创建city-router分支然后在根目录下cmd，输入命令行git pullgit checkout city-routernpm run dev在router > index.js中配置路由在pages文件夹下新建city文件夹city文件夹下创建City.vue路由配置好后，希望在首页点击北京时
六、Vue项目去哪儿网 - 城市选择页列表布局、Better-scoll的使用及字母表布局
文章目录码云创建city-search分支City.vue中引入List.vue组件List.vue写页面样式使用Better-scoll使列表滚动字母表布局先上Better-scoll插件 gitHub地址：https://github.com/ustbhuangyi/better-scroll码云创建city-search分支输入命令行git pullgit checkout city-listnpm run devCity.vue中引入List.vue组件List.vue写页面样式
七、Vue项目去哪儿网 - 城市选择页用Axios请求接口进行数据渲染
文章目录码云创建city-ajax分支加入本地模拟接口city.jsonCity.vueList.vue遇到bug，列表不滚动Alphabet.vue码云创建city-ajax分支输入命令行git pullgit checkout city-ajaxnpm run dev加入本地模拟接口city.jsonCity.vue先引入Axiosimport axios from 'axios'<template> <div> <city-heade
八、Vue项目城市选择页面实现兄弟组件间联动及代码优化方案
文章目录Alphabet.vue 子传父City.vue 父传子List.vue watch监听字母表组件进行滚动事件监听Alphabet.vue 子传父当点击某个字母时，这个事件方法会接收到一个e的事件对象子传父 调用this.$emit向外触发事件，change是事件名，e.target.innerText是事件携带的内容<template> <ul class="list"> <li class="item" v-for
九、Vue项目城市选择页面搜索功能实现
文章目录为input框绑定v-model双向数据绑定增加样式，引入better-scroll插件可上下滑动解决input框里没内容，列表还在的情况搜索结果问题输入框没值时不显示，有值才显示优化代码，计算属性，尽量不要在模板里有过多的逻辑为input框绑定v-model双向数据绑定去父组件City.vue中父传子，把cityies传给子组件Search.vue，子组件进行接收数据监听keyWord，由于这部分经常用到，为了节约性能，用到函数节流，先在data中增加timer：null初步效果如下
十、Vue项目使用Vuex实现数据共享
之前做了首页和城市选择页面，现在需要点击城市选择页面，选择城市，首页的城市跟着一起变，这就需要首页和城市选择页面有一些关联，需要用到Vuex。Vuex是Vue官方推荐我们使用的数据框架，在Vue大型项目开发中Vue只能承担视图层的主要内容，涉及到大量数据之间传递时，需要一个数据框架进行辅助，就是Vuex上图的大概意思是：State是公用数据，组件可直接调用；组件改数据必须先调用Actions做一些异步处理或批量操作，然后Actions再去调用Mutations，只有通过Mutations，最后才可改
十一、Vuex使用localStorage、mapState和keep-alive
默认首页的城市为上海，比如想搜索桂林当用户切换后，刷新页面还是会重新变为上海，这里就需要一个缓存了，做到本地存储，把用户切换后的数据存下来。文章目录使用localstorage记住用户的选择（缓存）mapState的使用（常用）使用keep-alive优化网页性能使用localstorage记住用户的选择（缓存）localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage在浏览器的隐私模式下面是不可读取的。import Vue from
vue报错：Trailing spaces not allowed
1. 问题：在vue项目开发中，想去使用npm run dev跑一下项目看效果，但执行完，报了一大堆代码格式错误，之前也有这种情况，就根据提示去一项项改，今天真的是忍不了了，去百度了一下。之所以会出现这一顿格式错误是因为项目是用vue-cli搭建的，项目初始化时会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，选择了Y，所以只能需要手动来关闭，直接选择N，就直接关闭了。2. 解决方案：要在项目目录中找到名为 config 的文件夹下的index.js
十二、Vue项目 - 详情页动态路由、banner布局和公用图片画廊组件拆分
我是一个小菜鸡啊小菜鸡，但是小菜鸡要继续学新东西啊，新的一周加油吧！！！文章目录配置动态路由banner.vue公用图片画廊组件拆分src下新建common文件夹banner.vue中使用gallary组件Gallary.vueGallary.vue和Banner.vue最外面大div分别添加点击事件配置动态路由新建detail文件夹 ,在Detail.vue中写一下基本内容找到home文件夹下的Recommend.vue组件，需要在li标签上添加router-link声明式导航携带参数跳转页面
vue项目package.json与package-lock.json作用及区别
原文出处：https://www.cnblogs.com/yingaxiang/p/12932068.htmlpackage.json文件介绍和使用运行项目，命令行: npm run dev“dependencies” 运行依赖，需引入页面使用“devDependencies” 开发依赖(生产环境使用)，只是开发阶段需要我们每次新建一个项目的时候会发现在项目中会有这么俩个相似的文件，并且一个里边东西很多一个里边的东西很简洁，那么他们到底有什么区别与联系。npm5之前的版本，是不会生
十三、Vue项目 - 实现Header渐隐渐现效果
文章目录新建header.vue组件逻辑部分渐隐渐现效果新建header.vue组件引入到父组件Detail.vue中header.vue通过router-link标签设置to属性为地址，实现点击返回首页tag标签设为div，就有了div的属性<template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class=
十四、Vue项目 - 对全局事件的解绑（非常重要 ！！！）
问题：上一篇是在详情页的Header.vue组件中做的渐隐渐现效果中用到了window.addEventListener(‘scroll’, this.handleScroll)但没有及时对全局事件进行解绑，就会对代码造成大量bug。现在去首页滑动也能执行，这是因为window是对全局对象进行绑定，并不是绑定在组件中解决：当我们对组件用了keep-alive之后就会多出一个 deactivated() 生命周期钩子函数：页面即将被隐藏或即将被替换成新的页面时执行...
十五、Vue项目中递归组件实现多级列表
这次使用递归组件主要实现下面的效果：文章目录递归组件概念子组件List.vue引入到父组件Detail.vue中List.vue组件中创建递归组件递归组件概念概念：简单来说就是在组件中内使用组件本身，不过它们只能通过 name 属性来做这件事。以前一直不太清楚组件里都有一个name属性是干嘛用的，其实name很大的一个用处就是使用递归组件，假设一个组件要用自己的时候，那么就可以通过自己的名字来使用自己。子组件List.vue引入到父组件Detail.vue中后端给我们的接口数据往往是类似这
十六、Vue项目 - 页面详情页使用Ajax获取动态数据(主要解决出现的三个问题）
之前详情页里的数据是我自己添加上的，现在需要用ajax获取动态数据文章目录Detail.vue父组件请求axios子组件根据接口返回的数据进行数据修改问题一问题二问题三Detail.vue父组件请求axios这里一定要先引入axios因为详情页是从首页入口点进来的，所以路由都会不一样，传递的参数去浏览器中切换到Vue模式浏览，如下图所示，请求接口时需要携带参数id，获取参数方法应该是this.$route.params.idDetail.vue<template> <di
今日推荐
周排行