人生难得几回搏,此时不搏待何时?
距离上一篇博客已经过去一个多月,在这一个多一月中,做了啥呢,写了个前后端分离的博客项目。接下来我们会先通过对Vue的学习,慢慢的引入到该项目中来。
一、目录
1、技术栈介绍
2、Vue介绍,使用Vue的Vue.cli脚手架直接搭建
3、简单介绍前端axios向异步向后端发送请求
4、使用Element UI 优化前端页面
5、前端路由和登录拦截
6、其他一些模块的实现
**
二、技术栈介绍
1.前端技术栈
1.Vue.js
2.ElementUI
3.axios
2.后端技术栈
1.Spring Boot
2.Apache Shiro
3.Apache Log4j2
4.Mybatis-plus
3.数据库
1.MySQL
2.Redis
在开发过程中还会不断用到一些新的技术,有必要的我会增添上去。
三、Vue介绍
1、如果有小伙伴没学习过Vue建议先去自学一下哈.
Vue中文文档
2、安装Vue.cli
因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 Node.js,首页即可下载。
图中左边是长期支持版本,右边是当前版本,下载哪个都行,我一般选择长期支持版本。
下载完成后运行安装包,一路下一步就行。然后在 cmd 中输入 node -v,检查是否安装成功。
如图,出现了版本号(根据下载时候的版本确定),说明已经安装成功了。同时,npm 包也已经安装成功,可以输入 npm -v 查看版本号(输入 npm -g install npm ,将 npm 更新至最新版本。)
至于cnpm,我自己比较习惯用npm,就没去试过cnpm了。cnpm 不要与 npm 混合使用,一个项目用 cnpm 就从头用到底,不要中途敲错命令,否则就会出现混乱。不过万一遇到这种情况也不用慌,把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了,只是比较浪费时间。
之后,使用 npm install -g vue-cli 安装脚手架。
注意此种方式安装的是 2.x 版本的 Vue CLI,最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目,并加入了项目健康监控的内容,但使用新版本创建的项目依赖与这个教程不太相符,折腾起来比较麻烦。
3、构建前端项目
直接使用命令行构建项目。首先,进入到我们的工作文件夹中,我在 D 盘新建了一个叫 workspace 的文件夹,大家可以自行选择位置。
然后执行命令 vue init webpack wj-vue,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 wj-vue 是我们的项目名称(White Jotter),大家也可以起别的名字。
在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改,比如下图问我项目名称是不是 wj-vue,直接回车确认就行。
这里还会问是否安装 vue-router,一定要选是,也就是回车或按 Y,vue-router 是我们构建单页面应用的关键。
还有是否使用 es-lint,这玩意儿挺烦的,但为了代码质量先将就一下吧。
接下来等待项目构建完成就 OK 了。
下载成功后,可以去安装目录查看
接下来,进入到我们的项目文件夹里(cd D:\workspace\wj-vue),执行npm run dev
项目构建成功,这一步如果报错,可能是未能加载项目所需的依赖包,即 node_modules 里的内容,需要在该文件夹执行 npm install ,再执行 npm run dev
访问 http://localhost:8080,查看网页 demo,大工告成!
四、使用IDEA创建Vue项目
如果你新创建的项目中,没有出现如下Vue小绿标
你就必须得手动去配置,如下图所示,先点击右边加号
前面基础工作,我就介绍得这,目的是为了,不让篇幅显得太过冗余.