1小时搞定SpringBoot+Vue3+小程序全栈开发,使用vite构建管理项目,前后端分离包含mysql数据库,网站后台,小程序前端

编程小石头 2024-07-31 16:03:02 阅读 57

正式开始之前呢,我们要先去下载以下几个开发软件

idea:用来开发Java和vue代码微信开发者工具:用来开发小程序代码node.js:用来管理vue

每个软件大家自行百度就行的。在接下来的学习中我会把一些需要注意的事项慢慢的讲给大家。

一,开发环境的配置

首先去下载idea,这个我就不再累述了。大家自行下载自行破解即可。

1-1,下载安装node

然后去下载node.js,这个大家直接百度node.js 然后去官网下载最新版本即可。

关于node.js的安装很傻瓜,下载后直接双击打开,不停的下一步即可。不过有一点注意事项要给大家说下。就是我们的安装目录,一定要记牢,后面创建项目时需要用到。这里的安装目录记得保持默认,不要自己设置,这样后面使用起来就很方便了。自己配置路径容易出错。

然后就是微信开发者工具,直接去微信小程序官网下载稳定版即可。

二,创建vue项目

我们先用idea来创建vue项目,因为vue学习可以直接在网页上看到小姑哦,是最直白的学习方式。比直接学习Java更有成就和收获感。

2-1,新建vue项目

我们创建项目时安装下图所示步骤即可。

点击新建项目

创建成功后如下图所示,就可以看到一个vue项目创建好了。

2-2,安装vue插件和vite插件

首先,IDEA必须安装Vue.js插件。

我们点击File—>Setting—>Plugins—>搜索vue,安装vue插件,安装后记得重启下idea。

还要确保已安装 Vite 插件

虽然 IntelliJ IDEA 本身可能已经内置了对 Vite 的支持,但检查并确保安装了最新的 Vite 插件有助于充分利用其功能:

打开 Settings 或 Preferences(取决于操作系统)。导航到 Plugins。

在搜索框中输入 “Vite”。

如果未找到或未安装,请搜索 “Vite Integration” 或类似名称的插件,点击安装并重启 IDE。

2-3,运行vue项目

通常第一次运行会保以下错误,因为vite没有安装

如果有右下角这样的提示框,直接点击如下箭头所示即可

点完就可以安装vite了。如果没有上面的弹窗,就要自己执行npm了。

如果我们没有这个弹窗,也提示没有安装vite,那我们就要使用npm命令行了。

我们这个时候就要自己执行npm命令行了。

入口如下:在我们idea左下角,如下图所示的标识。

然后输入npm install 点击回车键

这样就可以安装我们所需要的vite了。然后点击运行项目即可。

运行成功后我们就可以访问vue项目了。

我随便修改下代码。可以看到我们修改的代码,就可以在vue网站上实时的显示出来了。

到这里我们的vue项目就创建好了。

常见问题和命令行脚手架

我这里把一些常用的命令行放在这里,后面用到了回来找就行,不用特意记住。

npm常见命令行

npm run dev运行dev环境

npm install安装所需的依赖和插件等

npm config ls 查看npm配置

设置npm编译的路径(有时候默认的会出错,我们这里可以修改)

npm config set prefix "C:\Program Files\nodejs\node_modules\npm"



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。