前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >本地运行github上的vue2.0仿饿了么webapp项目

本地运行github上的vue2.0仿饿了么webapp项目

作者头像
王小婷
发布2018-09-26 17:58:17
1K0
发布2018-09-26 17:58:17
举报
文章被收录于专栏:编程微刊

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

图片.png

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),不然会出现很多报错。

image

2:查看node的版本号

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

代码语言:javascript
复制
输入命令: node -v

image

3:安装淘宝npm镜像

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

代码语言:javascript
复制
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

image

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

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

代码语言:javascript
复制
输入命令:cnpm install --global vue-cli

image


准备就绪,开始步骤

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

图片.png

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

代码语言:javascript
复制
npm install --save-dev

图片.png

3:运行项目

代码语言:javascript
复制
$ npm run dev

图片.png

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

图片.png

4:发布代码:

代码语言:javascript
复制
    $ npm run build

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

图片.png


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.09.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1:安装node
  • 2:查看node的版本号
  • 3:安装淘宝npm镜像
  • 4:安装全局vue-cli脚手架
  • 准备就绪,开始步骤
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档