前端
JavaScript,ES6,Vue,Webpack
paopao_wu
这个作者很懒,什么都没留下…
展开
-
Docker 安装yapi服务
1. 安装mongodbmkdir -p ~/services/mongodb/data ~/services/mongodb/bakcd ~/services/mongodb#拉取镜像docker pull mongo:3.6cd ~/services/mongodb# 不用映射端口,因为是内部访问docker run --restart=always --name mongo -v /etc/localtime:/etc/localtime:ro -v $PWD/data:/data/d原创 2020-08-21 17:11:29 · 481 阅读 · 0 评论 -
14_使用vue-cli
1. 什么是 Vue CLI官方文档Vue CLI 是官方的一个 npm包,它是一个命令行工具。通过这个工具可以快速生成Vue项目。生成的项目基于webpack构建,并带有合理的默认配置npm install -g @vue/clinpm包全局安装后,就会得到一个 vue命令# 查看 vue cli 版本vue -V 2. 创建项目# 创建一个名称为 14_01_hello 的项目vue create 14_01_hello这里选择最后一项,手工选择特性:移动方向键,敲空格即原创 2020-08-21 17:06:38 · 119 阅读 · 0 评论 -
13_Vue_使用Vuex
1 .Vuex是什么 由于Vue是单向数据流,子组件内部不能直接修改从父级传递过来的数据,子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话,可以借助子组件 A 向父组件传值,父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。 但是这样会有一个问题,就是如果子组件 A 的父组件上面还有一层爷爷组件,或者还有更多祖父类型的层级,那么是不是会很麻烦。因此,我们会想到能不能我们将一个共有的数据存在一个特定的地方,用的时候自己去拿,这样就不需要一层层传值原创 2020-08-17 11:46:59 · 508 阅读 · 0 评论 -
12_Vue_Ajax请求与Mock
1. 使用axios发送ajax请求 在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种,它可以用在浏览器和 node.js 中1.1 安装axiosnpm i axios -S以下均来自官方文档1.2 axios配置项axios基本API为axios(config).then((response)=>{}).catch(()=>{})axios(config)原创 2020-08-13 10:55:38 · 341 阅读 · 0 评论 -
11_Vue路由
1. 什么是路由 访问一个web应用(或者网站),需要有一个URL,这个URL可以通过HTTP协议 POST或者GET或 PUT或DELETE到服务端,当服务端接收到这个请求地址之后,通过规则匹配URL,然后转发到后端应用程序中的某个方法(函数)调用上,方法(函数)调用完毕之后会生成HTML文本,随后HTML文本会响应到浏览器中,浏览器完成HTML渲染,最终就看到了一个完整的页面。 我们称这种将 URL转发到后端方法(函数)调用的过程叫做路由,匹配的规则集合就叫做路由表。1.1 后端路由原创 2020-08-10 14:50:53 · 172 阅读 · 0 评论 -
10_Vue插件
1. 插件有什么用通常,我们需要为Vue 添加一些全局的扩展功能,此时就可以使用插件来进行扩展。所谓全局:即不需要像组件,指令,过滤器那样,每次使用它之前都需要引入一次。对于插件只要在最开始引入一次,在任何组件就可以直接使用。(类似于我们在window上添加的方法属性那样,任何地方都可以用)插件能实现的功能没有限制,不过常见下面几种:添加全局方法或者属性添加全局资源:组件/指令/过滤器添加Vue实例方法,通过把它们添加到Vue.prototype上实现。库,提供自己的API ,比如 vue-原创 2020-08-10 14:36:34 · 140 阅读 · 0 评论 -
9_Vue自定义指令与Filter
1. 内置指令 Vue中定义了内置指令,可以查看 指令API文档 ,有些内置指令已经在前面学习过了。2. 自定义指令 除了内置的指令之外,也可以自定义指令。那什么时候需要自定义指令?引用官方文档:除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。在Vue里,代码复用的主要形式和抽象是组件。然而,有的情况下,仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。指令是可以写在DOM元素的小命令,他们以v-为前缀,vue就能识别这是一个指原创 2020-08-10 14:33:34 · 178 阅读 · 0 评论 -
8_混入_Mixin
1. 什么是mixin 假设定义了两个组件,这两个组件非常相似,他们的基本功能是一样的,但他们之间又存在着足够的差异性,此时的你就像是来到了一个分岔路口:我是把它拆分成两个不同的组件呢?还是保留为一个组件,然后通过props传值来创造差异性从而进行区分呢? 如果拆分成两个组件,如果公共的功能出现变动,就需要同时更改两个组件,这违背了 DRY 原则。反之,太多的props传值会很快变得混乱不堪,从而使得维护变得很麻烦。 使用Mixin,可以将一个组件的选项(data,props,compu原创 2020-08-08 14:23:45 · 242 阅读 · 0 评论 -
7_Vue组件生命周期
1. Vue组件生命周期一个Vue组件就是一个Vue实例对象,当对象被实例化出来之后,要经过初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程,这个过程就是组件的生命周期,各个阶段都有对应的事件钩子(实例方法的调用)。 前面章节中已经用到了 created和destroyed 这两个事件钩子,分别在创建后和销毁后调用。2. 官方生命周期图示参考文档: https://cn.vuejs.org/v2/guide/instance.html图片来源于网络红色方框就是原创 2020-08-08 11:33:21 · 314 阅读 · 0 评论 -
6_Vue父子组件通信与槽
1 .组件的组织一个应用会以一棵嵌套的组件树的形式来组织。上小节案例中 App.vue组件中使用了 ShowTime.vue 组件。 在浏览器上安装 Vue DevTools 插件,后可以通过插件看到它们之间的关系,开发Vue应用时也可以通过它方便调试。它可以直接在google 应用商店搜索安装。访问应用商店需要科学上网上小节案例中组件的结构如下:2 .父子组件通信-propsApp就是父组件,ShowTime就是子组件。 所谓父子组件通信其实就是如何把父组件中的数据传递到子组件中,原创 2020-08-07 19:28:18 · 221 阅读 · 0 评论 -
5_Vue组件定义与注册
1. Vue组件概述前面的章节中,我们只编写了一个App.vue这样一个 组件。 组件 (Component) 是 Vue.js 最强大的功能之一,可以说编写Vue应用就是在编写Vue组件,编写好的组件可以重复的使用。为了可重用性高,减少重复性开发,我们可以按照template、style、script的拆分方式,放置到对应的.vue文件中,一般格式为:<template> <div> ... </div></template><script原创 2020-08-07 19:12:46 · 300 阅读 · 0 评论 -
webpack4打包传统H5多页面
1. webpack核心概念入口(entry)输出(output)loader插件(plugins)官方文档: https://www.webpackjs.com/configuration/output/#output-filename1.1 入口指定 webpack 由哪个模块作为项目构建的开始.通过配置 entry 属性,指定一个或多个起点,默认值 ./src :用法: entry: string|Array ,可以是一个字符串也可以是一个数组,还可以是一个对象。modu原创 2020-08-01 16:52:16 · 2797 阅读 · 5 评论 -
4_静态资源处理
1. webpack中的resolve 配置在前面的项目中, src/main.js中引入 vue库是这样引入的:import Vue from 'vue/dist/vue.js'import App from './components/App.vue'Vue.component("App",App)new Vue({ el: '#app', template: '<App />',})npm 引入的库文件都在 node_modules中,webpack在处理main.原创 2020-07-30 18:21:46 · 472 阅读 · 0 评论 -
3_vue基础语法
1. 准备空项目拷贝上一节写好的 工程文件到新的项目目录下,按照目录结构存放这些文件。package.jsonwebpack.config.jsonindex.tplsrc/main.jssrc/components/App.vue后面所有编写的代码都会针对 App.vue文件来进行编辑。 组织好以后,打开命令行工具,执行 cnpm i 安装已经在package.json文件中声明的包文件到 node_modules 文件夹中src/componetns/App.vue文件内容,&l原创 2020-07-30 18:04:01 · 300 阅读 · 0 评论 -
2_webpack工程化
1. 传统前端开发传统前端开发一般是 html+javascript+css ,项目目录结构如下:html文件中定义文档结构,css文件定义样式,JavaScript文件实现对dom的操作。以目前的眼光看,这种开发模式有如下几个弊端:JavaScript代码无法实现模块化。对于新的JavaScript规范,如 ES6(ES2015), ES7 由于有些浏览器无法跟上,所以无法使用这些新的特性。各种环境 生产环境,测试环境,开发环境配置维护麻烦。源代码压缩,合并,项目发布困难。无法实现组件化原创 2020-07-29 14:34:52 · 398 阅读 · 0 评论 -
1_Vue2.x起步
1. 在HTML文件中使用vue使用传统最简单的方式,在HTML文件中引入Vue js库后使用vue。 这里采用VSCode IDE环境编辑器。01_01_html/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2020-07-29 14:20:24 · 164 阅读 · 0 评论 -
Electron与RabbitMQ-3.Electron9.x发送接收消息
1. 目标使用Electron创建桌面应用,发送端发送消息,接收端接收到消息后,在操作系统(windows 10) 上显示桌面通知,点击通知后在应用中显示详细信息。2. 搭建项目参考Electron9.x_Vue_调用DLL库 5.1,5.2 章节vue create electron_rabbitmqcd electron_rabbitmqvue add electron-buildernpm i amqplib -S3. 主进程中初始化 RabbitMQ模块src/mainPro原创 2020-07-22 20:58:35 · 756 阅读 · 0 评论 -
Electron与RabbitMQ-2.NodeJS发送接收消息
1. 目标本次使用NodeJs创建两个应用,一个应用负责发送消息,一个应用负责接收消息。 案例来源于官方文档 本例使用 NodeJS v12.17.0(x64)2. 创建NodeJS项目cd g:\mkdir node_rabbitmqcd node_rabbitmqnpm init -ynpm i amqplib -SNodeJS 使用 amqplib库 完成与RabbitMQ服务之间的通信3. 发送方(生产者)在根目录下创建 send.js引入 amqplib/callback原创 2020-07-22 18:30:28 · 739 阅读 · 0 评论 -
Electron与RabbitMQ-1.RabbitMQ基础
1. RabbitMQ能做什么?RabbitMQ是一个消息代理 - 一个消息系统中间件。它可以为你的应用提供一个通用的消息发送和接收平台,并且保证消息在传输过程中的安全。它可以允许软件、应用相互连接和扩展,通过将消息的发送和接收分离来实现应用程序的异步和解偶.2. 安装这里使用Docker进行安装,这里假设服务器IP地址为局域网中的192.168.1.201。安装 命令行如下:mkdir -p ~/services/rabbitmq/datacd ~/services/rabbitmqdocke原创 2020-07-22 14:28:47 · 606 阅读 · 0 评论 -
Electron9.x_Vue_调用DLL库
本文主要介绍在 Electron9.x 中,使用ffi-napi,ref-array-napi,ref-napi 加载 Windows 动态链接库,并在Vue 渲染进程中使用。使用过程中会遇到一系列的坑,本文将会一一解决,并解释原因。如有同行兄弟遇到此问题可以借鉴。这里列出所使用的环境:Visual Studio 2017NodeJS v12.17.0 (x64)node-gyp v7.0.0Python 2.7.15Electron :9.1.0@vue/cli 4.4.6vue-cl原创 2020-07-22 10:49:05 · 5298 阅读 · 7 评论