零基础Vue入门学习记录（1）

零基础Vue入门学习记录（1）

最近想要学会的东西有

vue-router

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

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

环境配置

首先是决定了用Windows作为开发环境，没别的原因，我的笔记本是正版Windows系统，不想换了。所以先配置一下vue开发环境和

Atom

。根据我的经验，Windows下和Linux下不会有太大区别的，最大的差异可能就在于CMD命令行的糟糕设计。我发现了一个叫做

cmder

的工具可以用来替换Windows下的CMD命令框。

在下载安装完nodejs之后，需要在node的主文件夹下建立两个文件夹：

node_global

和

node_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文件夹……



然后用如下两行命令：

cd Front
npm install

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

大概一两分钟过以后，所有的module都安装完毕了，我们就可以打开神器Atom了，打开项目到Front文件夹下，就可以看到所有的文件，其中最重要的就是那个src文件夹，我已经打开了：



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

npm run dev

就可以把整个程序运行起来。会自动打开一个网页，以后我们的大部分工作，就是不断使用Atom修改增删这个Front文件夹内的东西，知道这个网站的页面越来越完善。



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上写了：



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