昨天的经历让我充满了挫败感。昨天从早到晚,可能都不止8个小时,仅仅写出了一个Hello 这样的程序。
事情的经过是这样,准备写一个小网页,正好把大前端看看,补充点知识。这是背景,然后就在网上查查看看前端当前的发展,找找框架去写呗。
看了一些文章,还是吃惊不小,前端的发展竟然是如此的大,让我觉得原来的中间件及后端开发逐渐要变成更后端,偏运维了。
然后去找当前的前端最新的一些技术,就看到Vue 了,其实还有 react ,只是觉得react 场景比较大,就选择vue了,中间还比较了一下开发工具,对我这样的,还是越傻瓜越好,就选择了 webstorm .
然后就开始了痛苦之旅。看帮助,看网页,觉得很容易理解,就上手去写。这里面看到搭建前期的开发环境,看到需要NPM,Brew,CLI ,webpack 来安装,当时就出了一些问题,对这些工具,我都没有用过!!!当时心里开始发慌,一个前端类似与类库一样的东西,开发样式,为什么要装这么多,这样的开发环境和运行环境有什么不同? 运行环境不就是一个js 文件就可以了吗???? 虽然疑惑,但还是觉得应该只用一个 js文件。对于那么多选择,有些不太理解,现在来看,只是教程写的有些不清楚,特别对于一个小白来说。顺便说一下,据说和其同类的教程比较起来,这个教程已经是非常好的教程了。
再然后就是写代码了。
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
就是这样,把一个html里面的加上 <script src="https://unpkg.com/vue/dist/vue.js"></script>
就该出现结果了。
我的浏览器里面 chrome ,firefox(在mac 上) 一直出现的是
{{ message }}
而不是 Hello Vue!
不会吧,这个抓狂之旅就正式进入高潮。
当时想继续找例子,看官网上的吧,打不开,里面链接的 http://jsbin.com/ 网址不知道为什么被墙掉了,第一开始并不知道是被墙掉了,就是觉得是浏览器与这个框架不是那么兼容,出现的并不是404 这样的错误提示,而是一个崩溃的小图标。
重试了几次,都准备换成react 这样的框架来学了。期间还想过,为啥不用 boostrap
往复几个来回,几个小时就过去了
转机出现在又找到一个类似的教程,
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1 id="helloWorld">{{Msg}}</h1>
<script src="vue.js"></script>
<script> var v = new Vue({
el:"#helloWorld",// 这里是 Element 的选择
data:{//这里是 选中的 Element 下的数据绑定
Msg:"Hello World,I'm Vue.js",
} });
</script>
</body>
</html>
这个竟然间没出错,能够正常显示。
那就找差别呗,只有几个符号不太相同,句子后面加没加,;“ 这三个符号
问题就出在” 和‘ 这两个区别上 。
把’ 换为“ ,问题就解决了!!!
当时真的是长出一口气。还是解决了,还是解决了。
当前再来总结一下,一天的教训。
- 在入门的时候,如果有一个老师,会快的多的多,他能够迅速发现一些基本问题。特别是入门的时候,不需要特别强的老师。
- 多找几个能够运行的例子。
- 前端的开发难道不能如同原来开发 VB,delphi 时候一样吗?当前这种开发对于程序员差别不大,或者效率更高,但是由于分工越来越细,不同栈的程序员去开发的时候,转移成本还是有一些的,这些成本不太有意义。这些网页,就不能做出和native开发类似的吗?
某种意义上,还是怀念曾经的桌面开发,单纯,简单,高效。