最近在博客园上看到不少关于vue的文章但感觉都是在简单原生写法上,真正vue在实际开发中的优点组件化,spa应用,路由好像都没涉及到,我在学angular1的时候发现没有中文版的api,于是本人不才弄了angular api网站方便大家学习和查询,刚好在学vue就用vue重构下这个网站,我会将我重构的所有步骤写下来,当然这个是实际开发中的步骤,可能对package.json 的讲解不那么仔细。

开发环境：node6.2 webstrom2016 vue2.0 vue-cli

第一步安装node，这个我就不详说了，百度网上一大堆

第二部安装配置好node之后，就是安装vue-cli，cmd下输入命令

npm install vue-cli

这个估计要*,翻不了墙的可以用淘宝的镜像.

npm install vue-cli -g --registry=http://registry.npm.taobao.org/ --disturl=https://npm.taobao.org/dist

提示

安装成功后,运行命令

vue init webpack my-project

创建项目,按提示输入项目信息

创建成功后会自动创建项目用到基础文件

用到vue包也自动加载到package.json中

下面就来介绍vue的组件结果:

这是一个组件,组件的代码分为三层,html层,cs层,js层

调用这个组件是在app.vue中如图:

这个app.vue也是一个组件,整个项目只有一个index.html页面,其他的都是用一个一个组件组合起来的,这就是典型的spa应用.

有个入库main.js

ok用vue-cli例子创建完了,就是加路由了.

在package.json加这个包

在main.js中

html的路由标签是

<router-view></router-view>

大概的框架介绍完了,我重构的网站值设置两个路由,用vue实现了菜单的效果.这里就不详细介绍了,后期还要优化,加搜索功能.

重构的网站在git上地址是:https://github.com/Walnuthetao/demo

后期会用angular2的重构下这个网站,大神可能看不上眼呵呵,我只是个普通的码农,为能在大城市买房而奋斗着,加班着!

忘了加运行方法:输入命令

npm install

之后在输入

npm run dev