网站后台是怎样制作的,wordpress侧边栏显头像,wordpress浮动窗口,wordpress建电影网站1. 使用到的技术和工具 springboot vue项目的搭建 工具 idea#xff0c;mavennodejs
2. 后端框架搭建
利用maven创建springboot项目
3. 前端项目搭建
1. 安装相关工具
nodejs#xff1a; 一个开源、跨平台的 JavaScript 运行时环境#xff0c;可以理解成java当中需要…1. 使用到的技术和工具 springboot vue项目的搭建 工具 ideamavennodejs
2. 后端框架搭建
利用maven创建springboot项目
3. 前端项目搭建
1. 安装相关工具
nodejs 一个开源、跨平台的 JavaScript 运行时环境可以理解成java当中需要安装的jdk官网https://nodejs.org/en npm JavaScript依赖包管理工具全世界都可以用它来共享javascript包负责前端项目的打包插件下载等可以理解成java中的maven官网https://www.npmjs.com/ vite 快速构建前端Vue项目的脚手架可以理解为开发Spring Boot的Spring Initializr快速构建工具官网https://cn.vitejs.dev/
1. 安装node.js 下载https://nodejs.org/en/download 安装解压即完成安装(.zip版本) 在安装目录下node.exe所在的目录创建以下俩个文件夹 node_global 依赖库node_cache 缓存 在安装目录下cmd进入dos窗口执行 npm config set prefix “E:\worktool\node\node_global” 【这里的路径要改为自己的文件路径】 npm config set cache “E:\worktool\node\node_cache” 【这里的路径要改为自己的文件路径】 可以查一下看看有没有设置成功 npm config get prefixnpm config get cache 配置环境变量 在path中添加 nodejs的安装路径 和 node_global文件夹所在的路径。如 E:\worktool\nodeE:\worktool\node\node_global 在任意目录打开dos窗口进行测试 node -vnpm -v
2. 安装 npm 新版的Node.js已经自带npm安装Node.js时就已经安装npm所以不需要再安装npm只需要配置一下npm仓库源即可 dos下查看目前的npm仓库源位置 npm config get registry可以更换npm的仓库源提高下载速度 //设置淘宝源
npm config set registry https://registry.npmmirror.com/安装一个模块js依赖库测试一下看看 npm install axios -g #其中-g是全局安装的意思全局安装就会把axios模块安装到前面创建的node_global目录下如果不加-g就会安装到了当前执行命令所在的目录下C:\Users\Administrator
3. 安装vite vite是vue.js的脚手架用于自动生成vue.js的项目模板项目基础骨架。之前比较流行的是 Vue-cli 创建vue工程 npm create vitelatest npm是Node Package Manager的缩写是Node.js的一个包管理工具。create是一个npm的命令用于创建新的npm包。vite是一个基于Vue.js的静态网站生成器latest表示使用最新版本的vite即npm create vitelatest为创建一个使用最新版本vite的npm包 VUE 报错 npm ERR! EPERM: operation not permitted, open ‘路径‘ erron -4048 原因我们在安装node.js的时候将 node_cache、node_global 文件夹查询配置到了其他盘下面导致无权限访问解决方案在本地将这个文件夹赋予权限即可
2. 搭建前端项目 右击刚才创建好的后端项目点击open in选项点击explorer来到该项目在磁盘中的真实路径 在此处输入cmd通过命令 npm create vitelatest 创建前端工程 输入前端项目的名称 选择该项目使用的框架这里我使用的是vue 选择该项目使用的编程语言js 至此前端项目搭建完成
4. vue项目工程结构
上面我们通过了vite脚手架创建了vue工程以下是该工程的结构
1、node_modules/ 项目依赖的各种js依赖包
2、public/ 公共的静态文件一个网站图标
3、src/ 源代码我们前端写的源代码都会在这个文件夹下
4、gitignore 提交git时忽略哪些文件
5、index.html 项目的首页访问入口文件
6、package.json 整个项目对js依赖库的配置还包括了启动、构建项目命令等类似maven的pom.xml
7、package-lock.json 锁定各个js依赖包的来源和版本
8、README.md 项目的使用帮助文档
9、vite.config.js vite的配置文件
5. 启动Vue项目工程
在idea中点击package.json里面的绿色箭头运行。
命令等类似maven的pom.xml
7、package-lock.json 锁定各个js依赖包的来源和版本
8、README.md 项目的使用帮助文档
9、vite.config.js vite的配置文件
5. 启动Vue项目工程
在idea中点击package.json里面的绿色箭头运行。
需要在idea中进行配置settings 》 搜索 ”node.js“ 配置 node interpreter的值为 node.exe的安装路径
