在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了

github源码地址:https://github.com/RegToss/Vue-SPA

课程教程:http://coding.imooc.com/class/74.html

首先搭建好vue的运行环境

1:安装node

端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

2:查看node的版本号

下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。

输入命令: node -v

3:安装淘宝npm镜像

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

4:安装全局vue-cli脚手架

淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

输入命令:cnpm install --global vue-cli


准备就绪,开始步骤

1:从github上下载此项目,放在E盘里面备用

2:进入代码根目录安装依赖:

npm install --save-dev

3:运行项目

$ npm run dev

在浏览器打开:http://localhost:8080

4:发布代码:

    $ npm run build

发布完代码后会生成dist目录,保存着项目的所有可运行的代码。


原文作者:祈澈姑娘

技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本地运行github上的vue2.0仿饿了么webapp项目的更多相关文章

  1. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

  2. vue2.0+webpack+vuerouter+vuex+axios构建项目基础

    前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,web ...

  3. GitHub 上 57 款最流行的开源深度学习项目

    转载:https://www.oschina.net/news/79500/57-most-popular-deep-learning-project-at-github GitHub 上 57 款最 ...

  4. GitHub 上 57 款最流行的开源深度学习项目【转】

    GitHub 上 57 款最流行的开源深度学习项目[转] 2017-02-19 20:09 334人阅读 评论(0) 收藏 举报 分类: deeplearning(28) from: https:// ...

  5. vue2.0仿今日头条开源项目

    vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...

  6. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  7. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  8. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

  9. 项目vue2.0仿外卖APP(一)

    最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...

随机推荐

  1. php函数in_array奇怪现象

    $k = 0; $fieldArr = array('tt', 'bb'); if ( in_array( $k, $fieldArr)) { echo '1'; } 按理来说,是不会输出1的,可是最 ...

  2. 【Struts2学习笔记(12)】Struts2国际化

    (1)准备资源文件,资源文件的命名格式例如以下: baseName_language_country.properties baseName_language.properties baseName. ...

  3. MPI搭建简要教程

    具体安装部署,能够參考 http://www.ibm.com/developerworks/cn/linux/l-cn-mpich2/,该教程将的比較具体. 注:不同版本号的 MPICH2对编译器以及 ...

  4. Android 代码中使用Color工具类 parseColor

    方式一: arg1.setBackgroundColor(Color.parseColor("#87CEFA")); 方式二: arg1.setBackgroundColor(ge ...

  5. iOS: 零误差或极小误差的定时执行或延迟执行?

    问题如下: 节奏类游戏需要执行很多的跟音乐节拍相关的操作,并且为了保证节奏感,需要让操作跟节拍的关系十分紧密.对两者间隔要求不能超过0.02秒或更低. 目前使用了 GCD 中的 asyncAfter( ...

  6. PostgreSQL Replication之第六章 监控您的设置(4)

    6.4 处理监控工具 还有几个监控工具可以使您的日常生活更轻松. 其中最流行的监控工具是Nagios.它被广泛地使用,也支持各种软件组件. 要使用 Nagios 来监控您的 PostgreSQL 集群 ...

  7. 学以敩(xiao,效)为敎,以见为觉。醒悟、明白。

    学以敩(xiao,效)为敎,以见为觉.醒悟.明白 上半部分中间的爻是算筹,在古时被用来记数和计算:两边是手,既表示手把手传授,双手也表恭敬与专注:中间是一座房子,表示教学和学习的地方,这个地方不用豪华 ...

  8. Android后台进程与前台线程间的区别使用

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 很早就翻译过Android API的一篇文章Android高级 ...

  9. typedef 与 set_new_handler的几种写法

    可以用Command模式.函数对象来代替函数指针,获得以下的好处: 1. 可以封装数据 2. 可以通过虚拟成员获得函数的多态性 3. 可以处理类层次结果,将Command与Prototype模式相结合 ...

  10. [Angular] *ngIf syntx

    <div class="profile"> <img [src]="user.img" width="50px"> ...