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

    |     2020年6月23日   |   学习偶记   |     评论已关闭   |    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的界面

如果执行vue init webpack 项目名提示vue命令不存在,在高级环境变量中添加vue路径即可。一般win10的路径是: C:\Users\你的用户名\AppData\Roaming\npm
初始安装

执行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做成组件,装进去。

噢!评论已关闭。