完美

[学习|工作|博客|交流平台|完美起航]

作者头像zyw3272018.03.14 23:32 

vue2.0+webpack的项目搭建与开发

vue2.0vue2.0是一个MVVM框架,对于这样的一个框架,我们应怎样搭建环境,用webpack+loader+babel,还是AAL,怎么样创建组件,基本的自定义标签的创建,数据的封装性,数据和模板的关系,组件的生命周期,组件的状态,内部的值组件与组件之间的数据传递。Vue2.0与vue1.0几乎90%的API和核心概念都没有变,具体可以看https://cn.vuejs.org/v2/guide/migration.htmlVue2.0的环境安装Npm install --save vueVue2中新增有两种构建方式:1.独立构建和运行构建,他们的区别在于前者包含模板编译器而后者不包含。模板编译器的职责是将模板的字符串编译为纯JavaScript的渲染函数。如果你想要在组件中使用template选项,你就需要编译器。独立构建包含模板编译器并支持template选项,他也依赖于浏览器的接口存在,所以你不能使用它来为服务器短渲染。2.运行时构建不包含模板编译器,因此不支持template选项,只能用render选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为render函数。运行时构建比独立构建要轻量30%,只有17.14kb min+gzip大小。默认npm包导出的是运行时构建。为了使用独立构建,在webpack配置中添加如下别名:resolve:{ alias:{ 'vue$':'vue/dist/vue.common.js' } }vue2.0的注意事项Vue2.0的组件必须有根元素Vue1.0中的beforeCompile换成了createdVue1.0中的Compile换成了mountedVue2.0的指令指令可以接受修饰符和参数,参数只能有一个,修饰符可以有很多个例如:<divv-yangse:hong.color="blue">ccc{{children}}</div>data(){ return{ blue:'red' }; }, directives:{ yangse(el,bingding){ el.style.background=bingding.value(); if(bingding.modifiers.color){ el.style.background='yellow'; } //console.log(bingding); } }vuex的使用Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。vuex基础使用importVuexfrom'vuex' importVuefrom"vue"; Vue.use(Vuex); conststore=newVuex.Store({ //这里state必须是json,是一个对象 state:{ count:0,//这里是初始值的罗列 students:[ {name:'panda

vue 2469 0

作者头像test1232018.03.07 10:31 

NPM结合vue的使用

1.允许用户从NPM服务器下载别人编写的第三方包到本地使用2.允许用户从NPM服务器下载并安装编写的命令行程序到本地使用3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用常用命令:npm install npm unistall num update npm ls 树形结构打印依赖包常用参数:-g global 全局依赖npm一般用于安装脚手架脚手架:搭建好一个一个基本的模板vue支持IE9 及更高版本├── build // 构建相关├── config // 配置相关├── src // 源代码│ ├── api // 所有请求│ ├── assets // 主题 字体等静态资源│ ├── components // 全局公用组件│ ├── directive // 全局指令│ ├── filtres // 全局 filter│ ├── icons // 项目所有 svg icons│ ├── lang // 国际化 language│ ├── mock // 项目mock 模拟数据│ ├── router // 路由│ ├── store // 全局 store管理│ ├── styles // 全局样式│ ├── utils // 全局公用方法│ ├── vendor // 公用vendor│ ├── views // view│ ├── App.vue // 入口页面│ ├── main.js // 入口 加载组件 初始化等│ └── permission.js // 权限管理├── static // 第三方不打包资源│ └── Tinymce // 富文本├── .babelrc // babel-loader 配置├── eslintrc.js // eslint 配置项├── .gitignore // git 忽略项├── favicon.ico // favicon图标├── index.html // html模板└── package.json // package.jsoncomponents:/HelloWorld.vue 实际页面的html样式router/index.js 配置了路由src/App.vue 页面级vue组件src/main.js 页面配置index.html 主页面入口一个页面要这么复杂吗vue提供一个过渡效果....<divid="app"> <ul> <testv-for="itemingroceryList"v-bind:todo="item"></test> </ul> </div> <script> Vue.component('

vue 1471 0

作者头像zyw3272018.03.05 22:00 

vue1.0+webpack开发

vue1.0+webpack搭建项目,vue1.0要与指定版本的webpack结合才能正确运行,与vue2.0项目的依赖有很大的不同,vue1.0项目相关依赖如下。{ "name":"first", "version":"1.0.0", "description":"firstvue", "main":"nodeindex.js", "scripts":{ "test":"nodetest.js", "server":"webpack-dev-server--content-base./--port8000" }, "repository":{ "type":"git", "url":"https://github.com/zyw327/vue1.0.git" }, "keywords":[ "vue" ], "author":"smartzeng", "license":"MIT", "bugs":{ "url":"https://github.com/zyw327/vue1.0/issues" }, "homepage":"https://github.com/zyw327/vue1.0/blob/master/README.md", "dependencies":{ "babel-core":"^6.26.0", "babel-loader":"^7.1.3", "babel-preset-es2015":"^6.24.1", "css-loader":"^0.28.10", "vue":"^1.0.28", "vue-html-loader":"^1.2.4", "vue-loader":"^8.7.0", "vue-style-loader":"^4.0.2", "webpack":"^2.4.1", "webpack-cli":"^2.0.10", "webpack-dev-server":"^2.4.5" } }webpack的配置如下:constpath=require('path'); module.exports={ entry:'./app/main.js&#

vue 2214 1

作者头像zyw3272018.03.04 16:18 

webpack的学习笔记

首先webpack是一个模块打包机,本质上,webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。webpack的配置文件webpack.config.jsconstpath=require('path'); module.exports={ entry:'./app/main.js',//配置入口文件位置 output:{ path:path.resolve(__dirname,'dist'),//输出文件位置 filename:'bundle.js',//打包后的文件名称 publicPath:'public'//虚拟目录 }, module:{ rules:[ test:/\.jsx?$/,//匹配以js或jsx结尾的文件 exclude:[ path.resolve(__dirname,'node_modules')//配置过滤目录 ], loader:'babel-loader',//配置loader加载器 options:{ preset:[es2015] } ] } };项目目录如下webpack-dev-server的使用,配置package.json,//package.json的scripts模块 "scripts":{ "test":"nodetest.js", "server":"webpack-dev-server--content-base./--port8000"//./指的项目入口文件的位置 },使用npm run server启动webpack-dev-server。index.js文件内容如下<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>vue学习</title> </head> <body> //根据webpack的配置文件引入打包后的bundle.js <scriptsrc="public/bundle.js"></script> </body> </html>

webpack 2138 1

作者头像test1232018.03.02 15:58 

vue-router

路由:将组件components映射到路由routes,然后告诉vue-router在哪里渲染它们1.app.vue只要每个页面不变的都放上去,比如导航条/左侧栏2.点击页卡,切换主体content的内容,导航条/左侧栏不会变动(这是路由的作用)3.app.vue 使用视图<router-view></router-view>4.app.vue处<el-menudefault-active="/activePublic"class="el-menu-vertical-demo":router="true"> <el-menu-itemindex="/activePublic":class="{'isActive':active}">活动发布</el-menu-item> <el-menu-itemindex="/activeManage":class="{'isActive':!active}">活动管理</el-menu-item> </el-menu>@是根目录..error compiling template 需要一个<div id=“XXX”></div>的根元素this.$router和router使用起来一样,使用this.$router的原因是不想在每个独立需要封装路由的组件中都导入路由动态路由匹配:加了冒号就可以动态匹配同一组件文件夹下的组件constrouter=newVueRouter({ routes:[{ path:'user/:id',component:User}] })现在,像user/foo和user/bar都可以映射到相同的路由一个【路径参数】使用冒号:标记,当匹配到一个路由时,参数值会被设置到this.$routes.params,可以在每个组件内使用嵌套路由:定义:被渲染的组件中包含了自己的嵌套,叫做嵌套路由<router-view>是最顶层的出口,渲染最高级路由匹配到的组件,一个被渲染组件同样可以包含自己的嵌套<router-view>。例如在User组件中添加一个<router-view>constrouter=newVueRouter({ routes:[{ path:'/user/:id',component:User, children:[{ path:'profile',//当/user/:id/profile匹配成功, component:UserProfile//UserProfile会被渲染在User的<router-view>中 },{ path:'posts',//当/user/:id/posts匹配成功 component:UserPosts//UserPosts会被渲染在User的<router-view>中 }] }] })编程式导航router.push(location, onComplete?, onAbort?)

vue 1359 1

作者头像zyw3272018.02.05 22:14 

less学习之初步二

一、混合定义函数及混合函数的传参less定义多个具有相同名称和参数数量的混合是合法的。带多个参数的混合,参数用分号分割,逗号会作为列表传递,即如果传参的括号里面全部都是以逗号分割,那么会依次传给各个参数值,如果传参的括号里面既有逗号也有分号,则会把分号前面的看做一个整体传给一个参数值。例如.mixin(@color;){ color-1:@color; } .mixin(@color;@padding:5px;){ color-2:@color; padding-2:@padding; } .mixin(@color;@padding;@margin:2px){ color-3:@color; padding-3:@padding; margin:@margin@margin@margin@margin; } .some.selectordiv{ .mixin(yellow); } //函数混合传参 .mixin(@color;@padding:xxx;@margin:2px){ color-3:@color; padding-3:@padding; margin:@margin@margin@margin@margin; } .div{ .mixin(red,2px,3px;something,ele);//此处第一个分号前会作为一个参数,后面的作为第二个参数 } .div1{ .mixin(green,2px,3px);//此处则是作为三个参数传递 } .div2{ .mixin(black,2px,3px;);//此处则是作为三个参数传递 }上述编译后结果:.some.selectordiv{ color-1:#ffff00; color-2:#ffff00; padding-2:5px; } /*混合参数传参*/ .div{ color-3:#ff0000,2px,3px; padding-3:something,ele; margin:2px2px2px2px; } .div1{ color-3:#008000; padding-3:2px; margin:3px3px3px3px; } .div2{ color-3:#000000,2px,3px; padding-3:xxx; margin:2px2px2px2px; }二、less函数命名参数less的函数支持命名参数的形式传参,例如//命名参数 .mixin(@color:black;@margin:10px;@padding:20px){ color:@color; margin:@margin; padding:@padding; } .class1{ .mixin(@margin:20px;@color:red); } .class2{ .mixin(yellow,@padding:40px); } .class3{ .mixin(@padding:80px) }编译的结果为:.class1{ color:#ff0000; margin:20px; padding:20px; } .class2{ color:#ffff00; margin:10px; padding:40px; } .class3{ color:#000000; margin:10px; padding:80px; }三、函数的匹配模式级函数变量返回值定义多个相同名称的函数,通过

less 1452 3

作者头像zyw3272018.02.05 19:49 

less学习笔记之less初步

一、less简单写法/**less的写法如下*/ .content{ ul{ list-style:none; } li{ height:15px; line-height:25px; padding-left:15px; background:url("./images/arr.jpg")no-repeatcenterleft; } a{ text-decoration:none; color:#535353; font-family:MicrosoftYaHei,"黑体",Arial,SimSun,ArialUnicodeMS,MingLiU,Helvetica; } }这是less最基本的写法。和css样式表有点类似,但是又有不同,less的这种写法减少了css代码的冗余。二、带变量的less写法less的变量使用@加名字定义,列入定义@name。@green:green;//定义了绿色 @size:3rem; @white:white; header,footer{ background:@green; font-size:@size; h1{ color:@white; } } //将变量作为属性名的写法 @width:width; .@{width}{ @{width}:150px; } @imgUrl:"https://www.baidu.com/img"; header{ background:@greenurl('@{imgUrl}/bd_logo1.png'); height:150px; }以上就是less的变量定义。使用变量的方式写less方便了后期样式的维护,只需修改变量值就可以改变整体样式。三、less的函数定义less还可以定义函数,使用函数更加方便了我们对样式的维护。//无参数函数定义 .font-sty(){ color:red; font-family:MicrosoftYaHei,"黑体",Arial,SimSun,ArialUnicodeMS,MingLiU,Helvetica; } h1{ font-size:18px; .font-sty//无参数函数引用 } h2{ font-size:16px; .font-sty } //带选择器的混合使用 .myButton(){ &:hover{ border:1pxsolid#56ffcf; } } button{ .myButton; } //带参数的函数定义 .border(@color){ border:1pxsolid@color; } h2{ &:hover{ .border(green); } } h1{ &:hover{ .border(red); } } //带默认值的函数定义 .border_y(@color:#0fb9ff){ border:1pxsolid@color; } h1{ &:hover{ .border_y(); } }以上编译后样式如下:h1{ font-size:18px; color:red; font-family:MicrosoftYaHei,"黑体",Arial,SimSun,ArialUnicodeMS,MingLiU,Helvetica;

less 1444 1

作者头像wuyande2018.02.05 13:11 

HTML 标签详解

浏览器支持情况:IEFirefoxChromeSafariOpera所有浏览器都支持 <meta> 标签。定义和用法<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。HTML 与 XHTML 之间的差异在 HTML 中,<meta> 标签没有结束标签。在 XHTML 中,<meta> 标签必须被正确地关闭。提示和注释:注释:<meta> 标签永远位于 head 元素内部。注释:元数据总是以名称/值的形式被成对传递的。使用如下<metahttp-equiv="charset"content="utf-8"> <metahttp-equiv="expires"content="31Dec2008"> <metahttp-equiv="refresh"content="60"> <metaname="description"content="描述文字"> <metaname="keywords"content="关键字">可选属性如下:属性值描述http-equivcontent-typeexpiresrefreshset-cookie把 content 属性关联到 HTTP 头部。nameauthordescriptionkeywordsgeneratorrevisedothers把 content 属性关联到一个名称。schemesome_text定义用于翻译 content 属性值的格式。

meta标签 668 0

作者头像zyw3272018.01.27 14:50 

IaaS vs CaaS vs PaaS vs FaaS:选择合适的平台

探索各种云平台,为您找到最好的平台。由Jeff Kubina授权的CC By-SA 2.0“Circumhorizontal Arc”是否购买,构建或采用了开放源码,您可能已经在使用某种软件平台来构建,部署和扩展您的应用程序。经过多年将应用程序中的常用功能提取到较低级别的抽象中之后,平台就出现了。 如果以故意的意图和设计完成,你会得到一个平台。 如果不是的话,你可能最终会在自己的手中产生一个有机的混乱,并发现自己正在寻找其他人为了出路而建造的平台,一线希望。适合您的平台将在灵活性和简单性之间实现您所需要的平衡,使您能够更快地构建,而不会受到太多限制。 本文将分析云平台的各个方面,帮助您找到最适合您情况的方案。每个人都有自己的想法,看看这个完美的平台是什么样子的,因为每个人的用例都有些不同。 但是每个人都在寻找两件大事:发展速度加快自动化操作专长这两个需求推动了大部分软件平台的投资。 真的,他们是你可能用来自动化任何事情的相同论点:速度和可重复性。因此,要知道没有哪个平台对所有用户都是完美的,你应该自己写吗? 如果你自己写,你是建立在现有的平台之上吗? 你如何选择一个基础平台开始? 你是否想要一个从上到下紧密集成的平台,还是你想要多层平台与强壮的扩展点松散连接?这些都是很难回答的问题,而且没有一个适合每个人的答案。 平台幸福之旅是发现,比较和权衡之一。 所以让我们深入。平台频谱云平台的彩虹对每个人都有一种风味。每个厂商都会告诉你他们的软件是特殊的,甚至是独一无二 他们都试图区分他们的产品提供不可替代的价值。 但是,如果你看起来足够硬,并容忍一些粗糙的边缘,你可以按照他们提供的接口类型对这些产品进行分组。云平台的例子软件平台“软件即服务”这个术语中最古老的一个可以追溯到2000年左右,它提到将打包的软件产品和支持服务捆绑到一个托管的解决方案中,以避免经常不为人知的实施和操作成本。一个SaaS产品本身可以成为一个平台。该术语的一些原始用途描述了取代传统企业资源规划(ERP)和客户关系管理(CRM)平台的解决方案。像Salesforce和SAP这样的公司在这个领域非常成功,没有大型工程部门或IT部门的客户可以构建和管理这些复杂的系统。即使拥有这些资源的公司也可能认为这些事情超出了自己的核心竞争力,不值得建设或运营。然而,最近几乎所有类别的软件都可以作为SaaS获得,从电子邮件到文字处理到内容管理系统。另一方面是基础设施即服务。将应用程序配置到基础架构平台上基础设施平台基础架构平台在SaaS之后不久就到了。 VMware GSX Server(2006)和Amazon Elastic Compute Cloud(EC2,2006)都提供了早期的虚拟化平台。虽然VMware最初专注于企业内部部署安装,但由于其托管的IaaS和SaaS产品的结合,亚马逊网络服务在更广阔的市场中引起了共鸣。后来,Rackspace和NASA开发了OpenStack(2010),作为VMware的vSphere(2009年发布,取代GSX)和亚马逊EC2的开源内部竞争者。这些IaaS主要提供一些特定的抽象:虚拟机计算节点,软件定义的网络和可附加存储。与SaaS一样,托管的IaaS的主要卖点是外包运营和自动化的其他手动容量供应,但与SaaS不同的是,托管的IaaS也出售您自己软件的接近无限规模的幻想。对于大多数对基础设施外包感兴趣的公司,AWS提供的功能比他们以往

IaaS 2346 2

作者头像zyw3272018.01.27 14:06 

FaaS,PaaS和无服务器体系结构的好处

note: faas:功能即服务 paas:平台即服务本文讨论无服务器是什么,将其与PaaS和SPaaS进行比较,无服务器体系结构的优点和成本以及对框架的需求。最初,无服务器意味着开发人员不必关心设置和管理运行其后端应用程序的服务器。不是说没有涉及服务器,而是后端基础架构是由第三方提供者维护的,所需的功能是作为服务提供的,包括数据库,消息传递,认证等。这个服务基础结构通常被称为后端即服务(Backend-as-a-服务(BaaS)或移动后端即服务(MBaaS)。但是,当亚马逊在2014年宣布AWS Lambda时,将无服务器模式推向了另一个层次,为云中运行的应用程序引入了新的系统架构。没有永久进程在服务器上运行,等待HTTP请求或API调用,而是一个触发AWS服务器上的一段代码(通常只是一个函数)的事件机制。使用这种范例时,不必考虑服务器。重要的是写一段代码在某个事件发生时被执行。云提供商负责查找运行代码的服务器,并在需要时扩展。一旦执行结束,用于运行这些功能的容器就会退役。并且执行以100毫秒为单位计量,用户仅对代码运行时消耗的资源收费。一些人称这种功能即服务(FaaS)为“另一种服务”(YAssS),这是云计算首次亮相后出现的众多功能之一。亚马逊并不是唯一的FaaS提供商。其他还包括Google Cloud Functions,Microsoft Azure Functions,IBM OpenWhisk开源实现,Iron.io和Webtask。无服务器体系结构适合纳米服务。如果微服务是一个旨在解决相对较小业务能力的过程,则纳米服务将处理相应能力的一小部分。例如,一个微服务可以用一个帐号来执行所有CRUD操作所需的代码,而每个帐号操作都有一个nanoservice:创建,读取,更新和删除。当触发“创建帐户”事件时,相应的nanoservice将作为AWS Lambda函数执行。很少使用术语nanoservice,最喜欢微服务甚至只是服务。有人认为FaaS只是另一个PaaS,但意向媒体工程副总裁Mike Roberts有另一个意见:大多数PaaS应用程序并不是为了满足每个请求的整个应用程序,而FaaS平台正是这样做的。 ...FaaS和PaaS之间的关键操作差异在于缩放。对于大多数PaaS,您仍然需要考虑规模,例如用Heroku你想运行多少个Dynos。 FaaS应用程序是完全透明的。即使您将PaaS应用程序设置为自动扩展,您也不会这样做到个别请求级别(除非您拥有非常特殊的流量配置文件),因此FaaS应用程序在成本方面效率更高。Roberts并没有考虑到每个人都应该抛弃PaaS并开始使用FaaS,他们提到了一些原因:“API网关的工具和成熟度可能是最大的。此外,在PaaS中实施的12因子应用程序可能会使用应用程序内只读缓存进行优化,这不是FaaS功能的选项。自称为高级思想家和Raconteur的Camille Fournier在推特上写道:“如果无服务器的服务将成为像存储过程那样的东西,这个好主意很快就会变成巨大的技术债务。”罗伯茨解决了这个问题,认为FaaS可能是只有无服务器功能只是“包装访问数据库的一小段代码”时,用SPaaS(Stored-Procedures-as-a-Services)代替。但由于FaaS功能可用于许多其他目的,所以比较是无效的。他还指出,与存储过程不同,无服务器功能不需要特定于供应商的语言或框架,

paas 1972 3

a6bfb44cbd5549740eb36647f36ef83a