Vue相关
关注
分享
扫一扫
渐进式JavaScript 框架
Army-海军
致力于前端开发，不做此行专家不罢休
展开
-
用Vue-cli从头搭建项目
cli 顾名思义，脚手架的意思。通过一些命令行工具，帮你配置好项目开发运行环境，打包全过程，最后只关注你的逻辑代码部分。基于webpack.原创 2020-05-29 15:22:34 · 14713 阅读 · 25 评论 -
详解Eslint使用教程及注意事项（一）
包括安装，配置文件，解析器和指定环境原创 2020-05-27 13:41:55 · 16156 阅读 · 21 评论 -
详解Eslint使用教程及注意事项（三）
eslint的具体配置规则与解释（部分）这些规则与 JavaScript 代码中可能的错误或逻辑错误有关： for-direction 强制 “for” 循环中更新子句的计数器朝着正确的方向移动 getter-return 强制 getter 函数中出现return语句 no-async-promise-executor 禁止...原创 2020-05-27 15:23:54 · 15050 阅读 · 32 评论 -
详解Eslint使用教程及注意事项（二）
包括全局变量，配置插件、配置规则、内嵌注释代码禁用规则，扩展配置、忽略文件和目录原创 2020-05-27 15:18:04 · 16928 阅读 · 22 评论 -
Vuex中的mapGetters
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性语法是mapGetters(['language'，’token‘]) 参数是个数组，数组里是你想要映射的getters里的值import { mapGetters } from 'vuex';computed: { // 利用使用对象展开运算符将 getter 混入 computed...原创 2020-05-08 16:02:33 · 15208 阅读 · 16 评论 -
Vuex代码文件规划
https://blog.youkuaiyun.com/weixin_41229588/article/details/105991201上一篇文章续直接上图部分文件有省略。只需要看关键代码即可。index.js文件结构import Vue from 'vue';import Vuex from 'vuex';import message from './modules/mes...原创 2020-05-08 15:32:53 · 14598 阅读 · 10 评论 -
Vuex的初步使用详解
vuex 一般用来解决某些值，在不同的组件中都要用到，如果两个组件经过路由直达传参还好，一旦是跨了好几层路由之间传参，比如想要登录后的token,登录后的用户名。购物车的数量显示等，有些还要实时更新。不可能一直传来传去。这个时候使用Vuex。数据保存在state中，想要更改必须通过 Mutations里的方法才能更改。想要调用Mutations里的方法 必须在Actions 里用comm...原创 2020-05-08 11:54:46 · 14513 阅读 · 21 评论 -
VUE的混入mixin使用方法及用途
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。个人理解： 就是有很多组件需要同一个方法。同一个变量。做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用，方法也可用，写在周期函数的代码也会执行。写一个mess.js文件expor...原创 2020-05-08 10:34:40 · 15303 阅读 · 21 评论 -
vue子组件和父组件双向绑定的几种方案
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">&...原创 2020-04-16 15:36:06 · 15178 阅读 · 22 评论 -
使用vue-router在项目中的路由目录和文件管理和一些注意事项（较完美的方案）
直接看目录结构这里的文件名建议都是单个单词命名。看index.js文件import Vue from 'vue'import Router from 'vue-router'import home from './home'import items from './items';import user from './user';import order from '....原创 2020-04-11 15:20:57 · 21054 阅读 · 20 评论 -
Vue项目中定义过滤器（全局和单组件）
官网描述https://cn.vuejs.org/v2/guide/filters.htmlVue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部定义全局过滤器文件布局位置// 实现一个给所有数字小数部分都变成两位...原创 2020-04-11 14:53:38 · 15347 阅读 · 19 评论 -
在Vue项目中实现全局调用，js中调用组件，this,$方案调用
需求：首先能传参，想要在全局中调用组件，而且要在某些js文件内调用，还能在任意组件内像this.$router这种调用。组件内有很多功能，要能监听到组件内的不止两个的事件。开始：vue组件<template> <div class="container" > <div @click="sendTitle">题目</div&...原创 2020-04-10 15:33:31 · 28224 阅读 · 57 评论 -
axios针对后台只收form表单形式的post提交
现在普遍的前后端分离开发，用的都是这种Content-Type 为 application/json然而对于一些以前的java服务器，为求代码简单，规定传输的字符串数据格式为 application/x-www-form-urlencoded，所以 form 表单提交 和 $.ajax 都是默认 application/x-www-form-urlencoded请求长这个样子...原创 2020-04-09 15:01:39 · 15321 阅读 · 19 评论 -
Eslint更新在VSCode中无法保存的时候格式化代码
2020年新变化先说解决办法：在settings.json文件中加这个"editor.codeActionsOnSave": { "source.fixAll.eslint": true, }然后就可以了。把有这行的代码删掉// #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true,。然后再慢慢说...原创 2020-04-07 17:18:23 · 26248 阅读 · 24 评论 -
关于vue-router的历史模式和hash模式
首先了解下 window.location对象打开浏览器在控制台打印路由在未交由前端管理之前都是后台控制你请求不同的路径，后台就甩回不同的html页面回来作为回应。你请求a我就给你a,你请求不存在我就给你个404页面vue-router就是只改变视图，不请求页面。你看到的是假象。实际上请求的都是index.html。1、Hash模式：hash（#）是URL...原创 2020-04-07 15:38:57 · 15479 阅读 · 22 评论 -
vue-i18n中英文或者多语言切换的网站在vue项目中的合理布局结构
使用很简单，官网地址：http://kazupon.github.io/vue-i18n/zh/npm install vue-i18n --save新建一个文件夹。及其文件。如下图index.js文件import Vue from 'vue';import VueI18n from 'vue-i18n';// import { isInLanguage } from ...原创 2020-04-07 14:32:50 · 15280 阅读 · 20 评论 -
保留一份我比较喜欢的eslint配置
module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue/r...原创 2020-04-02 18:18:44 · 14668 阅读 · 22 评论 -
webstorm使用自动修正项目中的eslint代码格式
首先你得有这个文件 .eslintrc.js 这个是前提。至于写进packjson里的没研究过。打开webstorm mac下点击windows下点settings就不截图了然后设置完成后。在需要格式化的文件下右键点击 Fix Eslint Problems就能自动格式化对于一些空格啊，分号啊，引号啊，都是没有问题的但是明显语法错误还是得你从错误...原创 2020-04-02 17:45:15 · 17199 阅读 · 21 评论 -
axios调用多个服务器数据在一个vue-cli项目中，而且还要开发和线上不一样。
先了解这个 .env.development和 .env.production文件1，关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件 .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件2，关于内容 注意：属性名必须以VUE_A...原创 2020-04-02 17:22:47 · 15229 阅读 · 21 评论 -
在内网穿透访问Vue项目的时候出现了Invalid Host header时的解决方案
内网穿透工具:ngrok, 我用的是国内的sunny-ngrok. 使用非常简单, 根据官网操作就可以.nvalid Host header当启动了sunny-ngrok的客户端以后, 就这个用sunny-ngrok提供的域名, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问Vue项目. 但是如果出现 Invalid Host...原创 2020-02-14 18:06:51 · 15856 阅读 · 19 评论 -
vue开始第一谈---下载引入是真的入门
学习vue好久好久，但是也没空写个博客记录一下。从今开始每天一篇下载先进官网https://cn.vuejs.org/然后就是这个页面了。下载之后解压，找到dist文件夹找到vue.js和vue.min.js前者是为压缩版会有提示，后者用于线上版本体积小去除掉了所有的注释并且开启混淆压缩。功能是一样，学习的时候用vue.js把它复制出来引入页面。&l...原创 2019-06-10 20:06:45 · 15163 阅读 · 10 评论 -
Vue的语法(一)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> ...原创 2019-06-21 10:32:32 · 15052 阅读 · 20 评论 -
Vue父子组件之间传值
组件分两种，全局组件和局部组件全局组件这么写Vue.component("nav-bar",{ props:['navShow',"elecText","mainText","isIos"], // props这个里边的值是用来使用他的父组件给他传参数的.什么类型都可以传, // 但是对象和数组传过来,都是指向父组件的，所以如果你改变了这个组件内的的值,也会影响到父组件,这种事最好...原创 2019-06-21 13:43:26 · 15937 阅读 · 10 评论 -
vue父组件向子组件传对象，不实时更新解决
思路1：就是让利用v-if的重新渲染机制1.首先考虑的就是手动刷了，给组件加个v-if=”someShow“;2.在父组件添加如下方法;// 这是组件上写法 ：<my-component v-if="someShow"></my-component>// 下边写在父组件的methods里refesh:function(){ this.someShow...原创 2019-06-21 13:59:24 · 29360 阅读 · 28 评论 -
vue-i18n的使用,前端实现中英文切换
首先建个文件夹，结构是这样的，为了方便以后更改方便，强烈推荐的做法。这里的en.js和zh.js就是中英文文件了，你要加其他语言继续加几文件就行。代码结构为这样,中英文结构要一致，变量名也要一样，这个你懂的再看一下index.js这个文件负责的事情就是引入这两个文件，声明文件，最后暴露接口即可，主要是为了后期的其他js文件也能用到，我学习一向是先把代码弄上去，先实现，然后再去弄懂它...原创 2019-09-12 11:18:56 · 18343 阅读 · 21 评论 -
vue-cli3引入svg图标全过程以及遇到的坑
一、讲原理svg-sprite，和css-sprite有点像，就是先把所有的svg图放页面上，但是不现实，用的时候去取。这个时候去MDN补一下知识。Symbol这个不是es6里的那个新增的数据类型，而是SVG中的一个标签https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/symbol官方说法：symbol元素用来定义一个图形...原创 2019-09-22 16:10:32 · 20739 阅读 · 22 评论 -
vue项目使用axios封装请求或者其他类型请求封装
先看一个开源项目的写法，就非常符合需求了import axios from 'axios'import { Message, MessageBox } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst...原创 2019-09-22 17:08:05 · 16051 阅读 · 32 评论 -
vue使用vue-clipboard2 复制到粘贴板
npm地址https://www.npmjs.com/package/vue-clipboard2安装npm install --save vue-clipboard2import Vue from 'vue'import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)这样就可以全局使用了符合单文...原创 2019-09-22 17:20:05 · 16051 阅读 · 9 评论 -
vue中使用qrcodejs2生成二维码
npm地址https://www.npmjs.com/package/qrcodejs2安装npm install qrcodejs2 --save 官方给的文档非常简洁，所以用起来很简单看单文件中的写法，基本一致。<template> <div> <div id="qrcodeImg"></div> ...原创 2019-09-22 17:41:27 · 20300 阅读 · 13 评论 -
html2canvas实现截图功能遇到的坑。
应用版本："html2canvas": "^1.0.0-rc.3",要实现后的样子刚开始不知道会有那么多坑等着我。我慢慢的说来1.首先要构建弹出框和按钮图标等，引入svg图标时就遇到了坑，我另一篇博客有写。跨过了图标坑之后就是重点了。按常规思考，先去看了下html2canvas文档，发现，api很少，没问题，测试一下没问题。直接引入上手。实施方案： 首先生成二维码。排...原创 2019-09-30 09:49:07 · 27636 阅读 · 14 评论 -
require.context这个是webpack的知识（去看webpack文档吧）
这个api是webpack的知识这玩意的目的啊就是为了省事，通常我们可能会在多个页面require 同一个组件，数量少还行，多了的话就很蛮烦，维护起来也费劲。这个时候require.context 就排上用场了，一次性引入。 const req = require.context('../../icons/svg', false, /\.svg$/) const req...原创 2019-06-05 19:53:27 · 15383 阅读 · 21 评论