- 使用Vue-ui构建前端项目
- 环境准备
- 安装Node.js
- 安装Vue.js
- 创建项目
- 使用idea构建SpringBoot后端项目
- 注意事项 ! !
温馨提示 ! ! 有关路径命令按照自己nodejs的安装目录,管理员权限下打开终端执行命令
-
下载nodejs,并配置环境变量
-
自己nodejs目录下新建两个目录"node_cache"、“node_global”
-
命令行输入npm config set prefix “D:applicationsstudynodejsnode_global”
-
命令行输入npm config set cache “D:applicationsstudynodejsnode_cache”
-
命令行输入npm config set registry=http://registry.npm.taobao.org 配置淘宝镜像
-
命令行输入npm config get registry 看镜像配好没有
-
命令行输入npm install npm -g
-
增加环境变量"NODE_PATH"内容是：“D:applicationsstudynodejsnode_globalnode_modules”,添加到环境变量
- 添加"D:nodejsnode_global"到环境变量中
- 命令行输入npm install -g @vue/cli
- 命令行输入[ vue ui ]启动vue-ui图形化界面创建项目
- 选择项目存放的的地址,点击创建新项目
- 输入项目名,取消初始化git,下一步
- 选择手动,下一步
- 选择Router和Vuex,下一步
- 创建项目
- 创建项目,不保存预览
- 稍等片刻
- 前端项目创建成功
使用idea导入vue前端项目即可
使用idea构建SpringBoot后端项目
- 后端就正常构建SpringBoot,只需提供接口即可,无任何前端代码
- 前端只需通过axios调用后端接口即可
注意事项 ! !
- idea中运行vue前端项目需要安装vue插件
- idea终端执行[ npm run serve ] 启动vue前端项目
- 前端和后端的端口号不要冲突
- 有的vue前端命令需要管理员权限
- 前端代码属性自动补全，需要下载对应插件，比如使用ElementUI，就需要下载element插件
