NoteBook开发日记一

一、Vue前端项目框架搭建1. 安装node.js、npm和全局vue-cli2.创建vue-cli脚手架项目 二、SpringBoot后端项目搭建

一、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的项目搭建工作就完成了，下一结会讲述前后端项目的基本配置 😪 下一章更新地址