技能学习:学习使用node.js + vue.js,开发前端全栈网站-1.工具和本地环境

简介: Node.js 运行环境是引领前端开发人员的“一道光”,让前端开发人员**仅**利用已掌握的 js 语言就可以实现对网站服务器环境的搭建与运行。打破了以往前后端分工合作、交流对接的惯性习惯。 相对于传统PHP、JAVA开发,Node.js 附带的npm更方便、快捷地让前端开发人员更快、更方便地使用和获取其他前端大神封装好的 js 类库和精美UI样式库,舍去不同语言和不同编码的切换过程。
+关注继续查看

1.前言

为什么学习Node.js?

Node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境。
Node.js 运行环境是引领前端开发人员的“一道光”,让前端开发人员利用已掌握的 js 语言就可以实现对网站服务器环境的搭建与运行。打破了以往前后端分工合作、交流对接的惯性习惯。
相对于传统PHP、JAVA开发,Node.js 附带的npm更方便、快捷地让前端开发人员更快、更方便地使用和获取其他前端大神封装好的 js 类库和精美UI样式库,舍去不同语言和不同编码的切换过程。
本系列文章在bilibili《全栈之巅》课程学习过程中作学习记录而写,将学习过程中卡顿的问题整合并上网搜集资料留下学习日记,多数逻辑在全栈之巅课程习得,特此说明并支持全栈之巅大佬的课程。

作为一个专业打工人,最开始本UI设计师学习了PHP的TP后台框架、前端各种样式框架(类似layui , bootstrap),最终完成的页面参差不齐,代码混乱不堪,直到见识了 Node.js,才知道一个项目可以如此美丽。由此,现在以个人接单网站项目记录学习过程并分享给大家。此过程比较漫长,会持续更新直到项目上线,文章分节以单个功能或一个页面模块为单位,尽量不让大家看着心烦。

2.环境与工具

(1)Node.js
官网下载 http://nodejs.cn/,环境与语言不同,没什么改动,只是不断完善,所以下载最新版就好了。
image.png
根据自己的情况下载。
image.png

(2)VScode编辑器
Visual Studio Code,以前不太详细学习前端,发现许多前端大神都使用vscode编辑器,就像后端大佬使用webstorm一样。其中包含各种方便的插件,下方还可方便使用cmd窗口进行环境、类包的搭建与安装。最主要的是编写代码过程中提示功能是非常强的。
image.png

(3)npm的淘宝镜像
node.js是自带npm的,我们不用单独对npm进行下载。但是其是从国外进行下载,在网速不佳情况下会非常慢,所以要使用淘宝镜像提速。其他相关操作和原理大家自行百度就好,我用不到的东西就不跟大家提了。
下篇文章进行环境搭建时我们说如何使用npm。

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

(4)mongodb 数据库
mongodb官网https://www.mongodb.com/
image.png
根据自己电脑安装
image.png

相对于 MySQL,mongodb 数据库操作语言更便捷,MySQL 每一步都需要一个命令行进行操作。主要是好多前端大神使用 nodejs 都用这个数据库,像我这还在学习的傻子也不敢随便把 MySQL 用上,大家可以试试,不过尝试尝试新东西心情会好些。

相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。   相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
5天前
|
弹性计算 JavaScript 前端开发
前端开发基础6:Node.js和LESS预编译工具
本实验将介绍如何通过Node.js进行前端预编译。
16 1
|
30天前
|
前端开发 JavaScript UED
Axios网络请求:前端数据交互的强大工具
本篇深入介绍了Axios网络请求库的使用,涵盖了基本的GET和POST请求、拦截器的应用、并发请求的处理以及取消请求的方法。通过详细的代码示例,读者可以了解如何在前端应用中使用Axios进行数据交互,实现高效、可靠的网络请求,从而提升应用性能和用户体验。无论是单一请求还是多个请求的并发处理,Axios都展现了强大的功能,为前端开发者提供了一种优秀的解决方案。
37 0
|
1月前
|
前端开发
前端项目实战拾叁-连接postgrest的工具建议使用DBeaver
前端项目实战拾叁-连接postgrest的工具建议使用DBeaver
25 0
前端项目实战拾叁-连接postgrest的工具建议使用DBeaver
|
1月前
|
SQL 前端开发
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
20 0
|
1月前
|
数据可视化 前端开发 JavaScript
前端数据可视化的工具和库
前端数据可视化的工具和库
|
2月前
|
监控 前端开发 测试技术
前端工程化的前端性能的性能测试/监控工具之Performance工具
Performance 工具是一个非常强大的前端性能测试工具,因为它可以在不同的设备和浏览器上测试和监控网页的性能,从而帮助开发者了解网页的实际性能表现。
121 0
|
3月前
|
前端开发 JavaScript 测试技术
从0搭建Vue3组件库(六):前端流程化控制工具gulp的使用
从0搭建Vue3组件库(六):前端流程化控制工具gulp的使用
53 0
|
3月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之Stylus
Stylus是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
44 1
|
3月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之PostCSS
PostCSS是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
42 3
|
3月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之Less
Less是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
40 1
推荐文章
更多