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/[email protected]    //下載指定版本的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的項目搭建工作就完成了，下一結會講述前後端項目的基本配置 😪
下一章更新地址