技能学习:学习使用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的安装方法来,大家有需求百度一下很容易就能给大家解决。
相关文章
|
1月前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
3天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
19 2
|
18天前
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
1天前
|
前端开发 JavaScript
js开发中的异步处理
JavaScript中的异步处理包括回调函数、Promise和async/await。回调函数是早期方法,将函数作为参数传递给异步操作并在完成后执行。Promise提供链式处理,通过resolve和reject管理异步操作的成功或失败。async/await基于Promise,允许写更简洁的同步风格代码,通过try-catch处理错误。Promise和async/await是现代推荐的异步处理方式。
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
2天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield 'Hello'; yield 'World'; } ``` 创建实例后,通过`.next()`逐次输出"Hello"和"World",展示其暂停和恢复的特性。
13 0
|
2天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
13 2
|
3天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1
|
3天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
14 0
|
11天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012