Vue.js入门第一篇

最近看了比较火的前端JS框架VueJs，给大家分享一下学习心得。

具体介绍请移步Vue官网 https://cn.vuejs.org/ ，在此就不另行介绍了。

作为入门级别的项目，我把内容最大简化了，只包含一个前端页面文件和一个后端服务器文件：

vue-project

• index.html

• server.js

这里发代码不方便看，我会直接截图发，代码附在文末。

用 <script src="https://unpkg.com/vue"></script> 引入Vue 的脚本文件后，在最下面我们创建了一个 Vue 实例，并指定容器为 #app ，包含了一条数据 msg，页面加载到浏览器后，Vue 会自动解析整个页面，将 msg 填充到页面的制定位置，在这里是 {{ msg }} 。

完成这个超级简单的页面后，我们需要写一个在后台运行的web服务器并启动它，虽然对于只浏览这个页面来说不需要这么做（可以直接用浏览器打开），但是作为一个完整的项目，我们最好有完整的前后端。

后端我们用 NodeJs 来完成，没有 NodeJs 的需要先安装并配置 Path 。Node 下载地址 https://nodejs.org/en/download/ 。

下面是服务器的代码：

这里使用原生的 NodeJs 完成了服务器的搭建，首先引入 http 和 fs 模块，前者是负责处理网络的模块，后者是负责处理文件的模块，我们在 8888 端口开启监听以后，只要有请求发送过来，服务器就会将index.html 中的内容读出来并发送到前端，然后浏览器会负责渲染界面，得到如下结果：

结果

一个最简单的Vue项目就这样完成了。

代码 http://pan.baidu.com/s/1b1R4Cm 密码 96x8