前面我们说过,一个项目需要哪些依赖包是需要一个配置文件的,不然别人拿到你的项目之后或者程序运行的时候怎么知道你的项目需要哪些呢?这个文件就是记录该项目需要的一些依赖包的,比如上面的,当我们拿到之后就知道,这个项目需要三个运行依赖和一个开发依赖
上一章,咱们学了如何用webpack来打包css,压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说,咱们开始吧。 首先,咱们随便找一张你喜欢的图片放到src/images目录下,然后把图片设置为背景图片,代码是这个样子。 src/index.html: <script src="./entry1.js"></script> <script
上一章,咱们学了如何用webpack来打包css,压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说,咱们开始吧。
上一篇文章留下了一些问题,如果你没看过上一篇文章,可以在我的博客里查找,或者直接从这篇文章开始也是没问题的。
好吧,没写之前简单的说一下为什么要写,我还是怀着比较沉重的心情写的这篇教程,主要是心里没底,不知道能写明白不,不过既然提笔了,那就硬着头皮写吧,没办法,毕竟跌跌撞撞总算是搞出来了。还有就是我百度了,没有教程,所以更坚定了我写这篇博文的心。
上一篇文章留下了一些问题,如果你没看过上一篇文章,可以在我的博客里查找,或者直接从这篇文章开始也是没问题的。 const path = require('path'); module.exports={ entry:{ entry:'./src/entry.js' }, output:{ path:path.resolve(__dirname,'dist'), /*上面的代码中还有path以及__dirname的意思就是指获取到当前项目的绝对路径
首先需要cmd将路由模块装上,然后重启项目,多打几遍就熟悉了npm run dev,在下面的黑窗口中,我之前已经装过了路由模块,显示如下
模块概览 readline是个非常实用的模块。如名字所示,主要用来实现逐行读取,比如读取用户输入,或者读取文件内容。常见使用场景有下面几种,本文会逐一举例说明。本文相关代码可在笔者github上找到。
readline是个非常实用的模块。如名字所示,主要用来实现逐行读取,比如读取用户输入,或者读取文件内容。常见使用场景有下面几种,本文会逐一举例说明。本文相关代码可在笔者github上找到。
作为一个对JS不资深的人,为什么选择yarn,抛弃npm。很明显。yarn是在npm的基础上进行改进的,弥补了速度,缓存,安全等方面的不足之处。
Babel 入门指南 ⚠️ 注意: Babel 可以与很多构建工具(如 Browserify、Grunt、Gulp 等)进行集成。由于本教程选择 Webpack ,所以只讲解与 Webpack
本文由Vikings(http://www.cnblogs.com/vikings-blog/) 原创,转载请标明.谢谢! 上节课,我们打造了一下IDE工具-web storm的显示界面。至少现在回到熟悉的sublime text界面了。这节课就开始正式学习nodejs了。 当我在web-storm创建了一个nodejs工程之后,首先浏览了一下工程结构,如下图所示: image.png Nodejs 的工程结构还是较为简单的。各个目录功能基本都能猜个八九不离十。但在最下面的p
这是一篇教你使用github和Hexo搭建自己独立博客的教程,里面介绍了如何使用和配置Hexo框架。如何将Hexo部署到自己的Github项目中等等。
接着会问我们是否使用history router,其实直白来说就是是否路径带 # 号,建议选择 n,否则服务器还要进行配置
而在 NodeJS 中为了方便开发人员发布、安装和管理包,,NodeJS 推出了一个包管理工具 NPM ( Node Package Manager )。
有则笑话,如此讲到:“老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成。我嘴一抽,来了句:人和动物最大的区别就是人会使用工具。……”。撇开这样特例场景,这句话还是非常用有道理的;毕竟从远古石器时期或更早,到如今,所言之语,所穿之衣,代步之车,所学的知识,所晓的常识.....皆是工具;可以说绝大部分人之间的差异(天才级除外),仅在于工具使用之优劣罢了。在工具的使用中,很多人极大程度上停留于会用层面,如若不遇到问题,几乎就处于停滞;这本身倒也没有问题,但可能因为没有透彻的了解,而错失了对该物可以拥有的想象力,从而错过了许多本该有的美好,如此的可惜。
README.md文件是一个项目的入门手册,里面介绍了整个项目的使用、功能等等。所以README文件写得好不好,关系到这个项目能不能更容易的被其他人了解和使用。
文章目录 npm 是什么? 安装 npm 更新 npm package.json 文件 package.json 如何创建 package.json 的内容 dependencies(生产环境)和 devDependencies(开发环境)的区别 指定安装包的版本 自定义 package.json 安装包文件 引用文件库 npm 是什么? npm(node package manager):node.js 的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) ,npm 是随同 node.js 一
书接上文,上回咱们说到了《【Blog.Core开源】完成升级.NET 6.0》,只是代码层面的升级,今天趁着周末正好把生产环境也升级下(大家可以酌情升级哟)。过程很简单,自从用了容器化,再配上CI/CD,发布升级什么的都不是问题了,顺便也把我自定义的Jenkins升级下。
npm是nodejs的包管理器,在当今工程化前端开发过程中,npm包起着举足轻重的作用。
npm有两种方式安装第三方模块:本地安装和全局安装,使用哪种安装方式,取决于我们用npm模块来做什么。
注:bower下载安装依赖库实际上是使用git进行下载。对于linux系统,由于默认都有安装git,所以一般没问题。但是windows系统一般没有git。在windows系统下需要确定安装了git客户端,建议使用同捆的git bash命令行来执行bower install命令。或者把git目录加入windows的环境变量中,再在命令行中执行bower install命令。()
有则笑话,如此讲到:“老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成。我嘴一抽,来了句:人和动物最大的区别就是人会使用工具。……”。撇开这样特例场景,这句话还是非常用有道理的;毕竟从远古石器时期或更早,到如今,所言之语,所穿之衣,代步之车,所学的知识,所晓的常识…..皆是工具;可以说绝大部分人之间的差异(天才级除外),仅在于工具使用之优劣罢了。在工具的使用中,很多人极大程度上停留于会用层面,如若不遇到问题,几乎就处于停滞;这本身倒也没有
介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行自定义的优化配置,比如为生产环境拆分 vendor/css/js 代码,无刷新热重载(hot-reload)等. Webpack可以做什么 处理module依赖关系 打包js,css和png等 降低页面初始加载时间 方便组合第三方组件库 可以转换不同语法成标准语法 安装 这里使用
nodejs是最好的语言没有之一 但是坑确实很多,package.json 最为严重。
Babel 用于将 ES6 的代码转化为 ES5,使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。本文将介绍如何使用 babel,以及一些相关的配置。
欢迎来到这篇充满激情的教程!在这里,我们将一同踏上一个令人激动的旅程,学习如何将你的代码打包成NPM包,并在全球开发者社区分享。不管你是初学者还是有一些经验,本文将以友好的语言引导你,让你的代码走向世界!
从这篇文章开始,我们重新来学习一下React的官网。本文从经典的Hello World示例未开始,给大家介绍下react应用的创建,通过本文的介绍,我们学会新建一个react应用。
目前移动端的适配方案一般就是两种,一个是rem方案,一个就是vw的方案,本篇就是一次性讲清楚如何去运用这两种方案来解决问题。 panda-vue-template 手把手搭建vue小商城2.0 1、关于rem rem的原理什么的我就不说了,网上搜文章一搜一大把。 一般是使用手淘的lib-flexible.js,但是这个作为一种过渡方案已经被废弃了,目前已不推荐在你的新项目中使用这个方案来解决手机适配问题。 感兴趣可以看看我老早以前写的这篇-->手机适配问题之rem和lib-flexible,我
webpack从0到1-使用babel打包 讲下webpack中的loaders的概念,然后结合使用babel-loader来对项目中的es6语法做下转换。 git仓库:webpack-demo 1、什么是loaders? 先看官网对Loaders的解释:webpack enables use of loaders to preprocess files。 简单一点来说就是一个可以帮我们处理文件的东西,比如一个js文件,在webpack打包的时候看到这个js文件就会走我们定义的比如接下来要说的bab
Babel 是一个用于 JavaScript 的通用多用途编译器,使用 Babel 可以使用(或创建)下一代 的JavaScript,以及下一代 JavaScript 工具。 作为一门语言,JavaScript 不断发展,带来了很多新的规范和建议,使用 Babel 可以让你在这些新的规范和建议全面普及之前就提前使用它们。 Babel 通过将最新标准的 JavaScript 代码编译为已经在目前可以工作的代码来实现上一段提到的内容。这个过程被称为 “源代码到源代码” 的编译,这也被成为 “转换”。
作为一篇新手入门,这篇文章没有太多的技巧和花式,只是从零开始带你学习和掌握express的开发应用,比较适合于完全没有使用过express的新手,以及其他非前端同学。
测试是开发周期中的一个重要组成部分。没有测试的代码被称为:遗留代码。对于我而言,第一次学习 React 和 JavaScript 的时候,感到很有压力。如果你也是刚开始学习 JS/React,并加入他们的社区,那么也可能会有相同的感觉。想到的会是:
从上午一直弄到晚上,自从使用butterfly的博客主题后,小编跟随主题的更新就没停过,这不,最新的主题需要将hexo更新到5.0以上的版本啦。
在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好的构建项目如:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做。 在真正的正文开始之前,我们先做一个小demo,就像所有的故事背景那样,这篇文章也作为该系列的故事背景。废话不多说,咱们开始吧。 一、安装(环境)
现在使用的版本管理工具,首选应该都是git,入职到现在,git之外的版本管理工具也就最开始使用过svn。现在的项目,规范也越来越重要,所以才有各种强制的代码格式检测。当然,自己做过的项目还没有那么严格过,顶多就是一些格式化和eslint的统一。
新建一个COMMONJS文件夹,然后 npm init初始化packe.json(只需要回车就可以)。 modules用于存放所有子模块。modules的同级创建一个app.js它去使用其他子模块。
参考链接: 移动端1px解决方案 vue-cli css相关 normalize.css
上节讲了下webpack的loaders,然后尝试用babel-loader打包了下,想这些基础的loader还有一些需要介绍一下,本章说下关于打包图片资源的loader:file-loader和url-loader。 git仓库:webpack-demo 1、开始 老规矩,复制一份上章的目录改名为chapter4。 随着找张图片放到src/assets目录下,并同时新建一个logo.js文件。 webpack-demo/chapter4 ... |- /src + |- /asset
老板安排了一个图表需求,让我未使用过的React框架上编写一个图表,查询了一圈之后头晕脑胀的,一大堆图表工具echarts , G2什么的,傻傻搞不清楚。明天就要交需求的,想来想去,只有像Excel那种生成图表的工具才能救我。搜索了一圈之后,只有居然都是收费的,还卖得很贵。想去发帖求助,觉得花两千雇个来帮我写一下,一时半会也找不到。公司就我一个前端程序员,也没有后端来帮忙一下。咋整!
*puppeteer.use(require('puppeteer-extra-plugin-sicanic/evasions/console.debug')())
1、上篇我们为了便于展示,把头部my-header组件放在了App.vue页面,现在我们删掉App.vue里面的头部组件然后我们在view文件里面新建一个home.vue页面,然后把头部组件和今天要讲的轮播图组件都放在home.vue页面。
在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好的构建项目如:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做。
wordpress的话,后台“工具->导出”就可以生成。点点和lofter也支持类似操作。如果遇到不支持导出xml的博客,先用http://www.diandian.com/transfer/转到点点,再用http://www.diandian.com/backup导出XML文件。
前两天用了一下微前端框架 icestark, 在实际架构搭建过程中发现中发现在 Vue 主应用子应用之间切换 tag (tag 分别主应用和子应用的页面)页签时会有子应用数据状态无法保存的情况,搜索了一波解决方案后发现,icestark 中 React 应用实现了对数据状态的缓存,Vue 里面没有这个实现。
准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。
vue init webpack prjectName 与 vue create projectName 有什么区别呢?
在使用Openlayer的时候可以npm install openlayers --save也可以使用 npm install ol --save 明显感觉前面安装特别慢。
领取专属 10元无门槛券
手把手带您无忧上云