node.js+vue+mysql项目实战入门之环境搭建,项目创建-附github地址(代码片段)

CodingWithyou..... CodingWithyou.....     2022-12-13     503

关键词:

Node进行后端开发,Vue进行前端页面的开发,实现了前后端的分离。在开发中使用Express框架可以快速地开发web应用程序。

1.安装node.js

下载对应版本的,网址:Download | Node.js

进行傻瓜式安装:最后点击install即可;

安装完成后出现完成界面,cmd去命令列界面测试,如图:出现版本号说明安装成功。

如果安装的路径不是默认路径,那么需要执行下面步骤,这样在之后进行一些包的安装时会保存到自定义位置而不是默认盘符。

首先在安装路径下新建两个文件夹【node_global】及【node_cache】,如下:

然后cmd执行命令

npm config set prefix "E:\\Program Files\\node_js\\node_global"
npm config set cache "E:\\Program Files\\node_js\\node_cache"

接着配置环境变量,系统变量里新建:

用户变量里的改为E:\\Program Files\\node_js\\node_global;

最后可以测试一下是否安装到了新的路径里:可以看到成功了

npm install express -g ,其中 -g 表示全局,不加会安装在当前路径C:/users/dell下

2.安装Visual Studio Code

下载:Documentation for Visual Studio Code

傻瓜式安装:

3.Visual Studio Code中搭建并运行NodeJS环境

首先安装express npm install express -g和express应用生成器 npm install express-generator -g;

然后打开终端,如图

使用express创建一个项目:express mytest

结果报错:express : 无法加载文件 E:\\Program Files\\node_js\\node_global\\express.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/ 
go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
+ express mytest
+ ~~~~~~~
    + CategoryInfo          : SecurityError: (:) [],PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

那就解决错误先:解决方法如图

这样就创建成功了。

这里应该是先新建一个文件夹来存放项目,然后进入指定位置。默认的话就放到c盘了。

测试

在终端执行如下代码

然后浏览器输入http://localhost:3000/

4.创建Vue项目

首先安装webpack、vue脚手架到全局:命令行执行 :npm install webpack -g,npm install vue vue-cli -g

接下来在终端里,进入项目存放文件夹cd 路径,vue init webpack 项目名,创建项目完成,如图;

接下来安装项目依赖,如图;

进入项目,运行项目;

浏览器输入http://localhost:8080进行访问,如下图。

github地址附上:https://vuejs-templates.github.io/webpack

node.js实战一文带你开发博客项目(api对接mysql)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接Node.js(... 查看详情

vue快速入门(从入门到实战)(idea版)一篇文章即可快速入门(可直接开发前后端分离项目)(代码片段)

Vue快速入门一、Vue快速入门1、认识Vue2、安装Node.js(1)进入Node.js官网[https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/)2、NPM二、工程案例1、创建工程2、安装Vue(1)初始化项目(2)安装Vue3、创建HTML文件࿰ 查看详情

node.js实战一文带你开发博客项目(mysql基础)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接Node.js(... 查看详情

nest+vue实战:工作计划管理系统

该项目是学习Nest.js框架所得,前端基于Vue.js+Vuex+VueRouter+ElementUI+SCSS,后端基于Node.js+TypeScript+Nest.js+MySQL+TypeORM。该项目是学习Nest.js框架所得,前端基于Vue.js+Vuex+VueRouter+ElementUI+SCSS,后端基于Node.js+TypeScript+Nest.js+MySQL+ 查看详情

node.js实战一文带你开发博客项目之登录(前置知识)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接Node.js(... 查看详情

vue-cli入门——项目搭建

 Vue-cli入门(一)——项目搭建 前言:Vue-cli是一款基于vue的项目脚手架工具,其集成了webpack环境和主要的依赖,对于我们的项目搭建、开发、打包、维护管理等都是非常的方便。主要内容:1、 node.js安装和配置环境2... 查看详情

《vue.js从入门到项目实战》的项目实战笔记

vue项目之启动项目前言:​​vue的基本知识​​重点讲述《vue.js从入门到项目实战》的第一章到第四章​​vue项目化​​重点讲述《vue.js从入门到项目实战》的第六章接下来就是对第八章的启动了。文章目录​​vue项目之启动项... 查看详情

node.js实战一文带你开发博客项目之koa2重构(实现session开发路由联调日志)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接... 查看详情

node.js实战一文带你开发博客项目之安全(sql注入xss攻击md5加密算法)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接... 查看详情

node.js实战一文带你开发博客项目之安全(sql注入xss攻击md5加密算法)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接... 查看详情

node.js实战一文带你开发博客项目之安全(sql注入xss攻击md5加密算法)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接... 查看详情

node.js实战一文带你开发博客项目之安全(sql注入xss攻击md5加密算法)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接... 查看详情

node.js实战一文带你开发博客项目之安全(sql注入xss攻击md5加密算法)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接... 查看详情

node.js实战一文带你开发博客项目之联调(导入htmlnginx反向代理cors解决跨域与前端联调)(代码片段)

...🍍前端面试宝典🍉Vue2🍋Vue3🍓Vue2&Vue3项目实战🥝Node.js🍒Three.js🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧Node.js系列文章目录内容参考链接... 查看详情

vue项目实战6后台项目的安装配置(代码片段)

接上篇《5、本地项目托管到码云(Gitee)》在前面的博文中,我们已经初始化完成了一个VUE的前端项目,因为是前后端分离的项目,必须要依赖于一个可以提供接口的后台项目。本篇单据介绍一下,如何配... 查看详情

老卫拆书009期:vue+node肩挑全栈!《node.js+express+mongodb+vue.js全栈开发实战》开箱

... 这本书介绍从技术原理到整合开发实战,以丰富的项目展现全栈开发的一个技巧。这本书主要是涉及vue.j+node.js架构的一些基础知识及核心技术。然后这里面也会有一些详细的项目演练,演示如何从零开始实现一个完... 查看详情

学习vue.js,node.js等技术不知道写什么东西?请推荐点稍微复杂点的入门项目。

https://www.zhihu.com/question/3826961711-28更新:最近把项目放到了vps上,虽然之后就没更新过。。但是还是无耻得放一下吧,哈哈。http://goh5.luoye.pw=========更新分割线========新鲜出炉,先放地址:GitHub-luoye-fe/goh5:visualh5edit个人开源H5CMS,... 查看详情

vue项目快速入门(代码片段)

文章目录说明下载Node.jsnpm配置项目构建安装vue-cli创建应用项目结构Vue项目的特点(webpack)使用webpackVue路由路由使用基本架构路由嵌套传递参数方式一方式二重定向路由模式&404处理钩子函数总结说明此部分为自行整理下载... 查看详情