1、 vue-cil 构建项目： 官网的介绍

vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。我们不需要知道它究竟是什么，只需要知道它是一个工具帮助我们辅助开发，而我们所要做的就是安装上它，来方便我们的开发。

下面，我们来用vue-cil构建一个项目。

首先，我们在终端中把当前目录定位到你准备存放项目的地方。即自己定义的一个目录下面

我们首先需要安装vue-cil。我们照着官网的命令行直接在命令端口输入命令就行，细节如下：（linux和window通用）

npm install -g vue-cli 或者官网的： $ npm install –global vue-cli

这个命令是全局安装vue-cli的意思，只需要运行一次就可以了。安装上之后，以后就不用安装了。

2、在你需要的项目目录下执行以下代码：

vue init webpack-simple vue-demo

(vue-demo)为项目名称，使用webpack-simple更加轻便，少了很多单元测试等的繁琐流程

3、下载路由

cnpm install vue-router -D

4、之后跑起来

npm run dev

5、打开项目文件夹

(1)引入路由，在main.js里边添加两行"import VueRouter from 'vue-router'"    "Vue.use(VueRouter);"  

(2)创建components文件夹里边放一些.vue模版比如Header,Home等等

(3)配置路由，在src目录下新建一个router.config.js的文件,配置如下

再回到main.js添加如下代码

至此路由配置完成。

6、使用animate.css动画

把animate.css 文件放在assets/css下然后在main.js中添加

之后在组件中

画面就可以动起来了