springboot+vue前后端分离项目-vue项目搭建

xiexieyc / 2024-06-10 / 原文

1.vue.js官网学习vue的语法等知识,有html、css、JavaScript基础。

vue官网:https://cn.vuejs.org

2.下载node.js,使用其中的npm包管理工具构建vue项目,npm管理依赖,类似maven,node-v查看版本,建议14以上

nodejs官网:https://nodejs.org/zh-cn/

3.cmd到项目路径下,npm -v检查npm版本,npm install -g @vue/cli,安装vue脚手架,vue create创建vue项目

 配置选择

 选择如下四个,取消Linter

 vue版本选3.x

 使用history mode,输入y

选择如下

 保存配置,第一次可以y,已保存过可以n

 创建成功日志

 运行项目

 启动成功日志

 登录页面测试

 ctrl+c,y,关闭运行的项目

 4.vue项目开发使用idea,也可使用vscode,看习惯,vue项目文件夹拖到idea里启动即可,配置启动项

配置保存后,点运行,可快速启动项目

 启动后自动跳转到页面配置

 5.主要文件结构介绍,index.html入口html文件包括了根元素,assets静态资源,components组件,router路由,store页面变量,views视图(页面级组件),App.vue根组件,main.js项目入口文件实例化Vue应用,package.json依赖配置文件,node_modules依赖的第三方库