macOS/Linux 上搞 SSM+Vue 的前后端分离项目

第一部分：项目搭建

（1）安装 Vue CLI

在安装之前，首先分别确认一下 node 和 npm 的版本，如果没有首先要安装好node（node包括npm），如下图：

确认后，直接安装Vue CLI，

结果安装中出现了错误：

失败肯定是有原因的，先查看一下版本，果然是2.x的版本：

根据官方文档的说明，对于1.x或者2.x的老版本，如果想要安装3.0以上的版本之前要卸载掉原来的，所以先卸载：

最后卸载竟然也失败了：

原来官方文档上面是对于Windows系统的，在macOS或者Linux上前面要加 sudo：

果然是这样！那么同样的道理，安装也是前面加一个 sudo。现在已经更新到4.x版本，不过我们还是想要安装3.x的版本，那么就去指定一个具体的版本号，如下：

最后验证一下是否安装成功，可以看到我们已经安装好 Vue CLI ，版本号为3.11.0 。

那么我们现在就可以正式地去创建Vue的目录了。

（2）创建 Vue 项目

首先从文件夹中打开终端，这里我用的是 iTerm 打开文件夹：

创建一个名字为"vuehr"的文件：

会问你是否需要淘宝镜像，选择No

我们手动选择一下特性：

选择这两个，选择/取消按“空格”键就可以，选择完毕后按下回车：

选择 No，指向json：

选择No，按下回车，项目就开始创建了：

创建完毕：

然后我们进入刚刚创建好的文件目录：

文件中也确实创建好了刚才的目录：

回到刚才的命令行窗口，启动一下项目：

启动完毕：

现在在浏览器中就可以访问刚才的端口地址：

现在就说明你的Vue项目创建成功了！

（3）在WebStorm中打开这个工程

找到文件后选中open：

打开后可以很直观地看到文件目录：

Node_modules：下载的依赖库

分别表示图标和唯一的一个html页面

然后配置一下项目的启动：

添加npm：

Name改为serve，Script变为serve：

启动项目：

光有vue是不够的，我们加入element ui库，用于页面美化：

安装一下：

去package.json看一下，存在element ui，说明安装成功：

在main.js中引入：

删除掉views和components中原有的，在views中新建一个页面Login：

如下图：

那么如果想要在页面中显示这个页面的内容即"login",我们要搞清楚整个执行的流程：

首先main.js中渲染app：

app中有一个router-view（跳转）：

从’/'处的路由，默认是走’Login’组建：

所以看到的就是这个东西：

vue现在还不能自动补全，有点难受，这样操作就可以了：

（4）安装axios

说明axios安装成功

（5）Vuex的安装

（6）一些bug或⚠️的

1、

原来的有问题的代码，具体问题是期待一个字符串但是获取到的是数字，所以强制转化一下

改完后

2、

注销用户后要清空store，即初始化

（7）安装font-awesome图表库

然后在main.js中导入：

笔记：

v-bind数据绑定简写为：，此时item.iconCls虽然在“ ”中，但是作为变量使用

v-on是点击触发事件的，简写为@

在method中被定义 的commandHandler

command + R

可以替换单词