前段时间刚好在开发公司的首页,使用的是gulp工作流,gulp相对于webpack而言,配置简单,也更加直观(很符合直觉),日常开发一些静态页面.html5专题也足够,这里把遇到的坑与实践经验记录一下. gulp api 非常简单,由5个方法组成:task run watch src dest,复杂的功能由插件的形式来实现. 整体的工作流程就是 取出文件 => 各种处理一番 => 输出 task 创建任务,在命令行下可以输入 gulp test 来执行test的任务. run 运行任务 wat…

Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图. JS基本特效: 常见特效.例如:tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图. JS高级特征: 正则表达式.排序算法.递归算法.闭包.函数节流.作用域链.基于距离运动框架.面向…

0.环境搭建 笔者使用的是deepin/mac两种系统,因为两个电脑经常切换用.环境搭建没什么区别. 0.1 node安装 按照node官网叙述安装 # Using Debian, as root curl -sL https://deb.nodesource.com/setup_10.x | bash - apt-get install -y nodejs 0.2 yarn 安装 有时使用node安装后续脚手架时会出错,排错可能比较费时间,所以也推荐使用yarn,部署yarn与node及其使用…

1.Node.js安装 1.1下载安装 在node.js 官网下载, 根据自己电脑系统安装,一直点下一步即可 1.2测试安装是否成功 Windows+R打开cmd窗口,输入node -v回车出现版本号,即安装成功!   2.Vue.js安装 2.1使用NPM安装      —NPM: NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题 2.1.1使用淘宝的镜像及其命令 cnpm      安装淘宝的镜像: 打开cmd命令框,输入  npm install -g…

介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 阅读之前需要了解的知识 htnl css javascript node.js环境(npm包管理工具) webpack打包工具 安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了.安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功…

vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下是使用vue脚手架,vue-cli搭建开发环境,进行项目的基础代码结构搭建,做一些项目初始化的工作. 一:准备环境和工具                   1.安装node.js,安装完成后输入node -v进行查看 ,安装完成后是自带npm(包管理工具),但是npm从国外的服务器下载,安装依赖会…

1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器. 目前ECMAScript 6已经渐渐流行起来,但是有一些浏览器还不完全支持,所以在使用ECMAScript 6时,可以通过Babel转码器进行转换 2)使用方式 (1) 直接用<script>引入 直接在html页面中引入<script>,Vue 会被注册…

前言: 用了几次 vue-cli 做 vue 项目,感觉没什么大问题,虽然也没有用 vue-router 和 vuex .但是心里一直有个梗,就是最初的目录生成和配置文件,一直没动过,也不知道具体原理. 虽然网上一搜,类似对于目录结构的大概介绍也不少,如图: 仅仅到这一步,估计很多人会心有不甘,而且对于传说中的难以配置的 webpack ,在这里好像也没有什么感觉.实际上,通过在 vue-cli 里写代码,还真是没感觉 webpack 的存在感,,, 并且尤雨溪也在文章里说明: 所以我就从头配置…

我们在使用vue搭建项目的时候,经常要使用到vue-cli. 一.安装node.js 去node官网下载并安装node,一直next就行. 等待安装完毕,输入node-v,如果输出版本号,那说明已经成功安装了.再输入命令行npm-v,输出npm的版本信息.那环境安装得基本就差不多了. 我们在开发的时候,为了能更方便快捷的运行,不用FQ,速度快,一般会安装淘宝的npm镜像cnpm. 二.安装cnpm 前往淘宝镜像cnpm查看详细安装步骤. 或者直接输入命令行: $ npm install -g c…

Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境中编译,而不是浏览器 实现页面自动刷新   基于nodejs和npm,可以在控制台输入node -v 或node --version查看node.js是否安装好以及npm -v查看是否安装好,安装好则会有本版提示.   另外分享几个npm的常用命令 npm -v #显示版本,检查npm 是否正确安装…

一.Node.js 1.介绍 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js是一个基于Chrome V8引擎的JavaScript运行环境.它不是一门语言,其实就是一个运行javascript的运行环境(平台),可以理解为一个运行js的虚拟机,以前只有浏览器才可以解析Javascript代码,有了Nodejs之后可以脱离浏览器运行,简单的说就是Node.js是运行在服务端的JavaScr…

ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 说明:此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vu…

如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3.新建.env文件,把.env.example里的内容复制到.env文件中 4.生成key,命令行:PHP artisan key:generate 5.配置文件package.json,内容如下: { "private": true, "scripts": { &quo…

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. 正文 1. 安装NodeJS,自行在node官网下载,并安装,通过node-v检查是否安装成功 2.在此项目中,使用的是cnpm进行安装的,如果想使用cnpm安装,去淘宝镜像安装cnpm $ npm install -g cnpm --registry=https://reg…

注意: 1.安装前您需要查看自己是否有node环境  检查:node - v 2.如果没有的话,需要先搭建好才能进行下一步操作 (参考:https://www.cnblogs.com/sylys/p/11703067.html ) Vue-cli安装步骤: 1.控制台进入项目根目录文件夹 2.npm i -g vue-cli  (使用npm全局安装vue-cli) 3.执行 vue list 可以看到很多实用的模板,这里实用的是 webpack 4.vue init webpack (初始化模板…

1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue-cli -g 检测版本  vue -V 4. 在硬盘上找一个文件夹放工程用的.这里有两种方式指定到相关目录:①cd 目录路径 ②如果以安装git的,在相关目录右键选择Git Bash Here 安装vue脚手架输入:vue init webpack demo ,注意这里的“demo” 是项目的名称可…

1.安装node.js 如果安装了,就请参照第二步:没有的话,去node.js官网下载:https://nodejs.org/zh-cn/download/ 2.检查 win键+r ----->打开资源管理器---->输入cmd------>在命令窗口输入node -v和npm -v(是为了检查版本号) 因为国内使用npm很慢,我们可以使用淘宝的cnpm,同时设置镜像地址 指令:npm install -g cnpm --registry=https://registry.npm.tao…

两年前曾自学过几天vue,那时候版本还是vue2,但后来项目中一直没用到,当时也觉得学习成本太高,便没有继续学习下去.初学者可以看下链接文章以前的吐槽~~ 学习 Vue ,从入门到放弃 最近部门决定升级架构,vue便又被安排上日程,打开官网发现版本已经升级到vue3,而且vue3跟vue2相比无论作者从底层开发还是组件搭建都有不少变化,不过优点是变得容易学了~~ 官方中文文档:https://vue3js.cn/docs/zh/guide/introduction.html#vue-js-%E6…

定时任务的实现有很多种,在Spring项目中使用一个注解 @Scheduled就可以很快搞定. 但是很难去管理项目中的定时任务,比如说:系统中有多少定时任务,每个定时任务执行规则,修改执行规则,暂停任务,移除任务. 这个时候我们就可以使出杀手锏了,使用Quartz框架,整合到SpringBoot中,是个不错的选择. 最近一段时间,使用SpringBoot + Quartz,整合了一个小项目,专门用来管理定时任务,其中,从截图中可以看出来,可以对定时任务进行添加,查询,暂停,恢复,编辑,移除. i…

1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4  安装 Mock 2.新建一个vue工程,打开cmd cd到工程目录下,或者在文件夹选中项目工程同时按住Ctrl+shift键,右击选中的项目找到[在此处打开powershell窗口],点击打开 效果如下: 执行命令: vue init webpack ? Generate project in current directory? Yes…

https://segmentfault.com/a/1190000011275993…

本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDSS 高性能流媒体服务器前端部分最初采用的是 AdminLTE + 各方 jQuery 插件的开发方式, 也就是网络上通常讲的 bootstrap + jquery plugins 的方式. 有经验的前端开发者想必都了解这种架构下开发前端页面的痛点. 当一个页面上 UI 组件多起来的时候, 代码组织就…

前言: 在使用vue进行开发时需要搭建vue的运行环境,这里主要是使用淘宝镜像cnpm进行搭建vue的脚手架开发环境.主要是分为mac和window两个版本,两个环境的搭建都是大同小异. mac开发环境的搭建: 1.安装Node.js(这个只需要去nodeJS官网下载安装就可以了) 以下的命令都是在终端输入 2.在电脑终端使用命令 node -v 检查版本(检查安装成功) 3.安装淘宝npm镜像 sudo npm install -g cnpm --registry=https://regist…

From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟俺一起全面入坑 03 “Vue2.0”跟俺一起全面入坑 —— 自定义便签 超好用的VueJs调试工具——vue-devtools Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) Vue2.0史上最全入坑教程(中)—— 脚手架代码详解 Vue2.0史上最全入坑教程(下)——…

Vue2.0搭建Vue脚手架(vue-cli) 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助.ps:高手请绕道. 1.使用npm全局安装vue-cli(前提是你已经安装了nodejs,否则你连npm都用不了),在cmd中输入一下命令 npm install --global vue-cli 安装完成后 cmd安装完成图 同时在C:\Users\Andminster\AppData\Roaming\npm目录下…

Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加以说明 说明: 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助. ps:高手请绕道. 一.那么我们就从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步…

在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功.  然后就可以构建项目了,依次输入命令: vue init webpack “名称” cd 名称(进入到创建的项目中) npm install (安装项目的依赖) npm run dev (启动项目) 然…

也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没死,gulp也不是多新颖的东西). 看标题很明显知道相比Grunt,我会更为推崇gulp,不是说Grunt不好,而是gulp效率更高.健壮性更好,配置也更为简单,自然也值得我们为它任性一回. 先谈谈上述提到的gulp的优越性: 一. 性能更高 相对Grunt频繁的IO操作读写,gulp是将项目任务流…

关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用   工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/)(外文站,最新的资料,但是打开可能比较慢https://nodejs.org/en/download/) 这里是一篇知乎的关于node.js是什么的文https://www.zhihu.com/question/33578075 简单的来说,它是JavaScript运行环境.更加深入,无法理解事件:…

环境搭建 Omi框架使用 Webpack + ES6 的方式去开发:使用karma+jasmine来作为Omi的测试工具. Karma介绍 Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用.这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行.但是集成到travis ci要把sin…