PHPer快速上手VUE——边学边练1–重新开始篇

有人给我提意见了，说我的边学边练涉及到的东西太多，一看就想放弃，于是就从头开始写这个教程。

为了让phper更简洁的入门，我先把html模板做好，然后用vue进行改造，这样也许学习起来会走弯路，但是会很快入门。提前声明一下：我的vue水平很差，也许教程会有错漏，我会随时发现问题，然后更新。

1、快速开始：node需要先装好，然后 npm install -g vue-cli

2、安装项目：vue init webpack 项目名称，系统会生成相应目录。【注意只需要安装VUE Router即可】

3、升级模块：npm audit fix

4、项目运行：npm run dev 然后浏览器输入：http://localhost:8080/ 即可看到vue的界面

执行http://localhost:8080/显示

对于项目，我们准备的是多个html模板。有login登录模板 有 main 主面板 有orderlist  订单详情页等等，这些页面，

就像我们学习php框架一样，很多框架的入口是index.php。我们设置项目的一个入口文件，就是main.html吧。

我们看一下项目主程序main.js。我使用了php常用的术语来描述vue文件以便于理解，mian.js中实例化了一个vue，这个vue指向的是app这个组件【页面】。

然后我们对比一下其他成熟的vue项目的main.js中实例化的部分，看看有什么差别。

我们需要了解两个概念：

render 渲染。这个东东是做什么用的呢？我们用php来举例：

我们在使用Php开发的时候，会使用到模板。大概的样子是这样子的：

 <title>{$title}</title>

而有时候，则会出现列表：

<li>编号：{$id}</li>

这个编号，我们会借助循环来实现。而不是一个一个手动去给$id赋值。

render在vue中大概齐就是干这种事情的。具体解读请参看：

https://cn.vuejs.org/v2/guide/render-function.html

$mount挂载。简单来说，就是将渲染的数据，放在页面的DOM元素中去。比如上述的li放到html的<ol>标签中。

可以参考：http://www.luyixian.cn/javascript_show_160829.aspx

还有一篇：https://segmentfault.com/a/1190000009467029

PS：$vm这个实例，可以参看API：https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property

总结一下：这一篇我们主要是安装了框架，然后生成了APP这个主页面。这个主页面相当于一个空页面，接下来需要把main.html做成组件，装进去。