从网上下载一个vue项目,跑起来的全过程

一、首先从github上来一个项目下来,在这里我就不细说了。

二、先查看项目所需要的Node版本和vue版本,进入到项目的主目录下
在这里插入图片描述

点击package.json文件查看该项目所需要到的vue、node版本(node再带npm)
在这里插入图片描述在这里插入图片描述
三、开始下载node,官网:https://nodejs.org/zh-cn/,下载完安装包后,一直下一步,安装好后,使用代码测试一下安装好没有。

node -v

也顺便检擦一下npm版本(安装node会自带npm)

npm -v

显示版本号说明就可以了,还不行的话重启试试。
安装完node之后,最好配置成阿里源(不然外网的源卡的飞起。。。)
直接在doc界面中输入代码即可。

 npm config set registry https://registry.npm.taobao.org

四、安装vue-cli,直接在npm中下载即可,项目里的版本是2.5.16,我直接用代码下载的是2.9.6(项目启动成功,版本没有完成对应,应该不要紧)

npm install -g vue-cl

下载成功后,直接在doc界面输入vue -V出现版本号说明安装成功。
注意:发现npm install -g vue-cl下载的vue,也可以根据指定的版本号下载(这步可以不用理)

npm install -g vue-cli@2.5.6

这个版本号要注意了,npm中一定要有这个版本号,不然会报错,教大家一个看版本号的方法。

npm  view vue-cli versions --json

在这里插入图片描述

五、vue和node都下载好了,这个时候开始下项目的依赖了。打开项目目录,进入doc页面

npm install

这个过程是前端项目下载依赖的过程,有可能有些包会下载失败,下载失败的话,把node_modules这个目录删了,在重新执行一次npm install,直到没有错为止。
在这里插入图片描述备注:一般git clone拉下拉的前端代码是没有node_modules这个目录的,npm install后才有。
六、依赖和环境都配置好了,那么就开始运行项目,直接打开doc界面

npm   dev run

到这里整个前端项目就跑起来了。
本人是一个JAVA狗平时也没怎么学过前端,在这里做一下笔记,如有错误欢迎大家点出~~

  • 14
    点赞
  • 56
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
### 回答1: 从网上下载一个Vue项目并使其运行起来全过程如下: 首先,通过搜索引擎或者在开源代码托管平台(如GitHub)上搜索Vue项目。找到一个合适的项目后,点击项目的链接,进入项目的主页。 在项目主页上,可以查看项目的介绍、使用方法、依赖关系等信息。通常,项目主页也会提供项目的源代码仓库地址。 在项目的源代码仓库页面,可以找到项目的确切的下载地址。可以选择直接下载项目的zip压缩包,或者使用版本管理工具(如Git)克隆项目的仓库。 下载完成之后,将压缩包解压到本地文件夹中。如果使用版本管理工具克隆项目,则会自动在本地创建一个与仓库相对应的文件夹。 解压完成后,进入项目的根目录。在该目录下,可以找到项目的配置文件(如package.json)和源码文件(如Vue组件、JavaScript文件、CSS样式表等)。 打开一个命令行界面(如终端、命令提示符等),切换到项目的根目录。确保已经安装了所需的运行环境和依赖。然后运行命令`npm install`或者`yarn install`,以安装项目所需的依赖包。 依赖安装完成后,可以运行命令`npm run serve`或者`yarn serve`来启动项目的开发服务器。在命令行界面中,可以看到项目成功启动并监听指定的端口。 在浏览器中访问`http://localhost:8080`(具体的端口号可能会有所不同),就可以看到项目在本地运行起来了。此时,可以根据项目的需求,在浏览器中进行交互操作、页面浏览等。 以上就是从网上下载一个Vue项目并使其运行起来全过程。在下载和运行过程中,注意根据项目的要求安装必要的运行环境和依赖,并且遵循项目的使用方法和指示。 ### 回答2: 下载一个vue项目并成功运行起来的过程如下: 1. 首先,在浏览器中打开一个网站或者使用搜索引擎搜索vue项目。 2. 在搜索结果中找到一个合适的vue项目,如GitHub或其他开源代码托管网站上的项目,点击进入该项目的页面。 3. 在该项目的页面上,找到并点击项目的"Clone"或"Download"按钮,选择"Download ZIP"选项,下载项目的压缩文件到本地。 4. 解压下载的压缩文件,得到一个文件夹,里面包含了项目的所有文件和文件夹。 5. 打开解压后的文件夹,在命令行或终端中进入该文件夹的路径。 6. 在命令行或终端中执行命令"npm install",等待一段时间,该命令会根据项目中的package.json文件安装项目所需的依赖包。 7. 安装完成后,在命令行或终端中执行命令"npm run serve",该命令会启动一个开发服务器并运行项目。 8. 在命令行或终端中可以看到项目启动的信息,并提供访问项目的本地地址,如"http://localhost:8080/"。 9. 打开浏览器,输入项目的本地地址,即可访问运行中的vue项目。 10. 如果项目需要修改或调试,可以编辑项目文件,并保存后刷新浏览器即可看到修改效果。 通过以上步骤,我们可以从网上下载一个vue项目,并成功在本地运行起来。根据项目的不同,可能还需要其他操作或配置,但以上步骤是一个基本的下载和运行vue项目的过程。 ### 回答3: 从网上下载一个Vue项目并成功运行的全过程如下: 1. 打开网站(如GitHub、码云等)或者Vue官方网站,搜索你感兴趣的Vue项目。 2. 在搜索结果中选择一个合适的项目,并进入其仓库页面。 3. 在仓库页面上找到并点击"Clone"或"Download"按钮,复制项目的仓库地址或下载链接。 4. 打开命令行工具(如cmd、PowerShell、终端等)并进入你想要存放项目的目录,然后执行以下命令: git clone 仓库地址(如果是使用Git下载项目) 或者 wget 下载链接(如果是使用wget下载项目) 或者 直接解压下载项目文件(如果是使用压缩包下载项目) 5. 下载完成后,在该目录下会生成一个包含项目代码的文件夹。 6. 打开命令行工具并进入该文件夹的根目录,执行以下命令以安装项目所需的依赖: npm install(使用npm作为依赖管理工具) 或者 yarn install(使用yarn作为依赖管理工具) 7. 等待依赖安装完成后,执行以下命令以启动项目: npm run serve(使用npm作为依赖管理工具) 或者 yarn serve(使用yarn作为依赖管理工具) 8. 等待项目编译完成后,在命令行工具中会显示项目运行的本地服务器地址。 9. 打开浏览器,并在地址栏中输入该本地服务器地址。 10. 回车后,浏览器将会加载并显示该Vue项目的页面。 11. 至此,你已经成功下载并运行了一个Vue项目。 注意:在上述过程中需要提前安装好相关的开发环境和工具(如Node.js、npm或yarn等)。此外,具体步骤可能会因项目下载方式的不同而略有变化,请根据具体情况进行相应操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值