Nodejs安装、npm前端包管理工具使用及github项目上项目演示

您所在的位置:网站首页 node软件下载 Nodejs安装、npm前端包管理工具使用及github项目上项目演示

Nodejs安装、npm前端包管理工具使用及github项目上项目演示

2023-09-07 18:27| 来源: 网络整理| 查看: 265

下面是小凰凰的简介,看下吧! 💗人生态度:珍惜时间,渴望学习,热爱音乐,把握命运,享受生活 💗学习技能:网络 -> 云计算运维 -> python全栈( 当前正在学习中) 💗您的点赞、收藏、关注是对博主创作的最大鼓励,在此谢过! 有相关技能问题可以写在下方评论区,我们一起学习,一起进步。 后期会不断更新python全栈学习笔记,秉着质量博文为原则,写好每一篇博文。

文章目录 一、Nodejs安装二、npm前端软件包管理工具使用1、切换到项目路径2、生成package.json文件3、npm安装卸载jquery 三、github项目上项目演示1、现在github上找一个前端项目2、把代码clone到本地3、进入vue2-happyfri文件夹4、安装package.json中的软件包和依赖包5、开启本地服务器6、发布环境

一、Nodejs安装

点击我进入Nodejs官网在这里插入图片描述下载LTS稳定版! 在这里插入图片描述点击安装包,出现安装界面,一直下一步,傻瓜式安装!windows一样的!

二、npm前端软件包管理工具使用

python需要用到很多软件包,模块啊啥的,可以使用pip工具!centos操作系统下载centos系统的软件,可以用yum软件包管理工具!因此我们前端要用到的所有软件包,也需要一个包管理工具,这个就是npm,比如我们之前学的jquery,之后马上要学的bootstrap等等都不用再去官网下载了,或者复制粘贴框架代码了;我们用npm全部可以搞定,安装卸载,一条命令就安排!

我们怎么下载npm呢?其实刚才让大家下载Nodejs就已经下载了npm,Nodejs和npm是捆绑在一起的!,因此我让大家下载Nodejs不是接下来我要写nodejs博客,而是为了给大家讲解npm的使用!

1、切换到项目路径 cd /Users/shijiandingyiqingchun/PycharmProjects/learning 2、生成package.json文件

从现在开始我们应该要有项目的概念! 在这里插入图片描述这个整个红框框里的代码就应该属于一个项目的代码!package.json文件就是一个记录了你整个项目使用npm安装的各种软件包版本和其依赖的软件包的版本的文件。

npm init --yes //直接创建 npm init //交互式创建

在我们上传项目到github时,就不用把所有软件包及其依赖包都上传上去,其他用户可以根据package.json文件中的信息,下载对应的软件包及依赖包即可把整个项目需要的环境搭建好!

3、npm安装卸载jquery npm install jquery -S //安装jq,-S:将版本及依赖信息写入package.json npm uninstall jquery //卸载jquery,卸载后会自动把dependencies中的jquery移除

在这里插入图片描述

三、github项目上项目演示

我们部署别人写好的网页就不用在生成package.json了,因为一般它都有这个文件!

1、现在github上找一个前端项目

在这里插入图片描述

2、把代码clone到本地 git clone https://github.com/bailicangdu/vue2-happyfri 3、进入vue2-happyfri文件夹 cd /Users/shijiandingyiqingchun/PycharmProjects/learning/vue2-happyfri

后面的操作都是基于这个目录进行的!

4、安装package.json中的软件包和依赖包 npm install 或 yarn(推荐) // yarn我们还没学,现在就用npm 5、开启本地服务器

本地部署访问我们下载的这个网页!

npm run dev

命令执行后,如下: 在这里插入图片描述 我们可以看到本地服务器localhost:8088,下面阻塞住了,表示服务器开启,正在等待连接,如果ctrl+c就会关闭服务器!,接下来我们访问localhost:8088就能得到页面,如下: 在这里插入图片描述 我把页面缩放了一下,方便一窥全貌!

6、发布环境

上面我们演示怎么从github拉取代码到本地,在本地部署!接下来,我们需要知道怎么将本地的代码,部署到服务器上去!

npm run build

运行这个命令之后,在当前路径下会生成一个目录!如下: 在这里插入图片描述这个目录就把我们的vue2-happyfri打包压缩成了在生产环境部署的一套代码。这个代码会小很多,如下: 在这里插入图片描述虽然小了很多,但是在生产环境部署出来的效果和本地部署效果一致! 这个后面在学完django之后会细讲!



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3