前端
关注
分享
扫一扫
前端知识总结
Rsun04551
也许当我老了，也一样Code；不为别的，只为了爱好。
展开
-
React项目包结构的作用
React项目的包结构（目录结构）在项目中起着组织、管理和维护代码的作用。一个清晰的包结构能够使项目更易于阅读、维护和扩展。总之，合理的包结构可以提高项目的可维护性、可读性和可扩展性，有助于开发更高质量的React应用。：通过按照功能或模块将组件、样式、图片等资源分组，使代码结构更清晰，易于查找和维护。：合理的包结构能够让开发者快速了解项目的布局，从而更容易阅读、理解和修改代码。：将组件、样式、逻辑等分离，有助于提高代码的可复用性和维护性。：通过约定好的包结构，可以更容易遵循一致的代码规范。原创 2023-08-16 22:28:19 · 310 阅读 · 0 评论 -
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时，常常会使用 loding 过渡数据的加载时间。如果 loading 作为一个全局的加载状态，应该写在项目中的App.vue中在el-table标签中添加v-loading=“loading”data层添加该变量：在接口请求前后添加如下：给后台接口打个断点测试下效果如下：...原创 2021-03-17 14:33:01 · 9473 阅读 · 0 评论 -
node 版本与npm版本不相匹配
当查询npm版本时候报如下错误：原因是 node 版本与npm版本不相匹配，两个东西需要使用想对应的版本号cmd下输入命令：node -v 查看node版本npm -v 查看npm版本再打开https://nodejs.org/zh-cn/download/releases/ 这个地址查看本地node版本对应哪个npm版本因为我之前本地有7.5.3的npm版本了，根据下面绿色字体提示输入npm install -g npm@7.5.6命令来更新所需npm版本...原创 2021-03-06 15:55:58 · 3631 阅读 · 0 评论 -
前端三要素
前言：人，既无虎狼之爪牙，亦无狮象之力量，却能擒狼缚虎，驯狮猎象，无他，唯智慧耳。——《千门秘典》要素一、H51、5点建议：不区分大小写；单边和双边标签；属性都是键值对；建议都用双引号；在Java代码中嵌套建议使用单引号；H标签：默认加粗自动换行且留白所有的标签都有的属性：id name class style2、掌握转义字符：> >、< <、空格 b、i、u、del、face斜体italics、字体超链接ahref、target、原创 2021-03-05 13:48:12 · 486 阅读 · 0 评论 -
前端相关概念
C/S和B/S架构的区别C/S：客户端和服务端架构，用于App开发，建立在局域网基础上。例如：服务器（QQ）版本更新，客户端（5个）必须更新，才可以使用新的功能。网站开发采用的都是B/S架构。B/S：浏览器和服务器架构：网站开发，只要输入网址就能浏览内容。如果版本更新，只需要刷新，就可以获取到最新的内容。建立在广域网基础上相比较而言，B/S架构开发，维护的成本要远远低于C/S架构，B/S架构师现在最流行的一种开发方式。https（安全）和http的区别HTTPS协议是由SSL+HTTP协议原创 2021-03-05 11:44:21 · 120 阅读 · 2 评论 -
基于菜鸟教程快速入门Vue2.0
runoob：run noob 的合并，原意 奔跑吧菜鸟依据个人经验，将引入js：下载 vue.min.js文件：https://vuejs.org/js/vue.min.jsCDN：内容分发网络，可通过cdn加速访问国外的网站，可以将下面的网址替代script标签里的网址，访问速度会加快；https://cdn.staticfile.org/vue/2.2.2/vue.min.js安装npm和vue-cli命令行工具；NPM：包管理工具，可以从npm上下载别人的和上传本地的第三方包；temp原创 2021-03-05 11:43:10 · 563 阅读 · 1 评论 -
Vue中created与mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作。下面通过例子进行解释下，比如：上图红框里的数据固定值，其他数据是由上个页面带过来的数据。在代码中使用：...原创 2020-07-17 14:28:32 · 804 阅读 · 0 评论 -
Vue export和export default的区别
export可用于导出单文件的多个命名模块 例如：导入：//demo2.jsimport { str,f } from ‘demo1’导出：//demo.jsexport const str = ‘hello word’export function f(a){ return a+1;}export default 只能导出一个默认模块，这个模块可以匿名 例如：导入：//demo2.jsimport obj from ‘demo1’(引入的时候可以给这个模块取任意名字)导原创 2020-07-16 20:45:03 · 200 阅读 · 0 评论 -
React、Ant Design、DvaJS之间的关系
1、React：是一个用于构建用户界面的JS库，主要用于构建UI，可以认为是MVC中的V（视图）2、Ant Design：是采用React封装的一套组件库，我的理解它就是一个UI框架，类似H-ui、Bootstrap等3、DvaJS：Dva是基于现有应用架构（redux+react-router+redux-saga等）的一层轻量封装，没有引入任何新概念，可以帮你自动化了Redux一些繁琐的步骤，只需几行代码就实现了原本redux + react-router + redux-saga繁琐的步骤。dva原创 2020-06-29 16:24:48 · 641 阅读 · 0 评论 -
npm与cnpm的区别
NPM（Node Package Manager，节点包管理器）是NodeJS的包管理器，用于节点插件的管理（包括安装，卸载和管理依赖等）。NPM是随同新版的NodeJS一起安装的包管理工具，所以我们需要安装NodeJS。作用：1.允许用户从NPM服务器上下载别人编写的第三方包到本地使用。2.允许用户从NPM服务器上下载并安装别人编写的命令行程序到本地使用。3.允许用户将自己编写的包或命令行程序上传到NPM服务器上供别人使用。为什么要用CNPMNMP安装插件是从NPM官网下载对应的插件包，该原创 2020-06-29 09:05:58 · 173 阅读 · 0 评论 -
React快速入门
通过create-react-app工具快速构建React项目，初步了解React工作机制。1. 环境配置忽略React的技术栈细节，使用create-react-app构建应用。 开发环境：node和npm(或cnpm)安装create-react-app：cnpm install -g create-react-app1在工作目录下执行下列命令建立应用：create-react-app myapp1自动构建完成后进入项目根目录：cd myapp1启动应用：cnpm start1.转载 2020-06-28 22:57:59 · 269 阅读 · 0 评论 -
Vue指令文件
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Vue测试&...原创 2020-04-29 16:39:57 · 255 阅读 · 0 评论 -
jQuery回调函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery回调函数</title></head><body><button id="button1">先弹窗后隐藏-原生<...原创 2020-04-29 16:39:06 · 280 阅读 · 0 评论 -
Ajax模板文件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> //异步JS和XML，在不加载页面的...原创 2020-04-29 16:36:31 · 175 阅读 · 0 评论 -
HTML5模板文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--引入css依赖及代码--> <link rel="stylesheet" href="/resourc...原创 2020-04-29 16:34:36 · 417 阅读 · 0 评论 -
JS中获取当前系统时间
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-???)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDa...原创 2020-02-24 18:09:23 · 248 阅读 · 0 评论 -
前端模块化开发中webpack、npm、node、nodejs之间的关系[小白总结]
前言入门前端的坑也很久了，以前很多大小项目，前端都是传统式开发，一直在重复造轮子；接触VUE后，对vue-cli有了解后，仅仅知道vue-cli是一个vue项目的脚手架，可以快速的构建一个vue的基于npm的模块化项目，vue内部的打包机制其实还是借助webpack；但是对webpack\npm\node\nodejs这几个在前端模块化中的高频词总是傻傻分不清，不知道他们之间的具体关系，今天花...转载 2020-02-22 11:31:54 · 473 阅读 · 0 评论 -
vue中computed vs methods的区别
首先看下vue中的用法：<div id="root"> <p>now is: "{{ method_now() }}"</p> <p>cnow is: "{{ computed_now}}"</p></div>var vm = new Vue({ el: '#root', data:''...原创 2020-01-27 20:32:08 · 725 阅读 · 0 评论 -
Vue实现对数据的增删改查(CURD)
0、页面展示效果在这个页面里，就实现了增删改查4个功能，点击链接查看demo。打开新的页面，进入开发者选项直接复制html页面即可，此页面引入的css和js文件都是远程服务器，如需开发使用请自行到官网下载引入。我们把这些用户信息保存到list的数组中，然后增删改查就在这个数组上进行：list: [ { username: 'aaaaa', emai...原创 2020-01-19 11:18:43 · 2524 阅读 · 1 评论 -
Vue测试小demo
0、首先看下页面效果页面包括三个功能：1、按钮触发改变文本框内容；2、计算输入框之和；3、计算输入框内容的位数；贴代码：1、创建一个HTML页面导入vue相关的依赖<script src="static/vue.js"></script><script src="static/moment.js"></script>相关依赖下载：vu...原创 2020-01-19 09:37:25 · 309 阅读 · 0 评论