最近在博客园上看到不少关于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
这个估计要FQ,翻不了墙的可以用淘宝的镜像.
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