npm现代前端开发的基石，共享代码从此不再用百度下载了

这几次的VUE训练营，开始用了现代的前端的开发技术，学习了npm的使用，现在不用学化妆术CSS就能做成很漂亮的应用了。现代的VUE组件，非常适合VFP狐友们的应用。毕竟VFP开发MIS那真是爽爆了。

有位沈阳的狐友，花了一年学了好多，python,vue,react,nodejs结果学杂了。我还是建议跟我的脚步走，少走弯路，毕竟我也是这样一步步走出来的。

程序员社区文化

自从程序语言发明以来了，人类会把各种常的功能都组装成了函数，库，通过一些方式发布出去，比如以前的新闻组的功能，论坛BBS的功能。

后面就形成了社区，世界上最大的社区应该就是 GitHub 了，大家都通过 GitHub 来分享源代码（线上代码仓库），讨论问题（Issue 列表）。

它集合了世界几乎所有语言的项目，当然VFP也不例外。

我们怎么使用别人的代码呢？

在 GitHub 还没有兴起的年代，程序员都是通过网址来共享代码，比如你想使用 jQuery，那么你从 jQuery 网站或其它地方下载 jQuery，放到自己的项目上使用。

麻烦当一个项目要用的东西越来越多时，这是一件很麻烦的事情：

去 jQuery 官网下载 jQuery

去 BootStrap 官网下载 BootStrap

去 Underscore 官网下载 Underscore

……

这是反程序员的行为麻，后来一个程序员 Isaac Z. Schlueter （以下简称 Isaaz）就在想，我能不能用一个工具把这些代码集中到一起来管理吧！

这个工具就是他用 JavaScript （运行在 Node.js 上）写的 npm，全称是 Node Package Manager

具体步骤

NPM 的思路大概是这样的：

1. 买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）

3. 社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码

4. 下载完的代码出现在 node_modules 目录里，可以随意使用了。

这些可以被使用的代码被叫做「包」（package），这就是 NPM 名字的由来：Node Package(包) Manager(管理器)。

想法是美好的，我来集中管理代码，但是别人愿意放吗？

转机

后来大家为什么都是用了这个npm包管理器？npm 的发展是跟 Node.js 的发展相辅相成的。

Node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 Node.js，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了 npm。

在V8加持下，js终于进军了前端，于是Node.js 火了。

随着 Node.js 的火爆，大家开始用 npm 来共享 JS 代码了，于是 jQuery 作者也将 jQuery 发布到 npm 了。

所以现在，你可以使用 npm install jquery 来下载 jQuery 代码。

现在用 npm 来分享代码已经成了前端的标配。

Node.js 目前由 Ryan Dahl 当时所在的公司 joyent 继续开发。Ryan Dahl 现在已经去研究 AI 和机器学习了，并且他把 Node.js 的维护权交给了 Isaaz。（我是不是也应该去研究 AI 和机器学习啊教练）

而 Isaaz 维护了一段时间后，辞职了，成立了一个公司专门维护 npm 的 registry，公司名叫做 npm 股份有限公司

社区的力量

回顾前端的发展是你会发现，都是社区里的某个人，发布了一份代码，最终影响前端几年的走向。比如 jQuery，比如 Node.js，比如 npm。（其实其他语言也是这样的）

github兴起的时候，微软也自己搞了自己的代码管理网站，后来没人跟着玩。关了，后来也搞了自己的包管理器，大家可以百度一下。

VFP也是有自己的包管理器，大家知道叫啥吗？

npm怎么用，进阶看这里哈。 https://zhuanlan.zhihu.com/p/24107438

现看看前端的代码现在长啥样子？

这是界面层，放个新增的按钮，和一个grid(table)

<el-button @click="handleAdd">新  增</el-button>

<el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="180">
      </el-table-column>      
</el-table>

这是代码

handleAdd(){
        this.info={name:"",age:0};
        this.index=-1;　　//新增
        this.dialogVisible=true; //显示编辑对话框
},

前端发展到现在，跟现在可视化开发很接近了，他是可以直接自由在的代码窗口改属性，改绑定方法，不需要用可视化的属性窗口了。

代码的发展肯定是优先于可视化的属性窗口，所以更新更快的代码式组件反而发展更快。

人人可以开发组件，共享组件。

在我看来，有了强力的IDE支持，开发效率其实比可视化拖拉更高。