- 博客(39)
- 收藏
- 关注
RSS订阅原创 git学习笔记05：多人开发代码上传合并命令
正常项目开发管理过程中常用的git命令如下：git add .git commit -m "本次修改主要内容"git push origin master// github新建项目主分支名已变更为main，老项目目标不变，新命令如下git push origin main以上是正常情况下， 多人协作开发项目不存在同时修改同一个页面的情况，如果在项目开发过程中，存在多人同时修改了同一个文件，此时如果按以上命令，多人分别执行，则就会产生代码提交冲突，Git有如下几个命令，用来先解决冲突，再进行上传
2021-10-19 09:03:37
566
原创 vue+element+aixos上传文件formData形式传参
element的上传文件组件可在action里直接写上传文件的接口，但一般vue+element项目都是封装了axios请求的，所以都会选择适用http-request做自定义上传，我在做这个的过程中遇到的问题：我的代码是这样子滴：<el-upload class="upload-demo" action="none" :on-remove="handleRemove" :before-remove="beforeRemove" :http-request=
2021-07-27 18:26:13
569
原创 HTML页面中meta的相关配置
1. Keywords (关键字)说明：告诉搜索引擎你网页的关键字是什么。用法：<meta name="keywords" content="***">2. Description (网页描述)说明：Description用来告诉搜索引擎你的网页主要内容。用法：<meta name="description" content="***" />3. Rob...
2019-09-09 10:08:28
1620
原创 scss安装及使用总结
安装scss这里说一下比较常用的方法，我这里主要是针对项目开发方式的不同，使用两种不同的方法：模块化开发模块化开发通常因为会使用gulp、grunt、 webpack等工具，所以scss会作为项目的一个模块来使用，这种情况下，通常是通过npm包管理来下载scss相关插件包，并在项目中设置好让scss能正常工作的配置，关于这些配置，可以看我的webpack4.x系列的样式配置相关文章。非模块...
2019-06-05 17:45:19
6088
原创 常用scss占位符、混合宏mixin及引用方法
水平居中// Center-align a block level element// block得有宽度margin左右为auto才能居中@mixin center-block { margin-left: auto; margin-right: auto;}%center-block{ @include center-block;}绝对居中@mixin cente...
2019-05-20 15:17:59
992
原创 整理css小样式
背景透明文字不透明background: #ffffff;background:rgba(255,255,255,.8) none repeat scroll 0 0 !important;filter:Alpha(opacity=80);半透明opacity:0.8;filter:alpha(opacity=80);多行文本溢出显示省略号overflow : hidden;...
2019-05-20 15:03:10
149
原创 webpack4配置之——26：postcss-loader遇到的坑
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里postcss.config.js 文件的数据格式问题在我配置vue项目时，需要用vue-loader配合postcss-loader做配置时，发现了本项目存在的一个问题：我在postcss.config.js中配置了parser:'postcss-scss'，这里在未配置vue-loader之前，只有css,scss,less...
2019-04-08 21:27:36
15494
原创 git学习笔记04：创建、合并、删除分支
在多人协作开发一个项目，或者需要重现BUG测试时，都需要去创建分支，最后再归到一起提交到远程。创建分支// 创建并切换到dev分支git checkout -b dev这是一个合并的命令，其相当于以下两个命令：// 创建dev分支git branch dev// 切换到dev分支git checkout dev查看当前分支：git branch该命令会列出所有分支，当前...
2019-04-07 19:04:10
500
原创 git学习笔记03：从远程克隆库
在此之前已经知道了如何将本地库的代码上传到远程库，这里会记录一下如何从远程克隆库到本地。当需要从github上下载别人的代码，或者下载自己在其他电脑上传的项目代码时，我们需要先在终端中定位到该项目想放在的父级文件夹下，然后执行如下操作：git clone [email protected]:yourName/RepositoryName.git在命令执行完后，该项目就已经被克隆到本地了，如果是自...
2019-04-07 18:49:06
257
原创 git学习笔记02：添加远程库
当本地版本库创建好后，需要将其添加到远程仓库，这样才能做到多人协作，或者在不同电脑获取同一项目代码。创建ssh key 关联添加远程库，首先需要注册并登录github,然后启动git bash，创建本地ssh key 在git bash中输入以下命令：ssh-keygen -t rsa -C "[email protected]"之后会要求确认路径和密码，使用默认就是不设置密码，一路...
2019-04-07 18:19:36
243
原创 git学习笔记01：创建版本库并添加文件到版本库
创建版本库让git管理项目，每个文件的删除、修改、添加，git都能追踪到给项目创建本地版本库非常简单，终端找到项目根目录，并执行以下命令：git init此时，本地版本库就已经创建好了，在当前根目录下回多出一个.git目录，这个目录是git用来管理版本库的，该目录默认是隐藏状态，用ls -ah命令可以看见该目录。文件添加到版本库git add demo.htmlgit add d...
2019-04-07 17:38:03
269
原创 webpack4配置之——25：webpack引入eslint
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里webpack 引入 eslint首先安装webpack支持eslint三件套:yarn add eslint eslint-loader eslint-friendly-formatter -D然后修改webpack.dev.conf.js文件，添加如下rule：{ test: /\.js$/, use:...
2019-04-04 16:07:49
3035
原创 webpack4配置之——24：细说webpack4打包及拆分代码
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里webpack4.x打包拆分在第14章开发、生产环境的拆分代码中，其实已经对webpack4.x的打包拆分，做过简单的介绍，但是在当时我对这一块其实也是一脸懵逼状态，只知道是这样配置的，但是具体该如何操作也是不清楚的，这里会略微细说一下，当然也只是个人了解到的了在上一章中，说到过对第三方插件库的打包问题，说到了打包速度和打包后包...
2019-04-04 16:06:40
3254
原创 webpack4配置之——23：细说webpack4引入第三方库
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里webpack4 对 JS 文件的引入在本项目的第19章引入第三方插件库中，已经说过一种对 JS 的引入方法，就是使用 expose-loader，而对非npm 包的引入也在那一章做过介绍，那么引入第三方插件并不是只有那一种办法，这里主要介绍一下其他的引入方法。其实不用expose-loader也能引入，也能用，只是不够完美，这...
2019-04-04 16:05:29
1903
原创 webpack4配置之——22：辅助插件-cross-env、friendly-errors-webpack-plugin、node-notifier、webpack-bundle-analyzer
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里cross-envyarn add cross-env -Dcross-env 能够跨平台的设置及使用环境变量，修改package.json 文件的命令："dev": "cross-env NODE_ENV=development webpack --config webpack.dev.conf.js","start":...
2019-04-04 16:03:56
1557
原创 webpack4配置之——21：生产环境打包静态资源
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里生产环境打包静态资源一个完整的项目，不仅有开发依赖的各种文件需要打包上传到服务器上，也许还会有各种开发文档，项目中没引用过的图片、设计图、或者会有一些静态页面不需要编译，也要上传到服务器上，以方便预览。这里就需要用到插件copy-webpack-plugin，首先下载该插件：yarn add copy-webpack-plug...
2019-04-04 16:01:21
2637
原创 yarn常用命令、设置镜像以及设置node-sass镜像源
项目初始化yarn inityarn init --yes / yarn init -y全局安装yarn global add packageName安装项目依赖yarn add packageName安装开发依赖yarn add packageName --dev/yarn add packageName -D移除安装包yarn remove packageName/...
2019-03-29 20:59:51
5081
原创 判断IE浏览器的文档模式以及浏览器模式
IE浏览器的浏览器模式和文档模式判断浏览器模式：function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MS...
2019-03-25 13:27:42
1029
原创 webpack4配置之——20：发布并预览测试及生产环境
发布测试及生产环境一个项目从开发到测试到上线，这个过程的三个阶段，需要三个环境的代码,也就需要三套webpack配置文件开发环境(webpack.dev.conf.js)：怎么方便怎么来~，想怎么配置就怎么配置；测试环境(webpack.test.conf.js)：测试环境的配置与生产环境要一致，以达到在测试环境还原生产环境BUG的目的，其与生产环境不同之处在于，测试环境打包可以不用压缩，...
2019-03-21 18:43:13
728
原创 webpack4配置之——19：引入第三方插件库
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里引入npm包管理的第三方插件库对于第三方插件库，用到最多的莫过于jquery了~，就先以jquery为例，因为是要全局使用，所以需要将其暴露给全局，网上有很多种配置方法，但是觉得最靠谱的应该就是接下来要介绍的这种，需要使用到expose-loader：yarn add jquery -Syarn add expose-load...
2019-03-21 18:42:52
923
原创 webpack4配置之——18：html-loader与HtmlWebpackPlugin的冲突
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里html-loader与HtmlWebpackPlugin的冲突在配置图片那篇文章中，用到了html-loader，当时只看到了html文件中引用的图片被加载出来了，但是却没发现HtmlWebpackPlugin插件在解析html 文件时，ejs语法却未正常解析出来，这里我设置了标题是通过ejs语法获取的HtmlWebpackPl...
2019-03-21 18:42:21
9501
3
原创 webpack4配置之——17：yarn替代npm方案
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里yarn 比 npm 更优秀过去的很长一段时间内，一直都在使用npm 安装各种插件包，但是，出错率实在是太大了~ 各种意想不到的问题层出不穷，只一个node-sass 就够让人受的了~ 更别说，用npm 安装插件包，还总是会出现漏装依赖插件的情况，在使用过yarn后就再也不想用npm了~npm install yarn -g...
2019-03-21 18:41:42
438
原创 webpack4配置之——16：viewport适配移动端
移动端适配配置这里将之前的优化框架相关内容删除了，框架上的东西在看过我这之前的文章后，应该对webpack 已经有了了解，那么在这个基础上，去看vue-cli或者create-react-app，看它们的 webpack 配置，起码能知道该如何去修改了，在它们的基础上，去搭配出适合自己项目的脚手架。本文将主要记录下我在使用 viewport 适配移动端时，学习的一些东西~移动端首先最重要的是...
2019-03-21 18:41:10
770
原创 webpack4配置之——15：模版解析配置项
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里模板解析配置项webpack 还有一个配置项 resolve 它有很多配置项，具体可以看 https://webpack.js.org/configuration/resolve/下面三项是我觉得特别有用的：// 模版解析配置项resolve: { // 设置可省略文件后缀名 extensions: [' '...
2019-03-21 18:40:43
211
原创 webpack4配置之——14：开发、生产环境的拆分代码
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里开发、生产环境的拆分代码目前我们打包的 js 代码，都在一个文件内，这会让这个文件变得非常大项目中不可避免要使用第三方库，比如：Jquery react vue 等等，这些在项目上线后，依然需要依赖的库相关的 JS 代码，我们需要单独拆分出来，并打包到一个文件内，这些代码因为基不会发生改变，所以单独分离出来，因为有了缓存的缘故，...
2019-03-21 18:40:18
543
原创 webpack4配置之——13：生产环境代码压缩
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里生产环境代码压缩虽说生产环境只要配置了 mode:"production" 就能实现 js 的代码压缩，但我们不仅要压缩 js 代码，还需要压缩 css html 文件可以先打开 bin/css/app.css 文件，会发现，css 文件格式是未压缩的之前的章节中已经抽取了 css 文件，用到了 mini-css-extrac...
2019-03-21 18:39:46
3086
原创 webpack4配置之——12：CleanWebpackPlugin
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里clean-webpack-plugin在上一章我们把 css 单独抽离出来，但是打开 js 文件夹，会发现，这里有两个 app.js 文件，只是 hash 值不同而已，打开 dist/index.html 文件，发现其引用了其中的一个，也就是说，另一个是完全没用的，当我们修改入口文件的 js 代码，再次执行 npm run bu...
2019-03-21 18:39:11
2602
原创 webpack4配置之——11：分离css
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里分离 css在之前的版本中，分离 css 一直用的是 extract-text-webpack-plugin，但是如果在 webpack4.x 上继续使用，你会发现它会报错的，要想继续使用这个插件，必须 npm i extract-text-webpack-plugin@next -D 才可以，这样下载的就是最新的版本，而不是稳定...
2019-03-21 18:38:34
556
原创 webpack4配置之——10：配置生产环境webpack
配置生产环境根目录下新建一个 webpack.prod.conf.js 文件先将 webpack.dev.conf.js 文件的内容，全部复制到该文件中然后我们需要做以下几处修改：删除 devServer 配置项的代码出口配置 filename: 'js/[name].[hash].js' 改为 filename: 'js/[name].[chunkhash].js'， 开发环境设置为...
2019-03-20 21:20:22
287
原创 webpack4配置之——09：配置babel7
安装 babel 相关插件npm install babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime -D项目根目录添加 .babelrc 文件在 .babelrc 文件中加入以下代码：{ "presets": [ ["@babel/preset-e...
2019-03-20 21:20:02
3499
原创 webpack4配置之——08：初步优化开发环境
优化项开发调试所用的 sourcemapjs 文件增加 hash 值，方便缓存配置模块热更新增加 sourcemap开发过程中，代码出错是难免的，那么调试就很重要了，webpack 帮我们打包所有文件，省了我们很多事情，但打包后的代码，却不适合用来调试，可以通过在 webpack 中增加 devtool 配置，来向浏览器暴露我们的源码，让我们可以在源码的基础上，进行调试...
2019-03-20 21:19:35
206
原创 webpack4配置之——07：配置图片、文件、图标文字
配置图片依赖图片的打包编译使用了 url-loader，file-loader，html-loader 依赖npm install url-loader file-loader html-loader -D更新 webpack.dev.conf.js 文件，添加图片依赖{ test: /\.(png|jp?g|gif|svg)$/, use: [ { ...
2019-03-20 21:19:09
487
原创 webpack4配置之——06：配置样式-css、postcss、scss、less
编译 CSS 文件处理 css 的相关技术有 postcss、 scss、less，接下来，会一一介绍.css 文件的编译编译 .css 文件，需要用到 css-loader 和 style-loadercss-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能；style-loader 将所有的计算后的样式加入页面中； 二者组合...
2019-03-20 21:18:26
3473
原创 webpack4配置之——05：获取ip并打开浏览器
打开浏览器在此之前，在浏览器打开项目，我们都需要，到文件夹去找 dist/index.html 直接打开，启动服务后，需要复制 http://localhost:8080 到浏览器打开在这里，可以省去这些步骤，在启动服务后，直接自动在默认浏览器打开项目预览安装相关插件npm install opn chalk -D更新 webpack.dev.conf.js 文件，文件顶部先引入插件...
2019-03-20 21:17:47
1428
原创 webpack4.x配置04：配置开发服务
开发服务此前，我们要浏览页面都是在项目文件夹中，直接点击要浏览的文件，在浏览器中打开浏览，但是这种浏览方式还是太麻烦，而且，如果是移动端开发，想在手机上预览效果，就没有办法了，开了服务，我们可以通过本地服务浏览文件，也能在手机预览开发效果。这就需要用到 webpack-dev-server 插件了安装 webpack-dev-servernpm install webpack-dev-se...
2019-03-20 21:17:16
273
原创 webpack4.x配置03：HtmlWebpackPlugin
html-webpack-plugin上一章我们在 dist 目录下创建了一个 index.html 文件，并且手动在里面引入了我们生成的 bundle.js 文件这里需要知道，dist 整个文件夹和里面的内容，我们之前是没有手动创建的，这个是我们执行命令后，自动创建的，dist 目录属于构建目录，是我们源码的输出目录，我们希望里面的一切都是可以自动化的，包括 index.html 文件也能自...
2019-03-20 21:16:37
877
原创 webpack4.x配置02：配置基础的开发环境webpack
项目初始化 package.json 文件新建一个项目文件夹并用 vscode 打开该文件夹，作为项目根目录文件夹打开 vscode 的终端命令行，开始初始化 package.json 文件npm init -y当然，也可以不加最后的 -y ，那样的话，跟着命令行提示一步一步走，按提示可以输入自己的配置加上 -y ，省去这些步骤，直接在根目录生成 package.j...
2019-03-20 21:15:53
397
1
原创 webpack4.x配置01：项目准备工作
工作环境准备安装 node npm Git vscodenode.jshttp://nodejs.cn/ http://nodejs.org/#download 使用这些技术，node.js 是必须的，从官网下载并安装到自己的电脑，你需要配置并知道自己把它安装到了哪里，我的安装目录：D：/nodenpm通常安装过 node 后就会自动安装了 npm,node 安装成功后，wi...
2019-03-20 21:11:25
347
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人