最近在博客园上看到不少关于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

angularApi网站用vue重构的更多相关文章

  1. vue重构--H5--canvas实现粒子时钟

    上一篇文章讲解了如何用js+canvas实现粒子时钟,本篇文章 ,主要是使用vue重构,让它在vue也能使用. 我们使用简单的方式重构,不使用vue工程,先加入vue cdn的地址,如下: <s ...

  2. vue重构后台管理系统调研

    Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码. 首先就要那后台管理来开刀来,现有的技术框架就是php ...

  3. 前端mvc mvp mvvm 架构介绍(vue重构项目一)

    首先 我们为什么重构这个项目 1:我们现有的技术是前后台不分离,页面上采用esayUI+jq构成的单页面,每个所谓的单页面都是从后台胜场的唯一Id 与前端绑定,即使你找到了那个页面元素,也找不到所在的 ...

  4. vue 重构项目第一步(vue-cli跟bootstrap)

    一.先安装jq跟bootstrap 1.因为bootstrap依赖jq,先安装jq----->npm install jquery@1.11.3 --save-dev   ----->可以 ...

  5. 仿B站项目——(1)计划,前端工程

    计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...

  6. 走进Vue时代进阶篇(01):重构电商购物车模块

    前言 从这篇文章开始,我准备给大家分享一些关于Vue.js这门框架的技巧性系列文章,正好我们公司项目中也用到了Vue.所以,教是最好的学.进阶篇比较适合于二三线城市,还在小厂打拼的童鞋们.欢迎你们跟着 ...

  7. 省A类竞赛二等奖--村先游项目VUE前端重构

    村先游--省二竞赛项目VUE重构 源码地址: 重构前的(前端+后台):https://github.com/Archer-Fang/cunxianyou 重构前的(前端):https://github ...

  8. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  9. vue.js 第二课

    实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通 ...

随机推荐

  1. x264命令参数与代码中变量的对应关系

    帧类型选项:  -I/--keyint i_keyint_max 最大IDR帧间距,默认为250  -i/--min-keyint i_keyint_min 最小IDR帧间距,默认为25  --sce ...

  2. [改善Java代码]警惕自增的陷阱

    建议7: 警惕自增的陷阱 老师就说:自增有两种形式,分别是i++和++i,i++表示的是先赋值后加1,++i是先加1后赋值,这样理解了很多年也没出现问题,直到遇到如下代码,我才怀疑我的理解是不是错了: ...

  3. HttpClient(4.3.5) - HTTP Request & HTTP Response

    HTTP Request All HTTP requests have a request line consisting a method name, a request URI and an HT ...

  4. Linux 命令 - chmod: 更改文件模式

    文件的模式 当使用 ls -l 命令查看目录内容时 [huey@huey-K42JE cmdline]$ ls -l /etc/passwd -rw-r--r-- 1 root root 1917 J ...

  5. 第四节 使用XML

    可扩展标记语言XML,是一种平台无关的数据表示格式,对特定数据表示需求的数据来说,比关系型格式有一定的优势. XML文档可以是计算机上的物理文件,网络上的数据流,或者仅仅是内存中的字符串.但是,XML ...

  6. Exception与相关

    怎么写一个exception类, 直接抛出去,主要是写一个构造函数里面的Msg消息,这个可以提前写出来. try...catch..finally 一般都是一起的,try 中有异常执行语句, catc ...

  7. ios中Raw文件系统常用文件夹

    1.[/Applications] 常用软件的安装目录 2.[/Applications/Preferences.app/zh_CN.lproj] 软件Preferences.app的中文汉化文件存放 ...

  8. 【Cocos2d入门教程五】Cocos2d-x动作篇

    动作类(Action)是所有动作的基类,它创建的一个对象代表一个动作.动作作用于Node,包括继承于之下的Layer.Sprite.因此每个动作 都需要由Node对象或者其继承者执行.动作类(Acti ...

  9. Sql Server关于text类型的替换

    UPDATE Store SET Body=replace(convert(varchar(8000),Body),'http://120.89.46.68:8007','')

  10. 谈谈css中的before和after

    css中的伪元素before和after,其实有很多小的妙用. 一.基础用法 w3c中的基础用法:用来给元素的内容前面(对应:before)或者后面(对应:after)插入新内容. <p> ...