ScreenshotOfCode-CSDN博客

原创最全Vue开发小技巧

Vue开发小技巧Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;后续 Vue 3.x 出来后持续更新.1.require.context()1.场景:如页面需要导入多个组件,原始写法:import titleCom from '@/components/home/titleCom'import bannerCom from '@/components/home/bannerCom'import cellCom from '@/com

2020-07-08 17:44:04 540

原创数组函数forEach()、map()、filter()、includes()、find()、every()、some()的使用

1. forEach()遍历数组全部元素，利用回调函数对数组进行操作，自动遍历数组.length次数示例： var arr = [6, 5, 4]; var total = 0; arr.forEach(function(value, index, arr) { console.log('当前值：' + value); console.log('当前值对应的索引：' + ...

2019-09-25 16:53:41 359

原创 vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息

如需使用 vue-meta-info 配置title和meta按照以下步骤：1.安装npm install vue-meta-info --save2.在main.js引入import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)3.在vue页面配置<template> ...</template> ...

2019-08-01 10:25:31 7735 1

原创 vue 移动端 cli3.0 build 打包低版本浏览器兼容性

现代模式有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性，但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长，运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015，所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。Vue CLI 提供了一个“现代模式”帮你解决这个问题。以如下...

2019-07-25 16:35:45 2218

原创使用vue-cli3.0搭建适配移动端的项目

使用vue-cli3.0搭建适配移动端的项目适配移动端，禁止用户缩放页面meta标签中的content属性里有一个width=device-width的值，这个值就是用来告诉浏览器，该页面将要使用设备的宽度来解析，后面的属性值则是告诉该页面：user-scalable=no 禁止用户缩放页面initial-scale=1.0 页面初始倍数为1倍maximum-scale=1.0 页面可...

2019-07-04 18:39:41 972 1

原创 Nuxt3 -- 组件 Components

相信大家在写组件的时候各种导入和注册操作重复去写肯定很烦，这点 Nuxt 中已经帮我们解决了，直接使用就行了。自动导入组件我们把Vue组件放在components/目录，这些组件可以被用在页面和其他组件中，以往我们使用这些组件需要导入并注册它们，但Nuxt会自动导入components/目录中的任意组件。比如：| components/--| TheHeader.vue--| TheFooter.vuelayouts/default.vue:<template> <di

2021-12-07 17:00:16 1934

原创 Nuxt3--布局模板

默认布局那些放在layouts/目录下的.vue文件会被自动加载进来，如果我们创建的.vue名为default.vue，将会被用于项目所有页面中作为布局模板。layouts/default.vue：<template> <div> default.vue: <slot /> </div></template>这样页面就会直接出现default.vue文件内的内容了。自定义布局如果我们的布局文件名不叫default，

2021-12-06 11:33:04 1520 1

原创 Nuxt3 -- 路由篇

普通路由nuxt3会自动整合vue-router，并且映射pages/目录到应用的routes配置中。[ { path: '/', component: '~/pages/index.vue', name: 'index', }]动态路由如果我们在文件名或者文件夹名称里面包含了方括号，它们将被转换为动态路由参数。-| pages/---| users-[group]/-----| [id].vue然后通过 $route.params.group 通过

2021-12-03 11:24:24 5069 3

原创 Nuxt3 持续学习 -- 【快速创建一个 Nuxt3 项目】

创建项目打开一个终端，或从Visual Studio Code打开一个集成终端，并使用以下命令创建一个新的启动器项目:npx nuxi init nuxt3-app注：node 版本需要高于 v14.16.0进入项目文件夹安装依赖yarn install启动服务yarn dev -o浏览器会自动打开：http://localhost:3000在nuxt3中如果没有pages/目录，则表示不会包含vue-router依赖。如果我们不需要路由或者就是一个落地页时就可以这么搞。下面删除a

2021-12-02 15:44:57 1580

翻译 Nuxt3 持续学习

什么是 Nuxt？Nuxt 的目标是让 Web 开发变得直观且高效，同时考虑到出色的开发人员体验。为什么是 Nuxt？要了解什么是 Nuxt，我们需要了解创建现代应用程序需要什么：一个 JavaScript 框架带来了反应性和 web 组件，我们选择了Vue.js。一个在开发中支持热模块替换并捆绑你的代码用于生产的捆绑器，我们支持Webpack 5和Vite。为了在支持旧版浏览器的同时编写最新的 JavaScript 语法的转译器，我们为此使用了esbuild。Nuxt为开发中的应用程序提

2021-12-01 15:25:52 677

转载我在工作中是如何使用 git 的

前言最近在网上有个真实发生的案例比较火，说的是一个新入职的员工，不会用 Git 拉代码，第二天被开除。由此，可见 Git 对我们工作的重要性，无论是前端后端，都是离不开 Git 的，下面就让我们一探究竟吧。上面的案例引申出一个问题，入职一家新公司，你的 leader 给你分配了仓库的权限后，如何配置本地的 Git 环境并拉取代码？莫慌，按照下面我讲的四个步骤走，保证你可以顺利使用 Git 进行拉取代码！下载 Git 下载地址，选择自己系统对应的版本下载即可。在你的电脑上生成 ssh 秘钥，

2021-06-22 09:57:31 133

原创 JS阻止浏览器F5刷新

阻止F5刷新 stopF5Refresh() { document.onkeydown = function (e) { var evt = window.event || e; var code = evt.keyCode || evt.which; if (code == 116) { if (evt.preventDefault) { evt.preventDefault();

2020-08-25 08:45:50 486

转载 JS获取当前年、月、星期的第一天和最后一天

先封装日期格式化方法// 对Date的扩展，将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)// 例子：// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2018-07-02 08:09:04.423// (new Date()).Format("yyyy

2020-06-03 15:59:55 4459 5

原创 vue 中如何保存登录的账号密码

这个问题只要是网站设计到登录的都会涉及到1.解决问题的思路借助浏览器的存储功能来实现保存登录的账号和密码，使页面进来的时候就去读取是否有账号和密码。2.直接代码演示拿来即用created() { // 在页面加载时从cookie获取登录信息 const username = this.getCookie('username') const password = ...

2019-11-29 17:24:35 1592

原创图片上传转base64码和base64码转图片回显

直接上代码小demo是用在vue里边写的<template> <div> <input id="input" type="file" name="image" accept="image/jpg, image/jpeg, image/png" @change="changeImg($event)...

2019-11-06 11:15:59 891

原创前端命名规范、配置规范、编辑器设置、编辑器快捷键、ESlint.js 配置

命名驼峰式命名法介绍Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfoCamel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo文件资源命名文件名不得含有空格文件名建议只使用小写字母，不使用大写字母。( 例：user )文件名包...

2019-09-25 17:29:40 1019

原创 JavaScript：内置对象介绍(Math/Date/ 数组/字符串)

06JavaScript内置对象介绍☞ JavaScript组成： ECMAScript | DOM | BOM☞ ECMAScript：变量，函数，数据类型，流程控制，内置对象。。。☞ js中的对象：自定义对象，内置对象，浏览器对象（不属于ECMAScript）☞ Math对象，Array对象，Date对象。。。。 ☞ 通过查文档...

2019-09-25 17:15:50 229

原创 ajax原生的js讲解和jquery讲解

原生 JS怎么发送一个 get 请求创建一个 ajax 对象var xhr = new XMLHttpRequest()设置请求方式和请求地址[，是否异步]xhr.open('get', '/ajax'[, true or fasle])准备接受请求体xhr.onload = function () { console.log(xhr.responseText)...

2019-09-25 17:02:04 165

原创 Vue-cli seo 使用prerender-spa-plugin插件预渲染

使用vue-cli打包项目一般为spa项目，众所周知单页面应用不利于SEO，有ssr(服务端渲染)和预渲染两种解决方案，这里我们只讨论预渲染vue-cli有2.0和3.0版本，解决方法是不一样的，我们要分开讨论。vue-cli2.0版本1.安装npm install prerender-spa-plugin --save2.webpack.prod.conf.js增加部分代码co...

2019-08-01 10:28:08 1116

原创外网穿透 ngrok win

外网穿透 ngrok win1.安装使用下载链接windows 版本选择32位就可以2.下载完后解压3.cmd 下 cd 到解压目录4.执行命令 ngrok http 端口号以配置口为准例如：ngrok http 8050最后执行成功后下图箭头就是你得内网代理域名：其中一个就可以最后问题：vue-cli 新版本中会默认会开启主机检查外网访问不了解决方法...

2019-07-04 18:47:44 126

ScreenshotOfSeed的博客