KO

Wesley13
• 阅读 534

KO

KO是一个基于 Webpack开发的快速开始Web开发的脚手架工具,具有以下特性:

  • 可以当做一个Webpack配置种子来使用,无需二次配置、开箱即用

  • 自动支持多页应用

  • (可选)Vue单文件组件的开发方式

  • 资源分块加载,内联和异步加载方式管理,低成本实现首屏优化

  • 支持SFTP快捷部署项目

官方网址

安装

**提醒**
由于依赖的包比较多,第一次安装耗时很长很长,请稍微耐心等待一下。
推荐使用淘宝的 npm 镜像进行安装,执行 npm 安装命令时带上 --registry=https://registry.npm.taobao.org
另外 node-sass 这个包需要编译,可以设置 SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/,安装已经编译好的版本。

# 全局安装 Node >= 6# mac/linux$ SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install -g ko3 --registry=https://registry.npm.taobao.org

使用

# 初始化工程$ ko3 init demo# 初始化工程的时候会自动创建一个名为helloworld的项目# 预览helloworld项目$ cd demo && ko3 serve helloworld# 查看 help$ ko3 --help

基础目录结构

demo                     //工程目录    ├── mod                //通用模块    ├── page               //业务入口    │   ├── helloworld     //项目名    │       ├── _js        //js入口文件,由工具自动生成,请忽略    │       ├── mod        //业务私有模块vue文件    │       │   └── *.vue     │       ├── utils      //业务私有工具/JS逻辑    │       └── *.shtml    //入口文件    └── ko.config.js  //基础配置文件,包括项目发布路径的配置

组件开发

1. 在项目的 ./page/helloworld/mod 目录下添加一个文件hello2.vue:

<template>  <h1>Hello {{ name }}!</h1></template><script>export default {  data () {    return { name: 'world2' }  }}</script><style lang="scss">    $red: #e4393c;    h1 {        color: $red;    }</style>
  • 关于 Vue 单文件组件 - 文档参考 http://cn.vuejs.org/

  • 默认配置了Babel、Sass编译,可以直接使用ES6语法及Sass语法

引入组件

1. 新建组件容器

<div vm-container="bundle"></div>

Vue 组件的引入,必须依赖设置了 vm-container 属性值的容器,编译后会自动打包到 vm-container 属性值命名的 js 文件里。

2. 引入Vue组件

<div vm-container="bundle">         <hello vm-type="component"></hello>    <hello2 vm-type="component"></hello2></div>

例如:引入一个名为 hello.vue 的组件(标签名等同文件名),同时需设置 vm-type 值为 "component"

3. 指定引入组件的目录

默认加载对应项目的 mod 目录文件,如需指定组件源目录,可通过 vm-source 属性设置。例如:引入一个与page同级的mod目录下的common.vue组件

<div vm-container="bundle">         <common vm-type="component" vm-source="../../mod"></common></div>

4. 设置组件块加载方式

<%= Sinclude("bundle", "inline") %>
  • inline:js 资源将会内联在 html 页面中

  • async:js 资源异步加载

  • 不传参:默认 script 标签外链

项目预览

$ ko3 serve helloworld     // http://localhost:9000

项目部署

$ ko3 build helloworld     // 对page目录下的helloworld项目进行编译

编译后的文件会打包到对应的 dist 目录中

$ ko3 build helloworld -d     // 编译完成成自动通过Sftp发布到配置好的目录

本文分享自微信公众号 - 凹凸实验室(AOTULabs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
1星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这