angularApi网站用vue重构
最近在博客园上看到不少关于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重构的更多相关文章
- vue重构--H5--canvas实现粒子时钟
上一篇文章讲解了如何用js+canvas实现粒子时钟,本篇文章 ,主要是使用vue重构,让它在vue也能使用. 我们使用简单的方式重构,不使用vue工程,先加入vue cdn的地址,如下: <s ...
- vue重构后台管理系统调研
Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码. 首先就要那后台管理来开刀来,现有的技术框架就是php ...
- 前端mvc mvp mvvm 架构介绍(vue重构项目一)
首先 我们为什么重构这个项目 1:我们现有的技术是前后台不分离,页面上采用esayUI+jq构成的单页面,每个所谓的单页面都是从后台胜场的唯一Id 与前端绑定,即使你找到了那个页面元素,也找不到所在的 ...
- vue 重构项目第一步(vue-cli跟bootstrap)
一.先安装jq跟bootstrap 1.因为bootstrap依赖jq,先安装jq----->npm install jquery@1.11.3 --save-dev ----->可以 ...
- 仿B站项目——(1)计划,前端工程
计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...
- 走进Vue时代进阶篇(01):重构电商购物车模块
前言 从这篇文章开始,我准备给大家分享一些关于Vue.js这门框架的技巧性系列文章,正好我们公司项目中也用到了Vue.所以,教是最好的学.进阶篇比较适合于二三线城市,还在小厂打拼的童鞋们.欢迎你们跟着 ...
- 省A类竞赛二等奖--村先游项目VUE前端重构
村先游--省二竞赛项目VUE重构 源码地址: 重构前的(前端+后台):https://github.com/Archer-Fang/cunxianyou 重构前的(前端):https://github ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- vue.js 第二课
实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通 ...
随机推荐
- x264命令参数与代码中变量的对应关系
帧类型选项: -I/--keyint i_keyint_max 最大IDR帧间距,默认为250 -i/--min-keyint i_keyint_min 最小IDR帧间距,默认为25 --sce ...
- [改善Java代码]警惕自增的陷阱
建议7: 警惕自增的陷阱 老师就说:自增有两种形式,分别是i++和++i,i++表示的是先赋值后加1,++i是先加1后赋值,这样理解了很多年也没出现问题,直到遇到如下代码,我才怀疑我的理解是不是错了: ...
- 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 ...
- Linux 命令 - chmod: 更改文件模式
文件的模式 当使用 ls -l 命令查看目录内容时 [huey@huey-K42JE cmdline]$ ls -l /etc/passwd -rw-r--r-- 1 root root 1917 J ...
- 第四节 使用XML
可扩展标记语言XML,是一种平台无关的数据表示格式,对特定数据表示需求的数据来说,比关系型格式有一定的优势. XML文档可以是计算机上的物理文件,网络上的数据流,或者仅仅是内存中的字符串.但是,XML ...
- Exception与相关
怎么写一个exception类, 直接抛出去,主要是写一个构造函数里面的Msg消息,这个可以提前写出来. try...catch..finally 一般都是一起的,try 中有异常执行语句, catc ...
- ios中Raw文件系统常用文件夹
1.[/Applications] 常用软件的安装目录 2.[/Applications/Preferences.app/zh_CN.lproj] 软件Preferences.app的中文汉化文件存放 ...
- 【Cocos2d入门教程五】Cocos2d-x动作篇
动作类(Action)是所有动作的基类,它创建的一个对象代表一个动作.动作作用于Node,包括继承于之下的Layer.Sprite.因此每个动作 都需要由Node对象或者其继承者执行.动作类(Acti ...
- Sql Server关于text类型的替换
UPDATE Store SET Body=replace(convert(varchar(8000),Body),'http://120.89.46.68:8007','')
- 谈谈css中的before和after
css中的伪元素before和after,其实有很多小的妙用. 一.基础用法 w3c中的基础用法:用来给元素的内容前面(对应:before)或者后面(对应:after)插入新内容. <p> ...