技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-2.启动项目

简介: 使用vscode初始化项目。

1.项目初始化

项目分为三端。
1.项目前台web端,也就是呈现给用户的端口和页面。
2.项目管理后台admin端,供管理人员使用的端口和页面,用来实现数据的更新和维护。
3.服务端server端,供前后端开发调用接口的端口。

我们将三端内容创建,并将我们需要的工具包在npm工具中安装下来。
首先在桌面或其它非中文路径创建一个文件夹mine-node
在vscode打开此文件夹
image.png
如果界面没有终端窗口,在菜单栏"查看"中点选终端,把这个窗口召唤出来:)
创建server端
1.面板输入mkdir server,服务端不用使用前端框架,直接创建项目文件夹即可。
2.进入server文件夹(cd server)。
3.初始化项目(npm init -y)。
4.根据初始化后生成的package.json文件中可看到已经设定好的关于main的入口文件index.js,针对此我们在server文件夹创建一个index.js入口文件。
image.png
5.每次我们调用接口时都需要启动服务端,要想启动服务端就需要通过这个index.js入口文件进行server项目启动。
此时在package.json的scripts中设置:

{
  "scripts": {
    "serve": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

image.png
6.nodemon是启动node项目的工具,在终端面板输入npm i -g nodemon,-g是全局安装,因为所有项目启动基本都需要这个工具。
7.安装nodemon并且在package.json设置成功后,就可以在终端输入npm run serve启动服务端项目了。
8.根据界面生成的端口号,浏览器进入页面即可。

使用场景:mine-node项目中
cd server
npm run serve
server端后续模块见文章——技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-4.使用axios,并创建接口上传数据到mongodb数据库
image.png
创建web端
由于我们使用vue开发web端,所以使用vue创建该web端项目。
1.终端输入npm i -g @vue/cli,安装vue脚手架。
2.终端输入vue create web回车,安装web项目文件夹。
image.png
选择版本默认安装再次回车即可,没用过vue的朋友就下载2x,时间久网上解答多。
如果安装过程出现npm报错,把vscode关闭,右键以管理员身份运行。
3.安装完成后,web端的项目初始化就完成了,开启端口的方式与server端相同(npm run serve)。
4.根据界面生成的端口号,浏览器进入页面即可。
创建admin端
与web端相同创建过程。

2.安装淘宝镜像

上篇文章说到npm是从国外地址下载文件,所以我们需要使用国内的淘宝镜像提升下载速度,并且更稳定。
1.终端输入安装命令:

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

2.终端验证是否安装成功命令:

npm config get registry

3.关于cnpm

阿里巴巴的淘宝团队把NMP官网的文件、插件包都同步到了在中国的服务器,提供给我们从这个服务器上稳定下载资源。于是cnpm插件就诞生了,意思就是中国的npm。
1.cnpm的作用与npm的淘宝镜像功能相似,也是提供安全、稳定、快速的下载环境。
2.在npm上下载文件有时会失败,使用cnpm会成功,但是这种情况非常少,而且在网上就能找到失败原因(多数情况是因为npm大神上传了新的安装方式,或更新插件时出了bug)。
3.使用cnpm前最好把npm卸载,这两者是不可以混用的。
4.其实我们只要安装了淘宝镜像,下载速度就已经提升,而且不需要再进行npm的替换。
所以在这里我就不展示cnpm的安装方法来,大家有需求百度一下很容易就能给大家解决。
相关文章
|
7天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
3天前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
2天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
5天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第15天】在数字化浪潮中,Node.js作为一颗耀眼的星辰,为后端开发领域注入了活力与创新。本文将带你领略Node.js的魅力所在,探索其架构设计、性能优化及实战应用,让你在轻松愉快的氛围中掌握Node.js后端开发的精髓。
|
9天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你走进Node.js的世界,了解其背后的运行机制和实际应用。我们将从基础概念出发,逐步深入到实战应用,最后通过代码示例巩固学习成果。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
7天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第13天】本文将带你进入Node.js的世界,从基础概念到实际案例,深入浅出地探讨如何利用Node.js进行后端开发。通过本文的学习,你将了解Node.js的工作原理、核心模块、以及如何构建一个简单的Web应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
12天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
8天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
29 3
|
7天前
|
JavaScript 前端开发 API
如何在前端开发中有效管理状态:React vs. Vue
在现代前端开发中,状态管理是一个关键因素,它直接影响到应用的性能和可维护性。React 和 Vue 是当前最流行的前端框架,它们在状态管理方面各有优势和劣势。本文将深入探讨 React 和 Vue 在状态管理中的不同实现,分析它们的优缺点,并提供实际应用中的最佳实践,以帮助开发者选择最适合他们项目的解决方案。
|
9天前
|
缓存 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你进入Node.js的世界,探索其背后的哲学、核心概念以及如何利用它来构建高效、可扩展的后端服务。无论你是前端开发者寻求全栈技能,还是后端开发者希望拓宽技术栈,这篇文章都将为你提供价值。我们将从基础讲起,逐步深入到实战应用,让你对Node.js有一个全面而深刻的理解。
20 2