Nodejs安装、npm前端包管理工具使用及github项目上项目演示 |
您所在的位置:网站首页 › node软件下载 › Nodejs安装、npm前端包管理工具使用及github项目上项目演示 |
下面是小凰凰的简介,看下吧! 💗人生态度:珍惜时间,渴望学习,热爱音乐,把握命运,享受生活 💗学习技能:网络 -> 云计算运维 -> 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 |