搭建通用開發(fā)環(huán)境

項(xiàng)目類型

后臺開發(fā)環(huán)境

一、下載開發(fā)工具

系統(tǒng)位數(shù)

我的電腦 ?鼠標(biāo)右鍵 ?屬性

注意

• 32位系統(tǒng)不可以安裝64位軟件、64位系統(tǒng)可以兼容安裝32位軟件。

• 部分軟件自動識別32位和64位。

• 最好統(tǒng)一安裝相同位數(shù)的工具軟件

• 不要安裝到包含中文路徑目錄下

• 系統(tǒng)用戶名（中文） - 導(dǎo)致環(huán)境安裝無法正常工作 - 新建英文系統(tǒng)用戶名

網(wǎng)盤下載

• 鏈接：https://pan.baidu.com/s/1Gpyd4ialv4hIqwH-Kgobrw

• 提取碼：3qwc

二、工具安裝及設(shè)置

2.1 安裝Java JDK

安裝JDK完成后設(shè)置環(huán)境變量：我的電腦—>屬性—>高級系統(tǒng)設(shè)置—>高級—>環(huán)境變量—>系統(tǒng)變量

注意：根據(jù)安裝路徑C:Program FilesJavajdk1.8.0_241 ? ?設(shè)置 JAVA_HOME 環(huán)境變量。

注意：

• 不要設(shè)置在用戶變量

• 變量名與變量值不要包含空格和中文符號

• 編輯變量值盡量增加在最前面以分號結(jié)束，放在最后面有可能導(dǎo)致變量無法生效

• 有些時候需要重啟系統(tǒng),環(huán)境變量才生效

• MySQL、Maven、IDEA、Eclipse等等開發(fā)工具需要先安裝Java JDK才可以正常安裝使用

• 如果環(huán)境變量還是無法生效請重新設(shè)置一遍。

檢驗(yàn)：

運(yùn)行/搜索—>cmd—>java ?-version

注意：見到版本信息即配置成功？

• 不一定，例如看到版本信息，但是依賴jdk環(huán)境的tomcat服務(wù)啟動時發(fā)生閃退，這也是JDK環(huán)境變量沒有設(shè)置好導(dǎo)致的。

2.2 Maven安裝

盡量解壓Maven到非系統(tǒng)盤[避免重裝系統(tǒng)導(dǎo)致重新下載所有的依賴包 ] ?(—_—!!!）。

設(shè)置環(huán)境變量：我的電腦—>屬性—>高級系統(tǒng)設(shè)置—>高級—>環(huán)境變量—>系統(tǒng)變量

假設(shè)Maven安裝路徑 E:softapache-maven-3.6.3

檢驗(yàn)：運(yùn)行—>cmd—>mvn -v

• 見版本信息即成功

Maven配置

（例如安裝路徑位為：E:softapache-maven-3.6.3confsettings.xml）

<localRepository>${env.MAVEN_HOME}/repository</localRepository>

<mirrors>
??<mirror>
????<id>alimaven</id>
????<name>aliyun?maven</name>
????<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
????<mirrorOf>central</mirrorOf>
??</mirror>
</mirrors>

<profile>
????<id>jdk-1.8</id>
????<activation>
????????<activeByDefault>true</activeBysDefault>
????????<jdk>1.8</jdk>
????</activation>
????<properties>
????????<maven.compiler.source>1.8</maven.compiler.source>
????????<maven.compiler.target>1.8</maven.compiler.target>
????????<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
????</properties>
</profile>

后續(xù)還需要在開發(fā)工具Eclipse或IDEA中配置Maven。

2.3 IntelliJ IDEA 安裝和設(shè)置

• 安裝請看官方文檔或者搜索某度即可

  
  

IntelliJ IDEA 常用設(shè)置

Platform Settings SDKs設(shè)置

Project 和 Modules SDK設(shè)置(可選)

注意：需要新建項(xiàng)目和Modules以后設(shè)置。

IntelliJ IDEA JAVA 編譯設(shè)置(可選)

注意：需要新建項(xiàng)目和Modules以后設(shè)置。

IntelliJ IDEA Maven設(shè)置 ?

IntelliJ IDEA 安裝Spring Assistant插件

安裝Spring Assistant插件為IDEA新建項(xiàng)目的時候增加spring initializr選項(xiàng)，用于創(chuàng)建spring boot項(xiàng)目：

2.4 Git安裝

相對簡單，此處省略。

2.5 有可能遇到的問題：

IDEA 解決代碼提示功能消失

• 解決方案（目前共有三種情況）：

• 情況一 勾選了"power save mode"（省電模式）。在省電模式下，就沒有代碼提示了。解決方法是，關(guān)閉省電模式，重啟intellij idea。

• 情況二 緩存問題。解決方法是，刪除緩存 file -> invalidate caches，根據(jù)提示重啟intellij idea。

• 情況三 配色問題。解決方法是，切換到其他配色，比如內(nèi)置配色darchla。

IDEA pom文件自動提示失效

數(shù)據(jù)庫開發(fā)環(huán)境

一、MySQL安裝

1.1 下載 MySQL

1.下載社區(qū)版：MySQL Community Downloads

2.選擇系統(tǒng)、版本、在線完整安裝包進(jìn)行下載，跳轉(zhuǎn)后不需要登陸，直接選擇No thanks, just start my download.立即開始下載。

1. MySQL官方文檔

   
   

1.2 安裝 MySQL

1.選擇安裝類型

2.自動檢測按照需要的環(huán)境

3.同意在線安裝依賴的環(huán)境

4.安裝列表-點(diǎn)擊Execute進(jìn)行按照

5.安裝進(jìn)行中...

6.安裝完成后進(jìn)行下一步 Next...

7.安裝完成后進(jìn)行產(chǎn)品配置 Next...

8.產(chǎn)品配置 獨(dú)立的MySQL Server和InnonDB集群

9.設(shè)置網(wǎng)絡(luò)類型（TCP/IP、Port等）

10.配置類型（研發(fā)計(jì)算機(jī)、服務(wù)器計(jì)算機(jī)、專用計(jì)算機(jī)）

11.設(shè)置root管理員賬號密碼（開發(fā)調(diào)試可以設(shè)置簡單密碼，部署一定要設(shè)置復(fù)雜密碼）

12.Windows服務(wù)配置

13.查看Windows服務(wù)(啟動、停止、暫停、恢復(fù))

我的電腦 -> 管理 ?-> 服務(wù)和應(yīng)用程序 ?-> ?服務(wù) ?-> MySQL80

14.應(yīng)用配置-Execute

15.應(yīng)用配置-Finish

16.鏈接服務(wù)端測試(輸入密碼點(diǎn)擊Check進(jìn)行鏈接測試)

17.安裝完成

18.安裝完成后的MySQL軟件列表

二、redis、mongodb安裝

安裝比較簡單，此處省略，后續(xù)項(xiàng)目中展示。

前端開發(fā)環(huán)境

一、下載開發(fā)工具

注意:64位系統(tǒng)可以安裝64位和32位的程序，32位系統(tǒng)只可以安裝32位的程序。建議64位系統(tǒng)安裝統(tǒng)一的環(huán)境。

注意:有些工具安裝后會自動配置環(huán)境變量，但是必須重啟系統(tǒng)才生效。

二、安裝及配置

1. 安裝 Node.js

1.1 安裝成功后檢驗(yàn)

開始菜單 ? 運(yùn)行 ? 輸入“cmd” ?? 命令提示符窗口? 輸入：

$?node?--version

運(yùn)行結(jié)果：

出現(xiàn)版本號證明安裝環(huán)境成功。

注意：Node.js安裝完成后將自動增加路徑系統(tǒng)PATH環(huán)境變量，如果沒有需要手動添加。

環(huán)境變量的配置有時候需要重啟系統(tǒng)才會生效!

1.2 使用淘寶NPM鏡像CNPM

Node.js安裝完后后自帶npm，國內(nèi)直接使用 npm 的官方鏡像是非常慢的。

所以推薦使用淘寶NPM官網(wǎng)定制的cnpm命令行工具代替默認(rèn)的 npm:開始菜單 ? 運(yùn)行 ? 輸入cmd ?命令提示符窗口? 輸入：

$?npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org

運(yùn)行結(jié)果：

這樣就可以使用 cnpm 命令來安裝模塊了：

$?cnpm?install?[name]

2.安裝 Yarn

2.1 安裝成功檢驗(yàn)

注意：Node.js安裝完成后再安裝yarn，并且yarn安裝完成后需要重啟系統(tǒng)，命令才會生效。

命令提示符窗口? 輸入：

$?yarn?--version

運(yùn)行結(jié)果：

2.2 VSCode使用cnpm/yarn報錯

在vscode中使用cnpm/yarn報錯："因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本。"原因是因?yàn)镻owerShell執(zhí)行策略問題。

解決方法：

以管理員身份運(yùn)行VSCode;

命令提示符窗口? 輸入：

$?get-ExecutionPolicy

顯示Restricted，表示禁止?fàn)顟B(tài);

啟用:

$?set-ExecutionPolicy?RemoteSigned
$?get-ExecutionPolicy

顯示RemoteSigned，表示啟用狀態(tài);

運(yùn)行結(jié)果：

3.安裝 Google Chrome

安裝比較簡單，此處省略。

4.安裝 vue-devtools

在使用 Vue 時， Vue Devtools允許你在一個更友好的界面中審查和調(diào)試 Vue 應(yīng)用。在開發(fā)環(huán)境下不要使用vue.js的 生產(chǎn)版本（即壓縮版本，刪除了警告），只有開發(fā)版本包含警告和調(diào)試模式。

官方提供在線安裝和手動安裝兩種安裝方式：

4.1 在線安裝

1. 打開Chrome瀏覽器，地址欄輸入chrome://extensions進(jìn)入擴(kuò)展程序頁面 ，并開啟開發(fā)者模式

1. 下載谷歌訪問助手，解壓后到 擴(kuò)展程序頁面?加載已解壓的擴(kuò)展程序。

2. 進(jìn)入chrome 網(wǎng)上應(yīng)用店并搜索vue devtools，注意提供方為官方網(wǎng)址。找到對應(yīng)插件后 添加到Chrome

3. 點(diǎn)擊添加擴(kuò)展程序

注意版本問題：推薦5.3.3，6.0.0還不穩(wěn)定。




4.2 ?手動安裝

僅當(dāng)您希望自己從源代碼構(gòu)建擴(kuò)展以獲取尚未發(fā)布的功能時，才需要這樣做。

確保您已經(jīng)安裝Node.js和Yarn，并重啟動系統(tǒng)。

1. 克隆此倉庫，并解壓到非中文路徑下。

2. cmd命令行窗口進(jìn)入解壓路徑，并執(zhí)行yarn install安裝依賴

   例如解壓路徑為 E:?ue-devtools-dev ，則：

   命令提示符窗口? 輸入：

   $?cd?/d?E:?ue-devtools-dev
   $?yarn?install

   運(yùn)行結(jié)果：

3. 執(zhí)行yarn run build編譯插件

   
   

4. 打開Chrome瀏覽器，地址欄輸入chrome://extensions進(jìn)入擴(kuò)展程序頁面

5. 開啟“開發(fā)者模式”

6. 點(diǎn)擊“加載解壓后的擴(kuò)展程序”，然后選擇E:?ue-devtools-devpackagesshell-chrome。

   或者直接把shell-chrome文件夾拖進(jìn)擴(kuò)展程序頁面。注意：安裝成功后請不要刪除該文件。

4.3 安裝成功

1.新建一個html文檔，在網(wǎng)頁文檔中引入vue.js開發(fā)版本


<script?src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.開發(fā)版本會點(diǎn)亮地址欄旁Vue圖標(biāo),按F12查看Vue調(diào)試模式界面（一般在最后面可拖拽到前面）：




5.安裝 Visual Studio Code、Typora

安裝比較簡單，此處省略。

想要畢設(shè)項(xiàng)目源碼+文檔+PPT+指導(dǎo)手冊的同學(xué)找Jessica老師（wx:sxbang6v6)咨詢。

PS：最后感謝粉絲們的支持，如果覺得分享還不錯的話，歡迎大家隨手點(diǎn)贊、分享。