从零出发

参考链接：https://mp.weixin.qq.com/s/RuY8dBghwOkf5nKdRugamA。vue3 + 高德 JS API 2.0。

vue项目中使用echarts一、使用场景在项目开发中，我们往往会遇到数据统计方面的需求，这时候为了直观的呈现数据，我们需要制作图表。此时，我们可以使用 echarts 来制作。二、使用步骤安装 echartsnpm install echarts --save在 main.js 中引入import echarts from "echarts";挂在到 Vue 实例上Vue.prototype.$echarts = echarts;DOM结构<div id

Vue开发精要之底部导航栏在我们日常开发中，尤其是移动端开发（H5、微信公众号、企业微信等）中，我们往往需要自己设计底部导航栏。或许，导航栏这种常见功能，大家都是司空见惯的，但是其中设计的知识点却是不少，本片文档将要介绍地步导航栏涉及的知识点与常用方法，共同学习，共同进步。一、导航切换HTML<!-- 占位容器 --><div class="placegolder-container"></div><!-- 底部导航栏 --><di

前端加密步骤1. 安装crypto-js插件npm install crypto-js2. 新建src/utils/aes.js文件import CryptoJS from 'crypto-js'export default { //加密 encrypt(word, keyStr){ keyStr = keyStr ? keyStr : 'zaqxswcde123vfr4'; var key = CryptoJS.enc.Utf8.parse(keyStr);

Vant UI + Vue + Cli3.0 + Rem移动端项目搭建1. 创建vue项目创建项目vue create vant-demo引入less (通过vue ui 可视化页面安装依赖插件）vue ui2. 引入vant uinpm i vant -S3. 按需引入3-1. 安装babel 插件npm i babel-plugin-import -D温馨提示：在使用自动按需引入的时候，在使用相关组件的时候，需要在maim.js中一一引入，如下：import

vue公众号开发–二维码生成在H5项目中，我们往往会需要生成二维码，其实二维码的生成很简单，具体的步骤如下：1、安装依赖qrcodejs2npm install qrcodejs2 -S2、引入使用import QRCode from "qrcodejs2";3、html结构<div class="code-ontainer column-between-center"...

Vue中 path + query 传参的坑一、概述在我们使用Vue中 path + query 方式传参的时候，这里存在一些坑或者说是现象（参数类型因为刷新而变化），记录一下，供大家学习。二、使用场景我们在使用Vue中 path + query 方式传参的时候，可以使用参数中的某一个作为区分新增与编辑的标识。就我的个人习惯而言，我通常会传参数0为新增，具体的非0参数为编辑（后端中主键是...

Vue开发精要之底部导航栏在我们日常开发中，尤其是移动端开发（H5、微信公众号、企业微信等）中，我们往往需要自己设计底部导航栏。或许，导航栏这种常见功能，大家都是司空见惯的，但是其中设计的知识点却是不少，本片文档将要介绍地步导航栏涉及的知识点与常用方法，共同学习，共同进步。一、导航切换HTML<!-- 占位容器 --><div class="placegolde...

Vue中使用计时器实时刷新页面数据1. 需求说明在前端开发中，往往会遇到页面需要实时刷新数据的情况，给用户最新的数据展示。2. 逻辑分析如果需要数据实时更新，我们自然是需要使用定时器，不断的调用接口数据，会相对的消耗内存。3. 代码示例data(){ return { intervalId:null }},methods:{ // 定时刷新...

vue cli 3 打包部署到服务器上出现net::ERR_ABORTED 404 (Not Found)问题解决解决方法：配置vue.config.js如下：module.exports = { publicPath: "./"}注意：具体配置请参考官网教程 https://cli.vuejs.org/zh/config/#vue-config-jspublicPath...

目录1. vue-cli3关闭es6语法检查2.no-dupe-keys 语法检查报错3. iview admin中项目名修改4. vue-cli3 跨域配置在我们编码的时候，接触新的东西，往往会遇见一些小小的问题，令人头疼。1. vue-cli3关闭es6语法检查方法：在 vue.config.js 中，设置 lintOnSave: false；2.no-du...

问题描述： 在使用vue的时候，我们因为改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，需要刷新才可以解决；但是，在实际项目中，这样的情况肯定是不允许出现的。错误告警如下："NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before……问题分析： ...

iView基础学习-基础路由一、基础知识梳理（1）router-link和router-view组件（2）路由配置A、动态路由（组件复用）B、嵌套路由（嵌套组件）C、命名路由（name路由跳转）D、命名视图（根据name显示对应的组件）（3）JS路由操作（4）重定向与别名二、router-link和router-view组件 &lt;div id="...

Vue-Cli3.0创建项目一、基础知识（1）使用Vue UI创建、管理项目（2）项目结构目录整理（3）初始文件添加（4）基本配置讲解（5）跨域配置二、使用Vue UI创建、管理项目1、首先安装vue-cli3.02、终端运行vue uiVue UI界面介绍Projects：表示vue项目Create：表示创建vue项目Import：表示...

Vue文本闪烁问题一、问题描述代码示例：&lt;div id="app"&gt; &lt;span&gt;{{user.userName}}&lt;/span&gt;&lt;/div&gt;页面显示：{{user.userName}}问题详情：在加载页面的时候，刚开始我们会看到  {{user.userName}}  ，而后才可以被绑定的数据所替换，影响用户的...

项目打包上线1、在项目终端中运行以下命令npm run build2、此后，项目会增加dist文件夹，该目录代码就是最终要上线的代码。3、复制dist文件夹，交于后台开发人员，将代码放到后端的服务器上。4、放置在后端的根目录下，也可以放置在指定的目录下。如果要放置在指定的目录下，我们需要在前端的config/index.js文件中做如下配置：build: { i...

vue项目接口的联调与真机测试vue项目接口的联调当前端的代码编写完毕，后端的接口也已经也编写完毕的时候，我们此时便需要进行接口联调，将模拟的数据替换为真实的后端接口。vue项目中进行接口联调的步骤：1、删除之前的模拟数据，即static/mock下的所有json文件。2、修改config/index.js中的proxyTable内容，重启项目。 proxyTa...

递归组件什么是递归组件？组件自身去调用组件自身。代码示例DetailList.vue(子组件-递归组件)&lt;template&gt; &lt;div&gt; &lt;div class="item" v-for="(item,index) of list" :key="index"&gt; &lt;div class="item

解绑全局事件在项目中，我们往往会遇到全局事件的绑定，但是可能只是某一个页面，如果不进行解绑，将会出现各种各样的bug，所以对全局事件进行解绑，很有必要。 实例分析在项目中，我们在detail/components/Header组件对全局对象window进行了事件绑定，当切换到了其他其他页面的时候，仍然未解除绑定之前，每一个页面都会执行该事件绑定的方法，消耗内存，所以必须解绑全局事件。...

header组件渐隐渐现效果实现效果描述：在滚动页面的时候，页面向上滚动一定距离的时候，header组件的“景点详情”渐渐出现，原有的banner图上面的“返回”消失。页面向下滚动一定距离后，效果反之。如图：思路分析：实现上述效果，必须对window的scroll事件进行监听，动态绑定样式，如下：&lt;template&gt; &lt;div&gt; &lt...

公共组件拆分（画廊组件）vue项目开发中，有些组件不仅仅是一个页面需要使用，这时候我们可以将其抽离出来，作为一个公共组件。公共组件常用的目录结构如下（其中Gallery.vue就是公共组件）：Gallery.vue中的图片需要有轮播效果，故采用swiper，swiper中相关配置如下（详情参考swiper3官网）：在Gallery.vue组件中的轮播图片，需要使用v-for循环...

知识点1：背景渐变设置background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))知识点2：子级元素水平垂直居中的样式（.container表示父级元素）.container display flex flex-direction column justify-cont...

动态路由与路由传值router-link相关知识vue中可以使用&lt;router-link&gt;&lt;/router-link&gt;实现路由跳转，vue中&lt;router-link&gt;&lt;/router-link&gt;将来会被渲染成a标签，且有默认样式。&lt;router-link&gt;&lt;/router-link&gt;带有tag属性，可以设置将来渲染...

element-ui后台管理系统学习-vue项目创建与配置笔记1、项目的创建与配置npm install -g @vue/clivue create my-appcd my-appnpm run serve2、配置vue.comfig.jsmodule.exports = { lintOnSave: false}备注：可以使用vue ui进行界面可视化配置...

vue-router安装第一步、安装npm install vue-router --save第二步、创建src/router.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes:[]})第三步、在main...

利用vue-cli搭建项目步骤准备步骤包括1、安装node.js，运行 node -v 检查版本，运行 npm -v 检查版本；2、安装webpack，运行 npm install webpack -g 运行 webpack -v 检查版本第一步：全局安装vue-cli做法：在终端运行 npm insall --global vue-cli第二步：在终端输入 cd空格，并将新建的文件夹（将来保存工...

Vue路由传参的3种形式在列表向详情页面跳转，而后在详情页面查看列表的详情信息，此时设计路由传参，vue中有3种传参形式，介绍如下：<div class="action-btn" @click="viewDetails(item.id)">查看详情</div>一、path形式methods：{ insurance(id) { //直接调用$rou...

线上的Git与本地的Git的关联，便需要公钥。设置公钥之后，便可以进行无密码地代码上传与下载。具体步骤如下：1、进入码云（https://gitee.com），点击“设置”，选择“SSH公钥”，生成公钥，将对应的公钥字符串填入即可。2、如果没有公钥，点击上图中的“怎样生成公钥”。在已经安装好GIt的前提下，在左面右键，点击“Git Bash Here”。运行以下命令，...

第1步：新建common/util.js文件，用于排序的工具函数。export default { // sku排列算法 cartesianProductOf() { return Array.prototype.reduce.call(arguments,function(a, b) { var ret = []; a.forEach(function(a) { ...

在页面很复杂的时候，我们可以进行页面组件的抽离，简化页面的复杂度。具体实例如下：第1步：新建子组件src/compinents/shop/create/base-create.vue<template> <el-form ref="form" label-width="80px"> <el-form-item label="商品名称"> ...

第1步：安装npm install vuex --save第2步：新建src/store/index.js文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state:{ }, mutations:{ }...

element-ui中封装了表格组件，方便进行数据展示，除了基本的数据展示外，单元格内可能需要一些布局，这个时候我们就是需要使用自定义模版来实现功能，数据的配置如下：表头的配置及自定义模版配置如下：<!-- 表格数据 --><el-table border class="mt-3" :data="tableData[tabI].list" style="width...

在不同的页面中，会有很多公共的页面在不同的父页面中出现，但是又不尽相同。这个时候我们可以多个组件，但是最优秀的方式是我们可以封装一个组件，然后使用插槽动态改变一些又区别的地方。举例如下：为了解决这中情况，我们通常可以抽离成一个组件，在不同的布局部分使用插槽，要动态的控制布局。button-search.vue子组件<template> <div> ...

页面中的列表组件抽离，例如：将页面中循环的li标签，处理成组件，方便管理与维护，具体的相关代码如下：album-item子组件<template> <li class="list-group-item list-group-item-action d-flex align-items-center" style="cursor:pointer;" ...

在开发中，我们会经常遇到新增和修改两种不同的情况，但是他们往往又有类似的逻辑。此时，我们使用一套代码进行封装，在调用相同的函数，完成2种不同的逻辑处理，开发实例如下：需求说明：在进行相册管理的时候，我们会有两种处理方式：新建相册与编辑相册。一、修改部分html <ul class="list-group list-group-flush"&g...

在vue组件化开发项目中，Echarts的使用是很频繁的，但是具体是怎么使用呢？下面做一下简单的介绍：第1步：安装Echartsnpm install echarts --save第2步：设置指定的容器，用于显示图标信息<!-- 统计图容器 --><div ref="myChart" style="width: 100%;height: 270px;"&gt...

在vue中对于需要处理的数据，我们通常会使用过滤器filters，但是如果这个过滤器，我们可能在很多地方都会使用，这个时候，我们可以使用mixins，举例如下：新建文件common.js，实现的是数字转化为字符串的功能。export default{ filters: { valueToString(value) { return value....

使用keep-alive优化网页代码在运行项后时，打开控制台的Network-XHR，点击城市切换，而后点击返回到首页，我们发现index.json请求了两次，在产生路由切换的时候，ajax请求都会重新进行请求，严重影响网页性能。如果可以发起一次请求就好了。解决方法：用&lt;keep-alive&gt;&lt;/keep-alive&gt;包裹&lt;router-view /&gt...

vue中localStorage的使用在原有的项目中，需要缓存效果。h5中新增了localstorage，可以用于缓存。代码修改如下：store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);let defaultCity = '北京';try { if (localStorage.c...

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自定义过滤器&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/