零基础Vue入门学习记录(1)

时间:2022-12-04 00:19:19

零基础Vue入门学习记录(1)

最近想要学会的东西有vue-router,和怎么增删vue页面。这个东西做出来,我才能做出网站的前端页面。如果可以,我还希望能学会使用vue提取数据。

我目前的水平就是稍微懂一点点js,连曾经的神器jQuery都不熟悉,node.js也几乎不会,Vue也没太看,不过我觉得还是按自己的习惯走吧——在实践中学习。

环境配置

首先是决定了用Windows作为开发环境,没别的原因,我的笔记本是正版Windows系统,不想换了。所以先配置一下vue开发环境和Atom。根据我的经验,Windows下和Linux下不会有太大区别的,最大的差异可能就在于CMD命令行的糟糕设计。我发现了一个叫做cmder的工具可以用来替换Windows下的CMD命令框。

在下载安装完nodejs之后,需要在node的主文件夹下建立两个文件夹:node_globalnode_catch,这俩一个是用于存储nodejs的全局模块,另一个我还不太清楚,大概还没用到(我到现在还没认真看过一本nodejs和vue,我个人学习习惯不好,不是那种会耐心刷完书才开始做事儿的人)。

建立两个文件夹之后,需要使用cmd命令框,输入如下两个命令,用于修改node的一些配置:

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

然后还需要修改两次环境变量中的路径,一个是在Path中添加:
C:\Program Files\nodejs\node_global
无论是系统的Path还是用户的Path都可以,然后再在系统环境变量列表中个,新建一个叫做NODE_PATH的环境变量,内容是:
C:\Program Files\nodejs\node_global\node_modules

建立项目

上述就是所有的配置过程,然后就可以开始安装Vue和Vue-cli,以管理员模式打开CMD或者CMDer(我用的CMDer)。输入下面的命令,就可以开始安装Vue和Vue-Cli。Vue-Cli可以看作是Vue的一个脚手架工程,也就是说,Vue提供了一些基本的页面等等,可以让用户更快的开始上手,添加页面等等,有些人说新手不适合用Vue-Cli,脚手架完成了太多幕后工作,可能让新人不知道一些细节所在。我反而觉得新手应该先从Vue-Cli入手,先知道一个大概,再慢慢细化下去。

npm install vue -g

npm install vue-cli -g

完成这一步,所有的配置应该都OK了,我们可以迅速使用Vue-Cli建立一个小的网页,我想要在D盘的Project/VueJS/下建立我的应用,就可以使用CMD或者CMDer进入到这个目录下,然后输入命令:

vue init webpack Front

很奇怪的是,Project name那里,它不允许我用Front这个名字,说有大写字母。我改成了front以后,一路回车到底,打开文件夹一看,却又有一个Front文件夹……
零基础Vue入门学习记录(1)
然后用如下两行命令:

cd Front                              
npm install

这两行代码用来安装各种其他的Nodejs的安装包(就是那些node_module). node_module的设计我非常喜欢,和R包很类似,用的时候下载,完全与系统无关(除了几个例外,比如上边的vue和vue-cli),然后配置网站上线什么的时候也非常方便,复制粘贴过去就好了。

大概一两分钟过以后,所有的module都安装完毕了,我们就可以打开神器Atom了,打开项目到Front文件夹下,就可以看到所有的文件,其中最重要的就是那个src文件夹,我已经打开了:
零基础Vue入门学习记录(1)

然后路径应该现在还在Front文件夹内吧?可以直接输入如下命令:

npm run dev 

就可以把整个程序运行起来。会自动打开一个网页,以后我们的大部分工作,就是不断使用Atom修改增删这个Front文件夹内的东西,知道这个网站的页面越来越完善。
零基础Vue入门学习记录(1)

OK,你的Vue配置就完全成功了,换言之你终于可以开始动手写代码了。

一些小总结

必须提一句,目前我们在看的整个Font文件夹都是仅仅用来开发用的。等我们开发完毕,会需要使用Webpage对其进行打包整理 (命令是:npm run build),所谓打包在我理解就是把杂七杂八的文件全部压缩到几个文件中,然后只会返回给我们一个index.html和一个打包过的文件夹。然后再把它放置到我们的服务器中就可以运行了。

因为我要做的是前后端完全分离的项目,所以在整个文件夹开发完以后,这个Front文件夹依然是不具备和后端数据库交互的能力的。只能向特定的url发送GET或者Post命令获取数据。而整个后端的数据库,用户管理等等一系列功能,是由Nodejs的另一个著名框架:Express实现的。

所以说,目前的这一整个Vue-Cli脚手架也好,框架也好,并不是我们最后的发布整个网站,而仅仅是一个中间临时的开发平台而已,开发完以后压缩后就不再需要了。

以后我们主要做的事情就是:修改Front文件夹下的内容,该加减页面加减页面,该调用API调用API,就像是曾经的PHP程序员写前段一样,等全部弄完那了,用Webpack打包,打包出来的文件与我的后端程序对接,一同放置在服务器上,然后就可以配置上线了。

有同学可能先学习的是Nodejs,比如学会了一下Expess,看到Express也是有页面的啊,不就是里边的view文件夹吗?默认还是jade文件呢。jade和Vue两个前段如何共存呢?(这是我当年的一大困惑,网上答案都查不到!!)结果其实是,使用Express框架的时候,你可以用服务器去渲染一个页面,也就是Express默认的index.js那个文件下的res.render()命令对吧?这种办法是在服务器后端,使用jade代码结合你输入过去的数据把整个html页面形成起来,然后再喷到用户的浏览器上。如果你要用Vue的话,你可以把Webpack压缩好的index.html放到Express目录下的某一个地方(你找得到就行),然后把res.render()命令改成res.SendFile(“your/path/index.html”),然后就可以看到页面了,整个过程中,就完全绕过了jade它们。这种在本质上,就是你已经把前段写完了,然后放在服务器上,而不是在用户点击的时候才实时渲染的。可能你已经注意到了,使用vue或者jade,其实就在于red的命令的用法,所以说,你甚至可以在一个网站上配置两种网页打开方式。

之所以写了上面一段话,是因为个人觉得现在教材真的不清不楚的,让人搞不清楚不同框架之间是怎么联系的?前段框架是什么?和后端框架有什么区别?这些问题对于初学者(几天前的我)来说确实真的很头疼,但是也没有什么权威的资料,上网一查,过往老程序员都是各种不屑回答,一两个字一两个词,说什么“搞不懂你怎么把前段框架和后端框架搞混的?”,所以写了这一段话,如果有的人遇到了我当年的困惑,现在也许可以明白一些些。

配置Atom

最后还需要做一个工作,Atom编辑器缺少对于vue文件的配色,我们稍微升级它一下下,有助于以后我们的开发工作。点击下面的地方打开安装Package的地方,简直不能更方便…我现在都想把我的后端也拿来Windows上写了:

零基础Vue入门学习记录(1)

我需要的几个插件有:vim-mode, ex-mode, relative-mode, language-vue-component. 直接搜索一个一个点击安装就行了。