Vue-cli框架的快速理解

学了四年计科，没干多少和实际产品有太多关系的事情。最新开始尝试做纯前端弥补一下这方面的缺失，先是前几天用传统的html+css+js方法做了一个纯前端的Todo-List工具，后来配合Django做了一个前后端耦合得很厉害的留言板。

软工的同学看了我的代码，说你这样不行啊，现在都前后端分离了，来用Vue脚手架做吧。

我挺怀疑刚入门就用框架会不会翻车？但简单熟悉了下，不得不说Vue脚手架是真好用。本文不会包含Vue-cli的详细操作，只会从一个从没写过前端的人的视角、按照后端的思维来说说Vue脚手架的使用逻辑。（版本为Vue-cli4）

## 启动Vue-cli

这部分没什么好说的，npm install然后vue create就行。创建完项目试试npm run serve，就可以看到一个最简单的欢迎页面了。

## 项目文件结构

项目创建完，目录大概是这样的：

除了readme和src，其他的都不用管。你需要写的东西全存放在src中，下面我们打开src看一下：

初始时src下面有2个文件夹。其中assets是用来放图片等等的静态资源，以供网页使用的；components文件夹下放置着所有的.vue文件，也就是所谓的组件。这里面的内容是代码的核心，也是我觉得脚手架最棒的地方；config文件夹和router文件夹都是我后来加的，其中config文件夹下放了和后端通讯的api，router文件夹下则存放了一个vue-router的路由表，这个后面再说。

需要注意的是，App.vue是整个项目的入口，也就是说用户一上来访问的就是这个组件。

## Components

之前我说组件化的设计是我觉得脚手架最棒的地方，这是因为它一下子就让前端开发也变得像后端一样令人熟悉了。Components文件夹下的每一个vue组件都按照一定格式组织起来，彼此可以互相调用、通讯、甚至也能有“继承”的关系，结构上已经非常像一些面向对象的语言的项目结构了。这样的好处就是分工合作变得异常简单，配合一个git就完事了。

初看vue组件，会发现其中没有html标签，但这并不影响什么，我们完全可以就把template标签当作html来看，然后把所有的东西都丢进去。

由于我使用了Element样式库，所以组件直接就放里面复制，立马就能看到成果。组件的script部分与传统开发不太一样，分为了data，components，method等部分。其中data存放被vue双向绑定的数据，method则存放着所有@click指向的函数。components只在调用了其他组件时需要使用，只要填入被调用的组件名即可（当然开头必须得先import进来）。

除此之外，还有一些特殊的，比如created()和mounted()之类的。这些实际上是组件的生命周期钩子，created部分会在页面被渲染前调用，mounted()则会在页面产生变化时被调用。配合这些钩子函数，我们可以很好地完成一些初始化任务。

##Vue-router

Vue-router是用来实现页面跳转的一个很方便的工具，官方文档给的很详细。这个工具通过将文件中<router-view>标签进行替换来实现“路由跳转”的功能，只需要在一个文件中声明每一个URL对应哪一个组件即可。

## 实际开发记录

实际开发时，通过Vue-cli，我们几个人通过统一的样式库可以做到完全分开的前端开发，然后只需要将组件merge到一起就可以直接webpack打包运行，效率非常高，文件目录也清晰明了。

我们做的是一个规模一般的项目，大概几十个组件。做下来总结了下一般的开发思路，只要不是单页应用，应该App.vue中都得有一个router-view，放在主容器里面（容器外面可以有一些固定的按钮或者logo什么的），然后通过router进行内容的切换即可。