- 博客(129)
- 收藏
- 关注
RSS订阅原创 git 本地文件（未初始化仓库地址）推送远程仓库的指定分支
本地代码未初始化仓库地址， 在开发一段时间后需要推送至远程仓库的某个分支上；执行成功后， 当前分支为develop-1.0。命令执行后， 可以看到当前分支是master。
2023-06-01 14:39:01
205
原创 webpack使用gzip 压缩文件
目的：打包体积过大时， 提升web传输性能，使浏览器不卡顿前端对css/js 打包压缩， 后端nginx 也打包压缩， 这样节省服务性能， 在浏览器传输时， 服务端没有找到.gz 文件才进行压缩，而不至于每次都压缩， 消耗性能。
2023-05-30 16:14:15
1265
原创 vue3.0新特性
vue3.0新特性之重： vue-composition-api目录创建项目setup执行时机reactivereftoRefs创建项目1. 安装vue-cli npm i -g @vue/cli2. 创建项目 vue create project3. 在项目中安装并引入composition-api,体验vue3.0新特性 ***npm install @vue/composition-api --save***4. 使用： import Vue from 'vue' import
2020-08-04 15:12:40
1011
原创 代码包上传npm
将自己写的代码包上传到npm， 方便后续下载安装， 步骤如下：上传打开npm官方网站： www.npmjs.com; 进行注册注册需要用户名，密码和邮箱， 当注册完成后需打开邮箱进行验证（邮箱不验证无法上传）打开包所在文件夹， 在根目录下执行 ： npm init //生成package.jsonwin+r打开命令窗口，输入如下命令：npm login // 进行登录后续会让填用户名密码和邮箱；输入命令进行上传 npm publish修改当包有修改的时候，
2020-07-23 14:34:15
406
原创 微信小程序使用npm
微信小程序支持npm啦！使用方法：在小程序根目录执行命令：npm init在小程序根目录进行npm包安装；npm install formatetime --save打开微信开发者工具： 执行工具–构建npm， 生成文件夹minprogram_npm;点击开发工具–详情–本地设置， 勾选‘使用npm模块’在js文件中引入npmimport {countDown} from 'formatetime';this.setData({time: countDown('2020/
2020-07-23 14:16:36
200
原创 vuex的基础使用
安装npm install vuex --save;目录搭建-store -store.js 使用// store.jsimport vue from 'vue'import vuex from 'vuex'vue.use(vuex)export const store = new vuex.Store({ state:{ name:'abc' }， // 获取数据 getters:{ name : (state) =>{ var changeNam
2020-07-22 17:12:20
126
原创 typeScript安装与vscode自动编译
安装全局安装： npm install -g typescriptvsCode自动编译在项目根目录下运行 tsc --init修改tsconfig.json 配置ts文件编译输出路径：“outDir”: “./js”点击“终端 – 配置任务：tsc：监视tsconfig.json”点击“终端-运行任务”选择 tsc: 监视tsconfig.json"...
2020-05-11 11:14:04
173
原创 tabBar页面中使用组件,再切换tabBar页面时对组件进行操作的方法
在项目中遇到切换tabBar页面时对前一个tabBar页面中的组件进行操作的情况, 总结如下:假如有tabBar页面A和 tabBar页面B, A页面有组件;从A切换到B, 对A页面的组件数据进行操作:实现方法:在A页面的组件中加入生命周期:pageLifetimes:{ hide: function() { **// 组件所在的页面被隐藏时执行 即当切换到B页面时的操...
2019-11-15 15:51:30
631
原创 微信小程序父组件调用子组件的方法
父组件调用子组件的方法子组件:<child id="child>methods:{ getF(){ console.log('我是子组件中的方法') }}父组件:通过this.selectComponent(id) 获取子组件this.selectComponent('#child').getF();...
2019-11-15 15:45:08
1351
原创 vue开发过程中遇到的坑
从课程列表页进入课程详情页, 再从课程详情页进入推荐的课程详情页(当前路由)时报错报错详情:解决方法:在router.js 中加入下面的代码const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { return routerPush.call(this, loca...
2019-11-07 17:46:01
485
原创 微信小程序image动态赋值, 高度无法通过boundingClientRect获取高度的问题
数据请求到图片地址, 动态赋值给image时, 直接用boundingClientRect获取不到高度, 解决方法:<image src="{{htpSrc}}" bindload="imageLoad>imageLoad(){ // 710 css里设置的图片宽度 // this.data.windowWidth 手机屏幕宽度 let imgH = Math.floor(...
2019-11-06 10:15:35
3497
原创 TypeScript学习历程
一、typeScript 的安装和编译 全局安装: npm install -g typescript 手动编译: tsc hellowWord.ts 开发工具编译: **VSCode:** 1. cd 本项目 2. 运行 tsc --init 3.打开 tsconfig.json 配置 outDir:"./js"' 4. 终端--配置任务; ...
2019-10-23 20:08:26
383
原创 微信小程序自定义弹窗后禁止页面滑动的两种情况
1.页面根部不使用scroll-viewa) 弹窗无滚动效果 如果弹窗不需要滚动, 直接在弹窗的根节点添加 catchtouchmove="return"b) 弹窗有滚动效果 如果弹窗需要滚动; page{ height: 100% } .container // 页面根节点 style="{{overflow-y: flag? 'hidden':'auto'}}"...
2019-10-22 16:38:39
1843
原创 微信小程序外链H5采坑纪事
微信小程序外链H5页面是通过web-view 组件实现的, 在外链的H5页面上不可避免的会传递参数, 这是可通过url传递, 在H5页面截取?之后的参数获取,从而做他用.需要注意的是: 将H5的链接赋给web-view的src时, 要整体复制, 不要使用插值的形式, 例如下面:<web-view src="{{H5Url}}"> </web-view >data:{...
2018-11-07 17:24:36
1308
原创 Visual Studio Code上传代码到github
前期准备 安装Visual Studio Code 安装git 在github上新建仓库, 例如 vsdemo 在本机磁盘下新建一个文件夹 ,例如vs 上传到github将vs文件夹添加到编辑器中打开终端 输入git init 这样就初始化了一个本地仓库新建个文件 例如readme.txt在终端中添加文件到远程仓库.git add readme.txt...
2018-10-18 17:11:42
15159
原创 webpack 多页面配置 -- 多配置和单配置
多配置目录: src – css \ index.html \ pages \ components pages: a.js b.js c.js css : a.css b.css c.css components: module.jsa.js页面:import react from 'react'import moduleA from '../components/modu...
2018-08-01 16:25:13
1393
原创 webpack -- 长缓存优化
场景一: 改变业务代码, 第三方(vendor)不变化解决: 1. 提取第三方代码 2. 将hash –> chunkhash 3. 提取 webpack runtimevar path = require('path')var webpack = require('webpack')module.exports = { entry:{ main:'...
2018-08-01 15:15:30
2158
原创 webpack - 打包速度优化
方法一: 区分第三方代码(vender)和业务代码(app) DllPlugin DllReferencePlugin 这两个插件设置打包好的第三方代码不再打包 第一步: 在build文件中新建一个webpack.dll.config.js 第二部: 配置webpack.dll.config.js const path = require('path'); cons...
2018-08-01 14:38:59
1233
原创 webpack 打包结果分析
官方工具: offical Analyse Tool 运行命令: mac: webpack –profile –json >stats.json window:webpack –profile –json | Out-file’stats.json’ -Encoding OEM生成json文件后上传到 http://webpack.github.io/anal...
2018-08-01 13:48:22
3200
原创 webpack环境 -- 开发环境和生产环境的区分
开发环境的需求:模块热更新 sourceMap 接口代理 代码规范检查生产环境的需求提取公共代码 压缩混淆 文件压缩/base64编码 去除无用的代码二者共同点: 同样的入口 同样的代码处理(loader处理) 同样的解析配置使用webpack-merge拼接开发环境和生产环境: 配置文件: webpack.dev.conf.js webpack.p...
2018-07-31 16:19:52
8039
原创 webpack环境 -- 开启调试 sourceMap
Source Map 调试: 插件: devtool webpack.SourceMapDevToolPlugin webpack.EvalSourceMapDevToolPlugin开发环境配置值development:eval eval-source-mapcheap-eval-source-mapcheap-module-eva...
2018-07-31 15:06:40
6301
原创 webpack环境 -- webpack-dev-server 模块热更新
配置devServer: devServer:{ hot: true }配置插件: plugins:[ new webpack.HotModuleReplacementPlugin(), new webpack.NameModulesPlugin() ]
2018-07-31 14:40:25
644
原创 webpack环境 -- webpack -watch
运行 webpack -watch 可自动搭建一个服务器环境. webpack -w –progress 查看打包进度 插件 : clean-webpack-plugin 每次打包清除插件var ClearWebpackPlugin = require('clean-webpack-plugin')plugins:[ new ClearWebpackPlugin (['di...
2018-07-31 13:26:43
1078
原创 webpack 配合优化
提前载入 webpack 加载代码插件: html-webpack-inline-chunk-plugin: 将选择的chunk插入到html中 inline-manifest-webpack-plugin 将webpack生成的代码插入到html中webpack配置rules:[ { test:/\.js$/, use:[ ...
2018-07-31 12:02:55
547
原创 webpack基础 -- 处理html中引入的图片
使用: html-loader options: { attrs:[img:src] } <\img src=”src/assets/img/demo.png” data-src=”src/assets/img/demo1.png” />’ webpack 配置rules:[ { test:/\.(png|jpg|jpeg|gif)$/,...
2018-07-31 11:51:30
3636
1
原创 webpack基础 -- 生成html
插件: html-webpack-plugin options: template:模板文件 filename: 输出文件名 minify: 是否压缩html文件 chunks: 生成的html文件中需要加载哪些chunk inject: 是否以将css/js以标签的...
2018-07-31 11:34:31
256
原创 webpack基础--- 处理第三方js库
场景: 使用cdn 和本地文件 使用 webpack.providePlugin imports-loader 当第三方JS库是在自己定义的文件夹中, 要用resolve配置一下别名使用插件:resolve:{ alias:{ jquery$:path.resolve(__dirname,'src/libs/jquery.min.js') ...
2018-07-31 11:20:32
1136
原创 webpack基础 -- 字体文件处理
使用 file-loader url-loader –save-devrules:{ { test:/\.(eot|woff2|woff|ttf|svg)/, use:[ {loader:'url-loader', options:{ name:'[name][hash:5...
2018-07-31 10:09:42
1842
原创 webpack环境 -- webpack-dev-server 远程代理
webpack-dev-server安装 npm install webpack-dev-server –save-dev 参数: inline: true, // 默认为true, false时页面顶端有一个状态条, 显示的是页面的打包状态 contentBase: //提供内容的路径,false为本地路径 port: // 监听的端口号 hi...
2018-07-17 17:43:04
1251
2
原创 webpack基础 -- 图片处理
需要的loader: url-loader file-loader img-loader postcss-sprites
2018-07-17 16:13:51
732
原创 webpack基础 -- Tree Shaking
作用: 常规优化 \ 引入第三方库中的某一个功能 ; 将项目中没用到的代码剔除. 优化第三方库时注意: 如果是用module.export方式写的, 可以用treeShaking, 否则要借助插件才能进行优化.分为两种: JS Tree Shaking 和 CSS Tree ShakingJS Tree Shaking用到 webpack.optimize.Uglif...
2018-07-17 15:16:47
516
原创 webpack基础 -- PostCSS
postcss: 在打包时期作用.安装: postcss / postcss-loader / postcss-cssnano / postcss-cssnext / autoprefixer npm install postcss postcss-loader cssnano postcss-cssnext autoprefixer –save-dev autopr...
2018-07-17 14:12:45
571
原创 webpack基础 -- 提取css
提取css需要的插件 : extract-text-webpack-plugin 安装: npm install extract-text-webpack-plugin –save-dev
2018-07-13 15:53:04
908
原创 webpack基础 -- Less / Sass
less需要的loader: style-loader css-loader less-loader 另外需要安装less 安装: npm install style-loader css-loader less-loader less –save-dev在写loader的时候要注意顺序, loader是从后往前执行的 rules:[ { ...
2018-07-13 15:38:51
323
原创 webpack基础 -- css相关处理
css的处理 相关loader : 1.style-loader(处理标签, 生成插入html) –&gt; style-loader/url style-loader/useable 2.css-loader (处理js引入css) 安装: npm install style-loader css-loader –save-dev准备页面: app.j...
2018-07-13 14:40:28
177
原创 webpack基础--代码分割和懒加载
代码分割和懒加载内置方法和Loaderrequire.ensure()内置方法:require.ensure([dependencies], callback,errorCalback,chunkName) 动态加载代码 参数: dependencies: 依赖项, 是一个数组, 不会执行 callback: 在这里执行代码 errorCallback: 可省略 chunkN...
2018-07-13 10:47:40
1733
原创 webpack基础 -- 打包公共代码
打包公共代码使用: CommonsChunkPlugin; 插件提取注意: plugins中 可以有多可 CommonsChunkPlugin 分别提取自己写的和第三方的; 将自己写的公共代码放在前面提取, 第三方的代码放在后面提取,...
2018-07-12 17:20:44
720
原创 webpack基础 -- 编译Typescript
编译Typescript (JS的超集)安装: npm install typescript ts-loader –save-dev (官方) npm install awesome-typescript-loader –save-dev (第三方)配置: tsconfig.json webpack.config.js ...
2018-07-12 16:35:49
621
原创 webpack基础 -- 编译ES6
webpack编译ES6安装babel: npm install babel-loader babel-core –save-dev
2018-07-12 14:32:59
470
原创 webpack基础 --打包js
webpack 打包js通过 命令行工具打包: webpack app.js boundle.js; 打包完成后会在同目录下生成boundle.js. app.js: 入口文件; boundle.js: 打包好的文件,
2018-07-12 14:00:24
920
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人