最近在博客园上看到不少关于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. Reids配置文件redis.conf中文详解

    redis的各种配置都是在redis.conf文件中进行配置的. 有关其每项配置的中文详细解释如下: 附redis.conf英文原版: # Redis configuration file examp ...

  2. C#入门教程(一)–.Net平台技术介绍、C#语言及开发工具介绍-打造C#学习教程

    一.什么是.Net平台? .Net平台是微软搭建的技术平台,技术人员在此平台上进行应用的搭建与开发.它提供了运行所必须的环境.NET Framework类库以及CLR(公共语言运行时).好比我们人类的 ...

  3. MyBatis(3.2.3) - Configuring MyBatis using XML, typeHandlers

    As discussed in the previous chapter, MyBatis simplifies the persistent logic implementation by abst ...

  4. Redis 命令 - Sets

    SADD key member [member ...] Add one or more members to a set 127.0.0.1:6379> SADD foo hello (int ...

  5. replace替换语句

    t_sql语句:replace替换语句:update 表名 set 列名=REPLACE(列名,'替换的数据','替换后的数据')

  6. jQuery之手势密码

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 北大ACM(POJ1005-I Think I Need a Houseboat)

    Question:http://poj.org/problem?id=1005问题点:计算半圆面积及向上取整. Memory: 256K Time: 0MS Language: C++ Result: ...

  8. Cocos2d-x数据持久化-查询数据

    数据查询一般会带有查询条件,这可以使用SQL语句的where子句实现,但是在程序中需要动态绑定参数给where子句.查询数据的具体操作步骤如下所示.(1) 使用sqlite3_open函数打开数据库. ...

  9. 实例介绍Cocos2d-x中Box2D物理引擎:HelloBox2D

    我们通过一个实例介绍一下,在Cocos2d-x 3.x中使用Box2D物理引擎的开发过程,熟悉这些API的使用.这个实例运行后的场景如图所示,当场景启动后,玩家可以触摸点击屏幕,每次触摸时候,就会在触 ...

  10. 引用类型之Function类型

    Function类型 ECMAScript中最有意思的就是函数了,有意思的根源,在于函数实际上是对象.每个函数都是Function的实例,具有属性和方法.而重要的一点是,函数名,不过是指向函数的指针, ...