06 2021 档案
摘要：需求: 按照人口数量密集度,颜色由浅到深展示 实现: 基于现有的Vue3.0+4.5.13Cli框架,安装Echarts npm install echarts@4.9.0 --save 安装成功后,就可以直接使用了 <template> <div class="about"> <div ref="
阅读全文
摘要：Axios 功能特点 在浏览器中发送XHR请求 在Node.js中发送http请求 支持 Promise API 拦截请求和响应 支持多种请求方式 axios(config) axios.request(config) axios.get(url[,config]) axios.delete(url
阅读全文
摘要：modules import Vue from 'vue' // 导入vuex import Vuex from 'vuex' import {INCR} from "./type"; // 通过vue安装vuex Vue.use(Vuex) /** * 创建store * @type {Store
阅读全文
摘要：actions 异步修改状态信息,比如Ajax import Vue from 'vue' // 导入vuex import Vuex from 'vuex' import {INCR} from "./type"; // 通过vue安装vuex Vue.use(Vuex) /** * 创建stor
阅读全文
摘要：抽取方法为常量形式 import Vue from 'vue' // 导入vuex import Vuex from 'vuex' import {INCR} from "./type"; // 通过vue安装vuex Vue.use(Vuex) /** * 创建store * @type {Sto
阅读全文
摘要：getters 相当于组件中的计算属性,用于计算state中的数据返回计算后的值的 函数的第一个参数是 state 第二个参数是 getters可以通过这个调用getters中的其他函数 如果想要传递参数 那么需要使用闭包 return funcation(参数) 定义getters import
阅读全文
摘要：mutations 通过创建store中的mutations字段 定义方法,方法第一个参数就是 state 然后调用方法修改 调用 this.$store.commit('方法名') 定义函数 import Vue from 'vue' // 导入vuex import Vuex from 'vue
阅读全文
摘要：安装 npm install vuex --save 使用 在目录中新建文件夹store,在里面新建index.js import Vue from 'vue' // 导入vuex import Vuex from 'vuex' // 通过vue安装vuex Vue.use(Vuex) /** *
阅读全文
摘要：keep-alive 用于缓存页面路由,让Vue在跳转路由的时候不销毁组件 直接将<keep-alive>标签,包裹<router-view>即可 使用之后,可以在组件中回调两个生命周期钩子函数 activated和deactivated activated在路由激活的时候调用,deactivate
阅读全文
摘要：导航守卫 需要先定义路由,然后通过路由对象调用 import Vue from 'vue' // 导入路由 import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' // import home
阅读全文
摘要：传递参数 传递参数的主要两种类型:params和query params 配置路由格式:/router/:id 传递的方式:在path后面跟上对应的值 传递后形成的路劲:/router/123./router/abc query的类型 配置路由格式:/router,也就是普通配置 传递的方式:对象中
阅读全文
摘要：嵌套路由 实现嵌套路由有两个步骤 创建对应的子组件,并在路由映射中配置对应的子路由 组件内部使用router-view 标签渲染 创建组件 homeMessage.vue <template> <div> <h2>消息1</h2> <h2>消息2</h2> <h2>消息3</h2> </div> <
阅读全文
摘要：路由懒加载 为什么需要懒加载,应为Webpack在打包之后全部放入app.xxx.js中,当项目文件越来越大,就会导致前端的初始加载越来越慢,但是有些功能并不是客户一上来就要使用的,所以并不需要加载,而且加载慢会影响客户的体验效果 所以需要懒加载,在使用确切的功能时才加载 通过写法控制 ES6 懒加
阅读全文
摘要：动态路由 创建User.vue <template> <div> <h2>this is {{userId}}!</h2> </div> </template> <script> export default { name: "User", computed:{ userId(){ // 获取传递的
阅读全文
摘要：Router-link 详解 <router-link> 的属性。 to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home
阅读全文
摘要：使用Vue-router 创建组件 About.vue <template> <div> <h2>this is about!</h2> </div> </template> <script> export default { name: "About" } </script> <style sco
阅读全文
摘要：安装Vue-router 因为我们采用的是Webpack工程,所以直接采用Npm安装 npm install vue-router --save 工程集成Vue-router 安装完成后在Package.json中查看 1:导入路由对象并通过Vue.use加载 2:创建路由实例,并传入路由映射配置
阅读全文
摘要：Vue项目管理器 vue ui 在全局安装完成vue cli后 可以执行Vue ui启动Vue项目管理器 通过http://localhost:8081访问 可以通过Vue项目管理器管理Vue项目 作者：彼岸舞 时间：2021\06\28 内容关于：VUE 本文属于作者原创,未经允许,禁止转发
阅读全文
摘要：Cli 4.x/3.x 初始化项目 vue create [项目名称] 选择手动的 通过空格控制是否选中 只选择Choose Vue version 和 Babel 敲击回车继续 选择Vue js版本,选择2.x,这个是vuejs版本不是cli的版本,cli的版本在创建的时候就决定了 将Babel
阅读全文
摘要：Cli 2.x 初始化项目 vue init webpack [项目名称] 运行的时候报错了 vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFOUND github.com 解决 创建项目时，运行
阅读全文
摘要：全局安装cli-init npm install @vue/cli-init -g 执行安装 C:\Users\ext.zhangyugen1>npm install @vue/cli-init -g npm WARN deprecated vue-cli@2.9.6: This package h
阅读全文
摘要：全局安装 cli npm install @vue/cli -g 执行安装 C:\Users\ext.zhangyugen1>npm install @vue/cli -g npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install jo
阅读全文
摘要：Cnpm(淘宝镜像) 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install [name] 作者：彼岸舞 时间：2021\06\28 内容关于：VUE 本文属于作者原创,未经允许,禁止转发
阅读全文
摘要：我想这个是每个Java开发人员的烦恼,如果允许IDEA破解还好,主要实现公司不允许使用破解软件,所以你就会需要使用到这款插件了,不然每次都需要卸载重新安装 IDE Eval Reset 在IDEA中Plugins中添加地址 安装即可 在Help中追下面找到Eval Reset 点击 可以点击一次手动
阅读全文
摘要：在点击label的时候不取消复选框的状态 实现 将change事件改为click事件 <div class="grid-content bg-purple"> <div class="grid-content bg-purple"> <el-checkbox-group v-model="areas
阅读全文
摘要：webpack提供了一个可选的本地开发服务器,这个本地服务器是基于Nodejs搭建的,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改代码后的结果 不过他是一个单独的模块,在webpack中使用需要安装 npm install --save-dev webpack-dev-
阅读全文
摘要：JS打包压缩插件 在项目发布之前,我们必然需要对js等文件进行压缩处理 这里我们就对打包的JS进行压缩 我们使用 一个第三方插件uglifyjs-webpack-plugin,并且版本号指定1.1.1.,和cli2保持一致 npm install uglifyjs-webpack-plugin@1.
阅读全文
摘要：打包html文件的插件 目前我们的index.html一致是在项目的根目录下的 我们知道,在真实发布项目的时候,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index,html,那么打包的js等文件也就没有意义 所以我们需要将index.HTML文件也打包到dist文件夹中,这个时候
阅读全文
摘要：版权插件 都知道一般开源项目都是有自己的版权协议的比如vue 打包出来的文件都是携带自己的版权声明的,归属于谁在什么时间,谁写的,协议是什么 我们也可以写一个自己的版权声明[捂脸] 这个插件是内置的不需要单独安装 修改webpack.config.js // 需要从node依赖中引入 需要添加依赖环
阅读全文
摘要：plugin的使用 plugin是什么 plugin是插件的意思,通常是用于对某个现有的架构进行扩展 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等 loader和plugin的区别 loader主要用于转换某些类型的模块,他是一个转换器 plugin是插件
阅读全文
摘要：组件分离代码 删除test.js 修改index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div>
阅读全文
摘要：webpack中配置Vue 项目中,我们会使用VueJS开发,而且会以特殊的文件来组织vue的组件 所以,下面学习一下如何在webpack中集成vue NPM安装Vue simpleloader拷贝一份为simplevue npm install vue --save 因为在运行时也需要依赖vue,
阅读全文
摘要：ES6语法转ES5 在默认的情况下,ES6的语法在打包过后还是ES6的语法,但是这样会存在一个问题,那就是有的浏览器会不支持,所以需要将ES6转为ES5 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 执行一下
阅读全文
摘要：处理图片加载:url-loader 使用时需要设置option:(limit:文件大小)如果小于设置的文件大小直接使用url-loader加载,会将图片转换为base64,如果是大于设置的大小,会调用file-loader进行加载 如果需要对图片进行按照自己要求的格式进行命名的话,就需要在optio
阅读全文
摘要：拷贝一份项目重新命名为simpleloader(拷贝过程会慢,应为其中存在module依赖) 在这个目录结构中,我将main.js从JS文件夹中提取了出来,放到了src目录下,应为一般关于主文件一般都是和文件夹同一级的,比如index.html,其他的就是改了一下webpack.config.js中
阅读全文
摘要：什么是loader loader是webpack中一个非常核心的概念 webpack用来做什么呢 在我们之前的实例中,我们主要是用webpack来处理我们写的JS代码,并且webpack会自动处理JS之间相关联的依赖 但是,在开发中我们不仅仅有基本的JS代码处理,我们也需要加载CSS,图片,也包括一
阅读全文
摘要：webpack的配置 webpack.config.js 上面执行的webpack命令很长,那么有没有什么简化的方式呢,有,那就是配置文件,默认名称为webpack.config.js 拷贝webpack起步中的目录结构及其文件和内容,从新命名一个文件夹,并在其中新建webpack.config.j
阅读全文
摘要：webpack的起步 基本使用 新建目录结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入打包后的js文件--> <script src="d
阅读全文
摘要：安装webpack(3.6.0) 先安装3.6.0,因为在之后学习Vuecli的时候从cli2开始学,学3的时候在升级webpack的版本 全局安装 npm install webpack@3.6.0 -g 在CMD中运行,等待安装完成即可 查看版本 webpack -version 可以看到是3.
阅读全文
摘要：依赖环境 依赖于Node环境,需要在Node环境上跑,在安装Node的时候,会自动安装npm包管理工具,用于管理Node的依赖环境 NodeJs安装 官网:http://nodejs.cn/ 下载 确保版本大于8.0 安装 双击安装包 点击下一步 点击我同意,然后点击下一步 选择安装位置,然后点击下
阅读全文
摘要：认识webpack 什么是webpack webpack是一个现代的JavaScript应用的静态模块打包工具 核心就是模块和打包,因为本身浏览器是不支持我们写的一些.vue.sass等文件的,需要通过工具将这些文件打包成浏览器认识的文件,才可以执行 作者：彼岸舞 时间：2021\06\07 内容关
阅读全文
摘要：插槽(slot) 组件的插槽 组件的插槽也是为了让我们封装的组件更加具有扩展性 让使用者可以决定组件内部的一些内容到底展示什么 插槽的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t
阅读全文
摘要：阶段案例 案例效果 新建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <h1>需求:
阅读全文
摘要：父子组件的访问方式 有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件 父组件访问子组件:使用$children或者$refs 子组件访问父组件:使用$parent 子组件访问根组件:使用$root 父组件访问子组件[$children] <!DOCTYPE html>
阅读全文
摘要：父子组件的通信 为什么需要通信 在开发中往往一些数据确实需要下面的子组件进行展示 比如在一个页面中,我们从服务器请求了很多的数据,其中一部分数据并不是页面的大组件来展示的,而是需要下面的子组件进行展示,这个时候肯定不会让子组件再次调用网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)
阅读全文
摘要：组件数据的存放 组件无法直接访问页面的对象数据 组件对象也有自己的data属性(也可以有Methods方法) 只是这个data属性必须是一个函数 而且这个函数返回一个对象,对象内部保存着数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
阅读全文
摘要：组件分离写法 使用Script标签分离组件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script>
阅读全文
摘要：语法糖优化组件注册 /** * 直接使用对象,省略掉使用Vue.extend */ Vue.component('my-cpn',{ // 在ES6中可以使用 `` 标识字符串 并且可以换行不需要拼接 template: ` <div> <h2>this is cpn</h2> <span>this
阅读全文
摘要：父组件与子组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script> </head> <body>
阅读全文
摘要：局部组件是通过components属性注册的,只能在当前注册的实例范围内调用 注册局部组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../.
阅读全文
摘要：全局组件是通过Vue.component在Vue实例声明之前注册的,可以在全局任意地方调用,只要是属于Vue接管的界面 注册全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
阅读全文
摘要：注册组件的步骤 组件的使用分为三个步骤 创建组件构造器 注册组件 使用组件 作者：彼岸舞 时间：2021\06\02 内容关于：VUE 本文属于作者原创,未经允许,禁止转发
阅读全文
摘要：Vue组件化思想 组件化是Vue.js中的重要思想 它提供了一种抽象,让我们可以出一个个独立可复用的小组件来构造我们的应用 任何的应用都会被抽象成一颗组件树 组件化思想的应用 有了组件化思想,我们在开发中就可以运用了 尽可能的将页面拆分成一个个小的,可复用的组件 这样让我们的代码更加方便组织和管理,
阅读全文
