布局

迫于生计开始写小程序.

小程序重要的东西有布局:
使用的是flex布局,这点很重要的。

justify-content和align-items一个表示水平轴一个表示交叉轴，但是这两者的话都没有一个绝对的主轴，这点是要根据flex-direction的设定来确定的，flex-direction为row那么水平方向的就为主轴,另外一个为交叉轴，如果为column，那么垂直方向的就为主轴,另外一个为交叉轴。

当然如果加了reverse之后交叉轴的方向就得换个参照点了。

Nuxt.js基础

• Vue2
• Vue Router
• Vuex
• Vue Server Renderer
• vue-meta

首先还是官方地址给上。

安装:

1
2
3
4

// 先安装一下vue-cli工具
yarn global add @vue/cli-init 
// 初始化模板
vue init nuxt-community/koa-template

还源的工具可以使用nrm，类似于版本控制的npm

1

nrm ls

nuxt.js是非常适合做vue的ssr渲染的，他可以让ssr变得非常非常简单。

我们直接利用刚才那个命令来生成一个nuxt.js模板。

1

vue init nuxt-community/koa-template nuxt-start

不过这里可能会遇见一个问题。具体可以参考，项目的README.md文档。

这东西的设计其实和umi很类似(可能umi是借鉴了这边吧。。)有一点就是pages目录下面的文件即为路由。我们创建一个xxx.vue，然后去localhost:3000/xxx,就可以直接访问到对应的页面了。

PWA 简介

Progressive Web App 渐进式web应用程序

PWA是由一系列特性组成。

Service Worker

整个 pwa 系统的大脑。类似于Web Worker但是具备有更多功能,他是pwa里面最重要的功能。
服务工作线程

• 常驻内存运行
• 代理网络请求
• 依赖 https

Promise

“承诺”控制流

• 优化回调地狱
• async/await语法同步化
• service worker的很多api都promise化了

1
2

new Promise((resolve,reject)=>{})
.then().then().catch(...)

fetch

网络请求

1

fetch('/xxx/xxx').then(res=>res.json()).then(info=>...)

• 比XMLHttpRequest更简洁
• Promise风格
• 存在一些不足

cache API

支持资源的缓存系统

• 缓存资源(css/scripts/image)
• 依赖Service Worker代理网络请求
• 支持离线程序运行(PWA的一个很重要的特性)

Notification API

消息推送

• 支持电脑的消息推送

组件

• props

  组件的参数传递

• slot

插槽在组件抽象设计中的应用

• 自定义事件

父子组件的通信方式

组件的基础示例可以先看一波文档,但是我们一般都不会用这里的这种方式去定义我们的组件。(Vue.Component不会用)

环境搭建

1

npm install -g @vue/cli

使用的版本为:

• vue-cli@3
• vue@2.5

vue create vue-learn

一开始直接进去选一个默认的配置就开始搞起来了。

类

类的一些基本示例:

1
2
3
4
5
6
7
8
9
10
11
12

class Greteer{
    greeting: string
    constructor(message:string){
        this.greeting = message;
    }
    greet(){
        return 'Hello,' + this.greeting
    }
}
let greeter = new Greteer('world');
greeter.greet();

类里面允许使用继承来拓展现有的类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class Animal{
    move(distance:number = 0){
      console.log(`Animal move ${distance}`);
    }
 
}
class Dog extends Animal{
    bark(){
        console.log('wolf!wolf!');
    }
}
const dog = new Dog();
dog.bark();
dog.move(10);

基础类型

ts 里面大概有下面这些的基础类型(直接看代码即可)：

数字:

1
2
3

//
// 这里可以使用不同的进制来做显示
let num: number = 20;

字符串:

1
2
3

// 字符串,一般用单引号同时支持模板字符串
let name1: string = "zoomdong";
let sentence: string = `Hello,My name is ${name1}`;

安装typescript

全局安装

1
2

npm install typescript -g
npm install node-tsc -g

1

tsc -v

这样能输出版本号就证明安装成功了。

sed 的工作模式

• sed(Stream Editor),流编辑器。对标准输出或文件逐行输出。

语法格式:

• stdout | sed [option] "pattern command"
• sed [option] "pattern command" file

逐行根据命令来进行匹配。

使用Upload组件将文件上传到七牛

需求大概是这样的，我们需要使用Antd的Upload组件将上传的文件传到七牛云上面，然后让七牛那边返回一个url即可。

结合了一下之前写过的关于七牛那边的Node SDK.

大概是这样一个操作:

• 先获取到七牛那边的一个token值
• 然后将文件上传到七牛那边提供的一个url上面(一个post接口，要附带token提交上去)
• 拿到返回的url地址