SpringBoot-Vue项目搭建基础

SpringBoot-Vue项目搭建基础

1.安装部署环境

node.js+IDEA

node.js

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

2.新建文件夹

例如：springboot-vue-demo

3.文件目录地址处cmd命令

命令可看vue.js文档

https://v3.cn.vuejs.org/guide/installation.html#%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

执行以下命令：

node -v (查看node版本)

npm -v (查看npm版本)

npm install -g @vue/cli

(脚手架，下载慢的换cnpm，安装报错的原因是npm代理问题，使用淘宝镜像即可解决 ，加入以下代码

npm config set registry http://registry.npm.taobao.org )

vue create 项目名

4.选择界面

①进入以下界面：按下箭头至最后一栏features，回车

②进入下一个界面，选中需要的：空格键选中或取消

③choose version一栏回车，选择3.x,回车，依次选择.在浏览器输入地址出现vue界面成功

④IDEA打开，configurations添加npm，serve

5.项目成功搭建

打开package.json serve处添加 –open,以便于运行项目后自动打开页面

"scripts": {
  "serve": "vue-cli-service serve --open",
  "build": "vue-cli-service build"
},

6.组件库安装element-plus

详情见文档

https://element-plus.gitee.io/zh-CN/guide/quickstart.html#on-demand-import