背景：这两天看了一下 Typescript 文档想找个项目练练手，于是就就想着使用Vue脚手架生成一个demo项目

Vue CLI 可以生成使用 TypeScript 的新项目

1
2
3
4
5
6
7
8

// 1. Install Vue CLI, 如果尚未安装
npm install --global @vue/cli@next

// 2. 创建一个新项目, 选择 "Manually select features" 选项
vue create my-project-name

// 3. 如果已经有一个不存在TypeScript的 Vue CLI项目，请添加适当的 Vue CLI插件：
vue add typescript

目前网络上常见的方法都是修改npm安装路径的权限

通过使用命令

1

npm config get prefix

得到npm的路径，结果大部分都是/usr/local。然后，很多方法都会要求将该路径的权限修改为当前用户

即，使用命令

nvm 管理 node，默认的全局包，均安装在 node 当前版本下，每次切换版本，之前的全局安装包均失效。
为了方便全局包的管理，更改 npm 全局安装目录，使得版本切换不再影响全局 npm 包的使用。

查看全局包位置

1

npm root -g

本文能帮你做什么？
1、了解vue的双向数据绑定原理以及核心代码模块
2、缓解好奇心的同时了解如何实现双向绑定
为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助

相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳Google

为什么我要写这一篇关于 Flex 布局的教程？

因为它十分简单灵活，区区简单几行代码就可以实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。然而学习 Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。

Flex 基本概念：

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。

在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。