- 博客(209)
- 收藏
- 关注
RSS订阅原创 使用 git 修改 .vue 的文件名不生效
问题：在编辑器或者本地文件夹里修改 .vue 文件名的大小写不生效，导致本地无法进行 commit，原因是 git 对文件名的大小写不敏感解决：git config core.ignorecase false注意事项.vue文件命名规范：除 index.vue 外，其它 .vue 文件统一用 PascalBase 风格vue，js 的变量、方法：用驼峰命名方式，如 onSelectChange(currentData)...
2021-10-29 09:29:35
894
原创 Vue ant-design select组件搜索和远程数据结合
<template> <div class="line-item"> <span class="item-label label-teach">Content</span> <a-select class="item-select" v-model="form.teach" showSearch all
2021-10-22 14:48:40
1640
原创 JS 日期时间转换
方法定义utils/index.jsexport function formatDate(date) { return dateFormat("YYYY-mm-dd", date)}export function formatTime(date) { return dateFormat("HH:MM", date)}export function dateFormat(fmt, date) { let ret const opt = { ..
2021-10-18 22:30:54
462
原创 Vuex的使用
一、什么是 VuexstateVuex 中的公共的状态, 我是将 state 看作是所有组件的 data, 用于保存所有组件的公共数据mutationsstore 中的 methods, 用于修改 state第一个参数是 state, 第二参数是 payload, 即自定义参数只包含同步操作actions通过 commit 提交 mutations，mutations 修改 state 中的数据可以包含异步操作二、实战目录main.jsimpor
2021-10-08 17:22:46
149
原创 webpack之移动端CSS px自动转换成rem
一、浏览器的分辨率二、CSS 媒体查询实现响应式布局缺陷：需要写多套适配样式代码@media screen and (max-width: 980px) { .header { height: 900px; }}@media srceen and (max:width: 480px) { .header { height: 400px; }}@media srceen and (max:width: 350px) { .header { height: 300px;
2021-09-13 22:33:44
429
原创 webpack之PostCSS插件autoprefixer自动补齐CSS3前缀
为了实现 CSS3 前缀的自动补齐：autoprefixer 插件：对代码打包完成后的 CSS 进行后置处理npm i autoprefixer@9.5.1 -D根据 Can I Use 插件：https://caniuse.com/与 postcss-loader 结合使用npm i postcss-loader@3.0.0 -Dconst path = require('path');const MiniCssExtractPlugin = require('mini-cs
2021-09-13 00:51:24
281
原创 webpack之自动清理构建目录产物
问题：每次构建的时候不会清理目录，造成构建的输出目录 output 文件越来越多方式一：通过 npm scripts 清理构建目录rm -rf ./dist && webpackrimraf ./dist && webpack方式二：避免构建前每次都需要手动删除 dist，使用 clean-webpack-plugin，默认会删除 output 指定的输出目录const path = require('path');const CleanWebp..
2021-09-13 00:03:15
329
原创 webpack之HTML、CSS和JS代码压缩
一、JS 文件的压缩webpack4 内置了uglifyjs-webpack-plugin 插件，默认打包出的 JS 文件已压缩过二、CSS 文件的压缩npm i optimize-css-assets-webpack-plugin@5.0.1 cssnano@4.1.10 -D使用 optimize-css-assets-webpack-plugin 插件，同时使用预处理器 cssnanoconst path = require('path');const OptimizeCssAs
2021-09-12 23:46:26
484
原创 webpack之文件指纹策略
一、什么是文件指纹？打包后输出的文件名的后缀用于做版本管理二、文件指纹如何生成Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改Chunkhash：对于 JS 文件，和 webpack 打包的 chunk 相关，不同的 entry 会生成不同的 chunkhash 值Contenthash：对于 CSS 文件，根据文件内容来定义 hash，文件内容不变，contenthash 不变三、JS 的文件指纹设置设置 output 的 filen
2021-09-12 18:47:51
560
原创 webpack之文件监听和热更新
一、文件监听1、文件监听是在发现源代码发生改变时，自动重新构建出新的输出文件2、webpack 开启监听模式，有两种方式启动 webpack 命令时，带上 --watch 参数在配置 webpack.config.js 中设置 watch: true3、构建完成后，输出的文件放入磁盘中4、实践package.json{ "name": "my-project", "version": "1.0.0", "description": "", "main": "index.j
2021-09-11 11:39:23
816
原创 webpack之资源解析
一、解析 ES6npm i @babel/core@7.4.4 @babel/preset-env@7.4.4 babel-loader@8.0.5 -D使用 babel-loader：webpack.config.jsconst path = require('path');module.exports = { entry: { index: './src/index.js', search: './src/search.js' },
2021-09-10 17:47:46
231
原创 webpack之核心概念
一、入口（entry）指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。module.exports = { entry: './path/to/my/entry/file.js',};二、输出（output）告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。const path = require('path');module.exports = { entry: './path/to/my/entry/file.js',
2021-09-10 14:18:36
82
原创 JS 扁平化数组总结
1、转字符串法let arr1 = [1,2,[7,[4,[5,3]]]];arr1 = arr1.join(",").split(",");console.log('join', arr1); // ["1", "2", "7", "4", "5", "3"]2、toString()let arr2 = [1,3,4,5,[6,7,9],[2],[5]];arr2 = arr2.toString().split(",");console.log('toString', arr2); /
2021-08-17 20:22:31
76
原创 JS 数组去重总结
let arr = [1,1,'true','true',true,true,15,15,false,false,undefined,undefined,null,null,NaN,NaN,'NaN',0, 0,'a','a',{},{}];console.log('arr', arr); // (23)1、利用hasOwnPropertyhasOwnProperty 判断是否存在对象属性filter用于对数组进行过滤，它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
2021-08-17 19:10:05
217
原创 Vue this.$emit和this.$on
1、解决第一次监听不到数据的方法this.$nextTick()this.$nextTick(function () { this.$bus.$emit("yulan", row); })setTimeoutsetTimeout(() => { //row 代表要传递的参数数据 this.$bus.$emit("yulan", row); }, 100);2、子组件传值给父组件子组件中使用$emit触发事件的值传出去，父组件通过事件监听，获
2021-08-06 18:56:22
10256
2
原创 Vue中的slot
插槽显不显示，怎样显示由父组件控制插槽在哪里显示由子组件控制组件模板种类：非插槽模板指html模板，如‘div、span、ul、table’；其显示与隐藏以及怎样显示由组件自身控制。插槽模板指slot；其显示与隐藏以及怎样显示由父组件控制；slot显示的位置由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板就显示在什么位置。父组件：<template> <div> <div&..
2020-09-03 08:20:56
375
原创 Vue中sync修饰符的用法
场景：在父组件的data中定义一个变量，希望在子组件中改变这个变量，并传递给父组件父组件：<template> <div> <select-dialog v-if="showChoiceDialog" :show.sync="showChoiceDialog" :select.sync="selectResult" ></select-dialog&g
2020-09-02 23:11:00
587
翻译 VSCode中使用Git出现的问题
将项目文件从GitHub上拷贝到本地仓库（1）选择Git Bash Here，进去后便可进入git控制台，对于首次安装git的机器，要进行用户账户信息的配置git config --global user.name "你的github用户名"git config --global user.email "你的github邮箱地址"（2）将项目从GitHub上克隆到本地需打开你要想项目存放到本地的目录；使用命令git clone +你想要克隆的项目的地址。例：我的Git安装在E盘中，而我.
2020-08-14 19:37:32
1144
翻译 nrm无法加载文件的问题
右键win图标，打开Windows PowerShell（管理员）参考文档：https://blog.csdn.net/tangkthh/article/details/103440722
2020-08-03 20:59:10
585
1
原创 在Vue中实现图片懒加载
安装插件：cnpm install vue-lazyload --save-devmain.jsimport Vue from 'vue'import VueLazyLoad from 'vue-lazyload'import router from './router'Vue.use(VueLazyLoad,{ loading:'/imgs/loading-svg/loading-bars.svg'});Vue.config.productionTip = falsen..
2020-07-25 22:35:04
262
原创 在Vue中实现Modal动画
transition动画文档：https://cn.vuejs.org/v2/guide/transitions.htmltransition不需要引入，因其本身是Vue内置的组件（只展示了相关代码）index.vue（父组件）<template> <div class="index"> <div class="product-box"> <div class="container"> <..
2020-07-25 19:38:58
1047
1
原创 在Vue中使用Swiper
插件使用教程：https://github.com/surmon-china/vue-awesome-swiper安装：cnpm install vue-awesome-swiper --save-dev
2020-07-25 00:55:02
3601
原创 mixin的使用
在scss文件夹中新建一个mixin.scss，在需要使用此类样式的页面中引入未使用 mixin.scss<style lang="scss">@import '../assets/scss/base.scss';.header { .nav-topbar { height: 39px; line-height: 39px; background-color: #333333; color: #b0b0b0; .container ..
2020-07-23 23:30:43
515
原创 在vue中使用Mock模拟数据
Q：为什么进行模拟数据？A：在做开发时，后端程序没有配齐，前端人员在做vue开发时，需要自己先模拟接口，模拟数据，等到后端数据配齐，提供好接口后，将项目中的接口换一下即可一、本地加载请求静态json文件的形式在 Public 文件夹下新建一个 mock 文件夹，新建一个json文件，如login.jsonlogin.json{ "status": 0, "data": { "id": 22, "username": "yian", "em
2020-07-23 17:08:38
7792
2
原创 接口环境变量配置
一、基于cros与jsonp跨域main.jsimport Vue from 'vue'import router from './router'import axios from 'axios'import VueAxios from 'vue-axios'import App from './App.vue'import env from './env'axios.defaults.baseURL='/api';axios.defaults.timeout=8000;axios
2020-07-23 16:04:04
397
原创 Vue中的接口错误拦截
接口错误拦截：统一报错未登录时的统一拦截请求、返回值的统一处理安装插件：axios 请求数据vue-axios 将作用域对象挂载到vue实例中，方便我们用this调用main.js：import Vue from 'vue'import router from './router'import axios from 'axios'import VueAxios from 'vue-axios'import App from './App.vue' // 设置基础值 //
2020-07-23 13:33:18
1916
原创 跨域——接口代理
新建一个 vue.config.js 文件（vue.config.js是整个webpack的配置表，webpack配置表最终会传送给Nodejs服务器，实现整个服务的设置）App.vue：<script>import jsonp from 'jsonp'export default { mounted(){ let url="/api/activity/servicetime"; jsonp(url,(err,res)=>{ let result=r
2020-07-23 12:48:15
177
原创 在Vue中封装Storage
在src下新建一个storage文件夹，在文件夹下新建一个index.js文件，作为数据存储工具箱index.js：const STORAGE_KEY = 'mall';export default { // key: mall value: {"user":{"userName":"yian","age":22,"sex":1}} // 存储值 module_name为模块对象，即user setItem(key, value, module_name) {.
2020-07-23 11:21:15
582
翻译 配置vue-devtools调试工具
下载地址：https://github.com/vuejs/vue-devtools.git克隆项目到本地通过Gitgit clone https://github.com/vuejs/vue-devtools.git通过下载包的方式选择master形式，并下载项目压缩包：下载好后将其解压至项目中通过终端的方式进行操作运行 npm install 安装项目依赖运行 npm run build 进行编译生成将扩展程序添加到chrome浏览器..
2020-07-22 22:31:00
126
原创 Vue CLI4.0的安装与使用
一、Vue CLI4.0的安装与使用安装命令npm install -g @vue/cliyarn global add @vue/clivue --version安装文档https://cli.vuejs.org/guide/installation.html过程演示// 打开终端，安装脚手架npm i -g @vue/cli// 查看版本号vue --version// 创建项目vue create storecd storenpm run serve//
2020-07-22 22:04:04
1012
原创 Git常用的命令操作
分支命令解释说明$ git branch显示所有本地分支$ git branch < new-brach >创建新分支$ git branch -d < brach >删除本地分支$ git checkout < branch / tag >切换到指定分支或标签$ touch < file >在分支中添加新文件$ git status查看状态$ git add < file >
2020-07-22 18:02:14
91
原创 使用Git配置SSH公钥
进入ssh生成公钥和私钥，公钥添加到服务器，私钥放在本地ssh-keygen -t -rsa -C "youremail@example.com”-t 代表类型-rsa 代表非对称加密方式-C 代表指定的地址3. 将项目从GitHub上克隆到本地因之前使用过HTTPS克隆的文件，所以先删除该文件，重新使用SSH克隆文件，才能保证公钥是可以使用的 。 首先，需打开你要想项目存放到本地的目录；其次使用命令git clone +你想要克隆的项目的地址。打开VSCo..
2020-07-21 22:18:10
337
原创 [Vue warn]: http://eslint.org/docs/rules/semi
在vscode的搜索框中输入 useEslint: true；找到后将其改为 useEslint: false；重启项目
2020-07-18 20:59:04
432
翻译 async函数
参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function共有代码：var resolveAfter2Seconds = function() { console.log("starting slow promise"); return new Promise(resolve => { setTimeout(function() { reso
2020-07-17 15:42:16
126
原创 Vue实战——路由跳转传值
一、功能需求点击如下图所示的 “转账到账时间”，进入新界面选择到账类型。选择完成之后跳转到上一个路由，并在界面中进行相应展示。如下图所示，在选择界面选择了 “实时到账”，在该界面进行展示。二、代码展示其中使用了 Mint-UI 中的 Checklist：https://mint-ui.github.io/docs/#/en2/checklistTransferTime.vue<template> <div id="transfertime"> &
2020-07-15 09:31:50
340
原创 Vue实战——实现聊天界面
功能需求根据索引选择跟不同的人进行聊天代码展示mock.js：import Mock from 'mockjs'Mock.mock("/chatchild",{ 'result':[ { id:"001", imgurl:"/static/image/10.jpg", name:"XKDK", date:"09:23", words:"哈哈，好.
2020-07-15 09:31:17
6231
原创 在vue中实现点击文字后的高亮显示
功能需求（1）点击导航栏中的相应文字，其所属栏目就高亮显示，，那这个页面所属的栏目；（2）点击文字之后，进入相应的页面，即实现路由跳转。实现代码Bottom.vue：<template> <div id="bottom"> <ul> <li :class="{checkColor:item.ischeck}" @click="changeColor(index)" v-for="(item,index) in nav" :.
2020-06-28 23:25:08
2189
原创 vue中路由跳转报错
Error: Avoided redundant navigation to current location: "/X".解决：在router文件夹下的index.js中加入代码：import Vue from 'vue'import Router from 'vue-router'import Chat from '../components/Chat.vue'import User from '../components/User.vue'import Find from '../com
2020-06-28 23:06:21
2731
原创 在vue中引入scss
安装 sass-loader 依赖包cnpm install sass-loader --save-dev安装node-sass依赖包cnpm intall node-sass --save-dev在build文件夹下的webpack.base.conf.js中的rules里添加配置{ test: /\.sass$/, loaders: ['style', 'css', 'sass']}在使用的组件中修改 style 标签<style lang="scss">.
2020-06-28 20:39:31
525
原创 在vue中引入Symbol形式的iconfont
在 iconfont 官网中选择并下载需要使用的图标在 static 文件夹中添加iconfont.js文件在index.html文件中引入iconfont.js文件，需注意JS文件的引入路径，如<script type="text/javascript" src="static/iconfont.js"></script>创建 icon-components 组件<template> <svg class="svg-icon" aria-hidde.
2020-06-28 20:25:31
1201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人