如何运行vue项目（维护他人的项目）

假如你是个小白，在公司接手他人的项目，这个时候，该怎么将这个项目跑通？

前提：
首先，这个教程主要针对vue小白，并且不知道安装node.js环境的。言归正传，下面开始教程：在维护项目之前，需要把所有的环境搭建好，这里我就不多说了，看这篇就够了：十分钟上手-搭建vue开发环境（新手教程）https://www.jianshu.com/p/0c6678671635

好了，再重复具体不嫌麻烦的把步骤操作一遍，做技术就得孰能生巧，一遍又一遍不断的重复
如下：

1：安装cnpm
由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org

图片.png

2：安装webpack
npm install webpack -g
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack 的核心是依赖分析,把依赖分析出来了，其他都是细枝末节。

图片.png

3：安装vue-cli
cnpm install vue-cli -g
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板
，这个过程会耗时十几秒，等走完就好；好了，到此整个环境就搭建好了

图片.png

4：cd /项目名称
下面就是运行项目了，cd /项目名称，我的文件放在D盘，所以先进入d盘，再进入项目。
cd ShopApp

图片.png

5：npm install
进入项目之后安装依赖，安装成功

图片.png

注意：在这一步可能会出现这样的错误；因为你打开的是别人的项目，项目之中肯定有 node_modules模块，那么先删除掉，在执行npm install命令

图片.png

如果出现了，请参考这篇文章解决：https://www.jianshu.com/p/5e62d852babc

6：npm run dev
一切准备就绪，启动项目
npm run dev

图片.png

7：自动启动浏览器就会打开项目了
在浏览器中输入http://localhost:8080/#/；进入项目首页
若是要访问其他页面，直接在#后面加上组件名称即可：例如http://localhost:8080/#/adjustIntegral

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

转载于:https://www.cnblogs.com/wangting888/p/9701379.html

如何运行vue项目（维护他人的项目）相关推荐

lis通道号_LIS系统项目维护操作说明-.doc
LIS系统项目维护操作说明- LIS系统项目维护操作流程说明软件名称:东软医疗LIS系统登录系统进入主界面. 点击菜单栏中的管理出现下拉菜单: 点击系统管理进入系统管理界面: 其中有四个选项卡 1 ...
vue使用命令行构建完项目后_vue-cli 构建项目在IE中无法运行解决方式(build之后可运行)...
IE浏览器(只考虑IE11,更低版本我没考虑)运行时报 Promise未定义的错误解决办法: 1. 安装babel-polyfill (1.) npm install babel-polyfill ...
记录，再次运行vue项目报错POST http://127.0.0.1:8888/api/private/v1/login/login
可以打开登录界面,却无法打开登录后界面代码没有问题,查阅资料后是后台服务器没打开删除package-lock.json文件运行npm install 再次运行node .\app.js 打开ph ...
win10快速运行vue项目跑起来 - 方法篇
如何让win10更快速跑vue项目运行起来? 不用再每次先cd到项目目录了, 直接进入根文件夹后,再打开Powershell窗口,可以省略一大堆操作 (详情如下简介) 快捷操作如下: 先打开,并进入 ...
本地运行vue.js项目，如何更改调试的默认端口？
运行本地vue.js项目,如何更改调试的默认端口? 之前学会了安装和使用node.js.npm.cnpm.webpack等相关的一些知识和技巧, 但是在搭建vue.js框架,进行开发的时候,会发现在进 ...
如何运行vue项目（从gethub上download的开源项目）
前提:入坑vue.js,从GitHub上download一个vue.js的开源项目,发现不知如何在浏览器运行,通过查阅网上教程,发现网上的很多是教你怎么新建项目,并没有一个是教如何打开已有的项目.自已 ...
教你使用 IDEA 配置和运行vue项目
点击关注公众号,实用技术文章及时了解来源:cnblogs.com/ya-qiang/p/9639187.html 刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过.然后一上来就需要看代 ...
如何运行vue项目？(详解，建议收藏) ❤️
如何运行vue项目 (详解,建议收藏) 转载首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像安装node.js 从no ...
运行VUE项目时，出现npm ERR! A complete log of this run can be found in:...报错
运行VUE项目时,出现npm ERR! A complete log of this run can be found in:报错时,分享以下一种解决方案. 本机的 node版本如下解决方法 1. ...

如何运行vue项目（维护他人的项目）

如何运行vue项目（维护他人的项目）相关推荐

最新文章

热门文章