全棧的自我修養: 環境搭建

> Not all those who wander are lost.
> 彷徨者並非都迷失方向。
**Table of Contents** @[TOC] 當你看到這篇文章的時候，暫且認為你對如何做一個網站有了興趣. # 前言 本系列文章將從一個完整的專案是如何開發的過程進行編寫，期間會涉及前端、後端和一些運維的知識。 本篇題為 **`全棧的自我修養`** 將通過一個專案整合(`一前端專案對應三個後端專案`)，完成一個簡單的DEMO 其中前端專案使用 `Vue.js`,這個專案將會用到`vue`,`vuex`,`vue-route`,`axios`,`elementUI` 等 後端專案使用為 **3** 個專案，其中涉及`Spring Boot, Mybaits, Flask` 等 中間會穿插一些運維的知識如`常用linux命令, Jenkins` 等 也會介紹一些工具的使用 **計劃分為以下幾個專案:** 1. epimetheus-frontend 面向使用者的PC前端專案 2. epimetheus-management-frontend 面向運營人員的內部管理系統前端專案 3. epimetheus-miniapp-frontend 小程式前端專案 4. epimetheus-backend 對應後端 5. epimetheus-management-backend 對應後端 6. epimetheus-miniapp-backend 對應後端 # 環境準備 作為第一篇，這裡主要介紹`Vue`環境的準備工作. ## nodejs > 根據實際情況下載對應版本即可 官網地址：https://nodejs.org/zh-cn/download/  安裝完成後，在控制檯中輸入：`node -v` 即可得知安裝的`node`版本,使用 `npm -v` 檢視 `npm` 版本 ```s node -v v14.4.0 npm -v 6.14.5 ``` ## vue-cli 如果上面已經驗證正確安裝了 `node` 和 `npm`, 則使用 `npm install -g vue-cli` 完成 `vue-cli` 的安裝 # 建立 Vue 專案 給專案起名字一直是困擾我的第一個難題，本次將專案暫命名為 `epimetheus-frontend` 使用 `vue-cli` 命令生成專案，命令格式為：`vue init webpack Vue-Project`, 這裡為 `vue init webpack epimetheus-frontend`, 1. 首先找個存在程式碼的資料夾，這裡先建立一個 `epimetheus` 資料夾 2. 進入 `epimetheus` 資料夾 3. 執行 `vue init webpack epimetheus-frontend` 根據提示填寫專案資訊： ``` ? Project name epimetheus-frontend ? Project description A Vue.js project ? Author yunan.zhang ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) yarn ``` 注意上面選擇了 `yarn` 而不是 `npm`, 這裡對於使用 npm 還是 yarn, 並沒有要求，兩個的功能都能使用，只是命令略有不同而已 ## yarn和npm 命令 對照表 npm | yarn :---|:--- npm install | yarn install (N/A) |yarn install --flat (N/A) |yarn install --har (N/A) |yarn install --no-lockfile (N/A) |yarn install --pure-lockfile npm install [package] | (N/A) npm install --save [package] |yarn add [package] npm install --save-dev [package] | yarn add [package] [--dev/-D] (N/A) |yarn add [package] [--peer/-P] npm install --save-optional [package] |yarn add [package] [--optional/-O] npm install --save-exact [package] |yarn add [package] [--exact/-E] (N/A) |yarn add [package] [--tilde/-T] npm install --global [package]| yarn global add [package] npm rebuild |yarn install --force npm uninstall [package] |(N/A) npm uninstall --save [package] |yarn remove [package] npm uninstall --save-dev [package]| yarn remove [package] npm uninstall --save-optional [package] |yarn remove [package] npm cache clean | yarn cache clean rm -rf node_modules && npm install | yarn upgrade 安裝過程可能有點慢，安裝完成後,如下 ``` # Project initialization finished! # ======================== To get started: cd epimetheus-frontend npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack ``` 這時，我們可以進入 `epimetheus-frontend`, 並在控制檯執行 `npm run dev`,即可開始執行我們的專案 ```s epimetheus$ cd epimetheus-frontend epimetheus/epimetheus-frontend$ npm run dev > [email protected] dev /Users/zhangyunan/project/scoding/epimetheus/epimetheus-frontend > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 13% building modules 29/31 modules 2 active ...theus/epimetheus-frontend/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 95% emitting DONE Compiled successfully in 2886ms 下午1:49:57 I Your application is running here: http://localhost:8080 ``` 從控制檯資訊可以看出，訪問路徑為：`http://localhost:8080`  這樣準備工作基本就完成了 # 專案結構 這裡使用 `VSCode` 進行開發，你也可以使用 `Webstorm`, 兩個都可以，在使用`VSCode` 的時候，可以直接在終端使用 `code` 命令在VSCode開啟執行檔案或者目錄， 例如： ```sh epimetheus/epimetheus-frontend$ code . ``` 則會將當前資料夾 `epimetheus/epimetheus-frontend` 在 `VSCode` 中開啟， > 如何你安裝 `VSCode` 後，使用 `code` 命令時，提示 not fund, 可以通過 檢視 -> 命令面板 輸入 `code` 進行安裝  這裡使用了 `VSCode`,開啟專案後如圖：  ``` ├── build/ # webpack config files │ └── ... ├── config/ │ ├── index.js # main project config │ └── ... ├── src/ │ ├── main.js # app entry file │ ├── App.vue # main app component │ ├── components/ # ui components │ │ └── ... │ └── assets/ # module assets (processed by webpack) │ └── ... ├── static/ # pure static assets (directly copied) ├── .babelrc # babel config ├── .editorconfig # indentation, spaces/tabs and similar settings for your editor ├── .eslintrc.js # eslint config ├── .eslintignore # eslint ignore rules ├── .gitignore # sensible defaults for gitignore ├── .postcssrc.js # postcss config ├── index.html # index.html template ├── package.json # build scripts and dependencies └── README.md # Default README file ``` 其中，我們主要修改 src 下檔案，上面提到專案訪問埠為：`8080`, 為了防止與其他專案造成衝突，這裡將埠改為：`7000`, 具體配置在 `config/index.js` 檔案中  # 使用 elementUI 這裡使用了 官網：http://element-cn.eleme.io/#/zh-CN/component/installation 這裡我們進入剛才的專案目錄：並執行 `yarn add element-ui` ```s epimetheus/epimetheus-frontend$ yarn add element-ui yarn add v1.15.2 [1/5]