NoteBook开发日记一（项目框架搭建篇SpringBoot、vue、vue-cli）

一、Vue前端项目框架搭建

1. 安装node.js、npm和全局vue-cli

到官网下载node.js的LTS环境（官网链接）

下载之后是一个msi文件，打开之后选择好安装文件夹，一直点击进行安装，此时打开cmd输入node -v可以查看到node的版本信息。
在安装目录下新建node_cache和node_global文件夹，用于放npm包下载管理器的缓存和全局环境，输入下面两条命令，配置两个文件夹：

npm config set prefix "node_global文件夹所在路径"
npm config set cache "node_cache文件夹所在路径"

设置npm下载包的国内淘宝地址镜像，加快下载速度：

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

在node_global目录下新建node_module文件夹，并且新建NODE_PATH环境变量：

安装全局vue-cli脚手架并且cmd测试vue版本：

npm install vue-cli -g
npm install -g @vue/cli@3.10.0    //下载指定版本的vue-cli 

2.创建vue-cli脚手架项目

使用vue create 项目名称 来创建项目，如果提醒vue不是内部或外部的命令，可以到系统环境Path中添加vue.cmd所在的文件路径：

上图第一行配置了node以及npm的系统变量，全局就都可以使用npm命令；
第二行配置了安装的全局的包的命令的系统变量例如vue和yarn。
使用vue create命令后，会让你选择项目所需要的模块，一般选以下模块：

Babel、Router、css Pro-processors、Linter/Formater

npm run serve测试项目

二、SpringBoot后端项目搭建

建SpringBoot项目的时候选择依赖：Lombok、SpringWeb、MyBatis、Mysql Driver
在pom.xml中另外加入热部署devtools、redis、druid连接池相关的依赖：

<!--devtools热部署-->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-devtools</artifactId>
	<optional>true</optional>
	<scope>true</scope>
</dependency>
<!--redis相关-->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter->artifactId>
</dependency>
<!--druid连接池-->
<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>druid-spring-boot-starter</artifactId>
	<version>1.1.10</version>
</dependency>
另添加plugin可以帮助在maven打包的时候跳过test里面的错误：
<plugin>
	<groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-surefire-plugin</artifactId>
	<configuration>
	<testFailureIgnore>true</testFailureIgnore> </configuration>
</plugin>

到此Vue和SpringBoot的项目搭建工作就完成了，下一结会讲述前后端项目的基本配置 😪
下一章更新地址