springboot +vue (从零开始)-----一：vue创建项目

springboot +vue (从零开始)-----一：vue创建项目

公司人事系统

前后端分离项目.

前端技术栈

1. Vue
2. ElementUI
3. axios
4. vue-router
5. Vuex
6. WebSocket
7. vue-cli4

后端技术栈

1. Spring Boot
2. Spring Security
3. MyBatis
4. MySQL
5. Redis
6. RabbitMQ
7. Spring Cache
8. WebSocket

创建应用之前需要先安装 node.js 和 npm

https://nodejs.org/en/

下载最新的长期稳定版并安装。

按照提示点击下一步。

安装完成后，打开cmd 窗口 输入

node -v

我安装的比较早，现在已经是16.14.0了

同时 输入

npm -v

会显示对应版本，

如图说明你安装成功了。

执行 npm install 命令时，默认使用的是国外的下载源 ，可以通过如下代码配置为使用淘宝的镜像：

npm config set registry https://registry.npm.taobao.org

npm install -g vue-cli   # 只需要第一次安装时执行

如果以前安装过则不需要安装。

以上步骤完事，开始创建vue 项目：

打开即将安装项目的本地文件夹例如：

vue官网：https://cli.vuejs.org/zh/guide/installation.html

执行下面其中之一命令：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

​

回车后等待一会安装

vue --version

显示 @vue/cli 版本号 如上图，就是安装成功了。

我的之前已经安装完成 是4.1.2版本。

---

下面正式开始创建项目：

在你要创建项目的文件夹 按住shift+右键，选择 在此处打开 PowerShell窗口

出现如图

输入

vue create vuepm vuepm 是项目名

我这个图片中间部分是说有新版本可以更新。我这里先不更新，

default(babel,eslint) 这个是代码校验的。我选择第二个

创建项目时先选 Babel 和Router 其他的项目中用到在选。按空格键时选择活取消。移动是上下箭头。选择好后按回车。

不使用 history模式。

配置放在哪里。

上面询问是不是将此次配置作为模板，供以后使用，这里配置否。

询问用yarn 还是 npm 选择 npm

不要动，请等待安装完成

安装完成！

使用你习惯的 前端开发工具打开项目，我使用的是 webStorm

执行 npm run serve 启动项目

出现这个页面代表 项目启动成功！

如果有想使用 webstorm 和 idea 不会薅羊毛的 可以私信我。我给你包和步骤，你懂的。

​ 今天就到这里，下次更新，我们一起来制作登录页面。

免费的前端开发工具也可以使用 VSCode 它的启动已经在下图标出。VSCode 本人很少使用，其他功能需要自己研究。以后我就以webstorm 为教程了。