- 博客(53)
- 资源 (4)
- 收藏
- 关注
原创 vue项目基础用法教程(一)
1. 什么是Vue.js?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。2.安装n安装vue-cli3 & node环境全局安装npm install -g @vue/cli查看vue版本vue -V创建项目
2022-05-01 07:00:00
12191
1
原创 前端项目自动化部署
应用场景通常情况下,项目需要部署上下通常采用下面几种方式以Vue项目为例,打包之后利用指令/工具,利用Scp命令行或FTP将dist目录中的文件上传至服务器Web环境根目录下。利用git服务器,ssh进入web服务器 -> 执行git clone或git pull将项目克隆至服务器 -> 执行npm install -> 执行npm run build。以上两种方式都不是最优解,第一种方式操作步骤繁琐;第二种服务器需要安装node&git环境,并且多了
2022-03-29 16:36:04
10188
原创 vue项目基础用法教程(二)
创建项目vue-cli脚手架生成项目vue create 项目名称配置参考vue-router配置vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/1. 安装vue-router(创建项目时若已勾选vue-router请忽略)npm install vue-router --save2. 创建路由实例一般在src目录下创建router
2022-03-28 14:00:17
7647
原创 JS实现文字转语音播放
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>js点击事件</title></head><body> <!-- 第三种方式--> <button id="btn">点我</button> <script type="text/jav
2022-03-14 11:00:39
1619
原创 nginx部署404解决方案
问题: 部署前端项目时 主页渲染无问题,路由切换刷新时出现404解决办法需要修改nginx.conf文件如图 try_files $uri $uri/ /index.html;//此处解决刷新页面出现404的问题
2021-03-09 15:12:45
452
原创 -bash: nginx: 未找到命令 (command not found) 解决方案
原因 未定义全局变量执行 查看是否安装成功 ,如下图为安装成功ps -ef | grep nginx 按照配置:1、进入文件vim /etc/profile2、修改文件3、刷新source /etc/profile4、重启服务nginx - s reload
2021-03-09 11:16:25
20559
3
原创 阿里云Linux服务器搭建nginx环境
1.准备软件cd /usr/local/src/wget http://www.zlib.net/zlib-1.2.11.tar.gzwget https://ftp.pcre.org/pub/pcre/pcre-8.40.tar.gzwget https://www.openssl.org/source/openssl-1.1.0e.tar.gzwget http://nginx.org/download/nginx-1.10.3.tar.gz2.解压软件tar zxvf nginx-
2021-03-08 17:36:47
240
原创 vue移动端开发h5基础配置
移动端项目中开发基础配置简介:仅针对于vue项目基础配置,但也适用于类似框架vue项目搭建项目初始化vue2.0vue init webpack <项目名称>基础配置依据个人爱好,这里直接省略vue3.0vue create <项目名称>基础配置同样省略vue3.0需要在根目录创建vue.config.js这里有一篇关于vue-cl...
2020-04-17 14:06:33
1128
2
原创 vue组件(父子,兄弟)间传值调用方法
父组件向子组件传值1.1.在父组件App.vue中引入子组件<script>import v-header from "@/component/header.vue" export default { components:{ v-header }}</script>1.2.父组件App.vue调用子组...
2019-12-26 17:16:36
469
原创 表格实现拖拽换位
1.EemenetUihttps://element.eleme.cn/#/zh-CN/component/table引入draggableimport draggable from 'vuedraggable'html<el-table id="otable" :data="tableData" border row...
2019-11-29 14:23:34
653
原创 跨域解决方案(2)
续跨域解决方案(1)https://blog.youkuaiyun.com/Genius_cxx/article/details/102571958讲解了跨域的几种情况和出现的缘由。本期讲解node中跨域的两种解决方式我们经常遇到这种情况,后端给我们提供了接口,但是由于一些安全性的考虑,不愿意配置跨域信息。这个时候,我们就要自己搭建 node 服务器来转发请求以实现跨域环境安装npm init -...
2019-11-14 15:06:33
408
原创 node部署项目详解
一. 首先安装node.js,官网链接 https://nodejs.org/zh-cn/二. 新建一个目录,比如website文件夹,然后在当前文件夹下进入命令行窗口 npm init 初始化npm,此处一路回车,这时会生成 package.json的一个文件。三. 在website根目录下创建server.jsserver.js 详解版本"use strict";//加载所需要...
2019-11-14 14:55:07
758
原创 bootstrap响应式布局demo
多多提意见。github地址:https://github.com/Genius-cxx/bookShop-pc
2019-11-13 17:28:51
449
原创 vue点击按钮复制,分享链接给好友
1.下载模块vue-clipboard2npm i vue-clipboard2 -s2.main.js中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3.vue页面使用方法html部分<input type="text" v-model="message"> <butto...
2019-11-04 17:55:04
22236
原创 Do not use built-in or reserved HTML elements as component id: main
解决:组件名不能和html标签重复,main 和html部分ID名重复!修改其一即可
2019-11-04 15:53:21
4541
原创 MPVue开发小程序使用axios
1.安装axios$ npm install axios2.找到以下路径中文件路径> node_modules > axios > dist > axios.js注释代码块axios.all = function all(promises) { return Promise.all(promises);};3.使用axios的自定义请求adapteraxios...
2019-10-29 18:29:29
686
原创 小程序不在合法域名列表中的解决方法
小程序发送 request请求失败 提示不在合法域名列表中报错如下解决方案第一步在微信公众平台小程序开发设置中>服务器域名>request合法域名添加你所使用的域名第二步也可以多配置选择第三步重启 npm run dev...
2019-10-29 16:40:14
1150
原创 mpvue小程序:未找到 app.json 中的定义的 pages "pages/books/main" 对应的 WXML 文件
当修改了app.json文件后出现问题未找到 app.json 中的定义的 pages "pages/books/main" 对应的 WXML 文件解决方案重新 npm run dev 因为改变了app.json相当于修改了配置文件需要重新编译...
2019-10-29 15:17:18
3005
1
原创 微信小程序基础教程
小程序代码构成JSON 配置WXML 模版WXSS 样式JS 逻辑交互JSON 配置在小程序中,JSON扮演的静态配置的角色。小程序配置 app.json{ "pages": ["pages/index/index", "pages/logs/logs"], "window": { "backgroundTextStyle": "light",...
2019-10-28 15:37:46
773
原创 canvas学习笔记(1)
canvas理解HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。虽然之前对canvas有一定的了解,但是并没有专门去系统化的学习过这一门技术。所以从基础学起基础知识小节(颜色阴影...
2019-10-24 14:51:53
218
原创 10-24程序员们 节日快乐!
1024程序员节1024程序员节是中国广大程序员的共同节日。1024是2的十次方,二进制计数的基本计量单位之一。程序员(英文Programmer)是从事前端、后端程序开发、系统运维、测试等的专业人员。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1G=1024M,而1G与1级谐音,也有一级棒的意思。节日介绍部分互联网机构一直密切关注程序员健康,针对程序员...
2019-10-24 10:35:24
381
原创 跨域解决方案-ngnix反向代理完美解决(1)
近期在项目中,由于后端重定向两次接口,前端直接拿回响应时间较长,所有在这里做一次跨域。小节一下。什么是跨域?跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。类型实例协议跨域http://www.baidu.com访问https://www.baidu.com端口跨域http://www.baidu.com:8080访问http...
2019-10-15 18:38:13
452
原创 JS时间戳转YY-MM-DD,标准时间转YY-MM-DD
var timestamp= 1569859200000; let date = new Date(timestamp); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) : MM; let d = date.getDate(); d = d &...
2019-10-10 17:44:20
1121
原创 vue真机模拟神器移动端控制台vConsole
首先下载模块cnpm i vconsole -s;然后在main.js中引入模块import VConsole from 'vconsole'const vConsole = new VConsole()console.log(vConsole.version)完工,加油小伙伴们。
2019-10-08 13:50:53
888
原创 解决Vue启动报错 npm ERR! @1.0.0 dev: node build/dev-server.js
首先我们要明白报错的原因是这个项目的启动端口被占用。所以需要我们重新拿回这个端口或者换个端口启动项目。报错截图解决方案1:在config目录下index.js中修改port的值 。解决方案2:打开任务管理器找到被占用的端口 关闭应用。点进程>>找到对应PID关闭即可...
2019-09-28 14:24:04
22492
原创 JS-浅拷贝和深拷贝详解
概念理解1.数组数组浅拷贝数组浅拷贝:只能拷贝数组的第一层基本数据类型数据,无法切断数组内部引用类型数据的引用关系。简而言之也就是说第一层数据可以修改,而修改第二层数据会影响原数组。为了更全面了解数组的拷贝,我们举例复杂数组:方法:slice(),concat()和es6拓展运算符等 var arr = [1,{ name: 'Amy', age: 18 }, [2, 3, ...
2019-09-23 11:25:26
258
原创 前端Vue框架-vuex状态管理详解
vuex的理解采用集中式存储管理模式。用来管理组件的状态,并以自定以规则去观测实时监听值得变化。vuex安装引入使用前需要下载vuexnpm install vuex --save在我们的main.js文件中引入该文件,在文件里面添加 import store from ‘./store’;,再在vue实例全局引入store对象;import Vue from 'vue'imp...
2019-09-19 15:36:27
434
2
原创 强烈推荐!Vue知识总结,面试必备
今天工作不是很忙,简单做下Vue总结。1.vue全家桶指定的是什么?答:vue(整体架构)+vuex(状态管理)+vue-router(路由)+vue_resource || axios(数据交互)+各种ui。pc端ui:antd-vue || element-ui等.移动端ui:mint-ui || Vant 等. 2.v-model是什么?如何使用?vue中标签怎么绑定事件?答:...
2019-09-17 15:20:26
266
原创 实现在线客服,QQ唤醒发起临时会话
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的qq&site=qq&menu=yes">你的qq+img</a>点击则触发唤醒qq发起临时会话功能。前提是你的qq开启允许陌生人发起临时会话,允许任何人添加好友。...
2019-09-16 18:22:18
2210
原创 CSS权重
!important()>行内样式>id选择器>类选择器=伪类选择器=属性选择器>元素选择器>通用选择器>继承的样式>浏览器默认的样式。其次内联样式大于内部样式和外部样式...
2019-09-11 15:35:28
137
原创 JS时间戳转YY-MM-DD
方法 new Date(parseInt(‘时间戳’) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ') 例:将1568168403转化为时间 console.log( new Date(parseInt(1568168403) * 1000).toLocaleString().replace(/:\d{1,2}$/,' '));输出结...
2019-09-11 14:48:09
4578
原创 前端面试经典问题
1. js原声基础,创建原声方法 给字符串定义一个方法,当传入一个正整数N时,结果返回N次字符串。 例如:console.log('hello'.repeatify(3)); 控制台打印结果:hellohellohello。 需注意指定方法名称,但字符串自身不带有repeatify方法。答案 可能不够标准,仅供参考。 String.prototype.r...
2019-09-10 17:23:32
327
原创 JS清除浏览器缓存的方法
1. meta方法清除浏览器缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> // CONTENT="no-cache" 清除缓存 <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> // CONTENT=...
2019-09-10 14:33:09
623
原创 Error in v-on handler: "TypeError: handler.apply is not a function"
报错截图原因vue但文件中data属性和methods里的方法重名。解决修改重新命名即可
2019-09-10 14:13:35
16207
2
原创 项目版本更新,浏览器缓存问题解决方案
打包项目更新到服务器时可能会存在缓存问题,需要在服务器中进行配置。location = /index.html { add_header Cache-Control "no-cache, no-store";}no-cache, no-store可以只设置一个no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200...
2019-09-10 13:53:00
2887
原创 配置vue不同环境配置不同打包命令
不同环境如何配置地址请查看环境切换1:安装cross-envnpm i --save-dev cross-env//npm i --save-dev cross-env //淘宝镜像下载2:安装cross-env在config目录下创建test.env.js和pre.env.js修改prod.env.js中的内容,如下'use strict'module.exports =...
2019-09-04 14:17:17
741
原创 app手机端h5查看控制台
在html head中插入以下代码<script src="//cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();console.log('控制台打印信息');</script>之后在手机上打开app时界面上会有一个可移动的设置的图标,点击图标,控制台就会显示...
2019-09-04 13:42:15
5642
2
原创 修改文件内所有文件的指定字符串方法
前段时间,公司临时需求从网上爬下来一个官网,几百个html页面,一个一个修改显然不现实,指令修改有点小问题。最后通过webstorm开发工具指令完成,webstorm真的强大。快捷方式如下:查找上一个shift+F3文件内代码替换ctrl+R指定目录内代码批量替换ctrl+shift+R指定目录内代码批量查找ctrl+shift+F目录下所有文件指定代...
2019-09-02 17:40:04
331
原创 Nodejs本地部署项目
介绍一个简易的方法,用来检查打包的项目是否可正常部署。1.首先压缩vue或react等项目,生成dist目录。如图2.下载安装http-server镜像文件npm install http-server -g(windows下)sudo npm install http-server -g(linux和mac下)3.进入dist目录,控制台执行http-servercd dist...
2019-08-27 11:08:12
2558
1
微信小程序教程.md
2019-11-13
浅谈Vue项目优化心得.md
2019-09-11
总结:vue中Axios的封装-API接口的管理.md
2019-07-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人