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

Not all those who wander are lost.

彷徨者並非都迷失方向。

Table of Contents

@ 目錄

• 前言
• 環境準備
  • nodejs
  • vue-cli
• 建立 Vue 專案
  • yarn和npm 命令 對照表
• 專案結構
• 使用 elementUI
• 配置 Vuex
• 配置 axios
• github
• 參考

當你看到這篇文章的時候，暫且認為你對如何做一個網站有了興趣.

前言

本系列文章將從一個完整的專案是如何開發的過程進行編寫，期間會涉及前端、後端和一些運維的知識。

本篇題為 全棧的自我修養 將通過一個專案整合(一前端專案對應三個後端專案)，完成一個簡單的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 版本

node -v

v14.4.0

npm -v

6.14.5

vue-cli

如果上面已經驗證正確安裝了 node 和 npm, 則使用 npm install -g 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 <[email protected]>

? 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 命令 對照表

安裝過程可能有點慢，安裝完成後,如下

# 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,即可開始執行我們的專案

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開啟執行檔案或者目錄，

例如：

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

epimetheus/epimetheus-frontend$ yarn add element-ui

yarn add v1.15.2

[1/5]   Validating package.json...

[2/5]   Resolving packages...

[3/5]   Fetching packages...

[4/5]   Linking dependencies...

[5/5]   Building fresh packages...

success Saved lockfile.

success Saved 6 new dependencies.

info Direct dependencies

└─ element-[email protected]

info All dependencies

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

└─ [email protected]

  Done in 8.36s.

配置

在 main.js 中寫入以下內容：

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

new Vue({

  el: '#app',

  render: h => h(App)

});

配置完成後的 main.js 檔案為：

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  render: h => h(App),

  components: { App },

  template: '<App/>'

})

配置 Vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。

也就是通過 Vuex ，各個元件可以實時的共享狀態

官網：https://vuex.vuejs.org/zh-cn/intro.html

安裝

首先我們先安裝它 yarn add vuex

epimetheus/epimetheus-frontend$ yarn add vuex

yarn add v1.15.2

[1/5]   Validating package.json...

[2/5]   Resolving packages...

[3/5]   Fetching packages...

[4/5]   Linking dependencies...

[5/5]   Building fresh packages...

success Saved lockfile.

success Saved 1 new dependency.

info Direct dependencies

└─ [email protected]

info All dependencies

└─ [email protected]

  Done in 5.33s.

配置

首先在 src 下建立 store 資料夾並在其下建立 store.js 檔案

即 src/store/store.js, 同時建立 src/assets/util/cookie.js

src/assets/utils/cookie.js 檔案內容

該檔案主要用於操作cookie

let cookie = {

  setCookie (cname, value, expiredays) {

    let exdate = new Date()

    exdate.setTime(exdate.getTime() + expiredays)

    exdate.setDate(exdate.getDate() + expiredays)　

    document.cookie = cname + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())

  },

  getCookie (name) {

    let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')

    let arr = document.cookie.match(reg)

    if (arr) {

      return (arr[2])

    } else {

      return null

    }

  },

  delCookie (name) {

    let exp = new Date()

    exp.setTime(exp.getTime() - 1)

    let cval = cookie.getCookie(name)

    if (cval != null) {

      document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'

    }

  }

}

export default cookie

src/store/store.js 內容

這裡定義了 userInfo 用來儲存當前的使用者資訊，包含一個 name 和 token

import Vue from 'vue'

import Vuex from 'vuex'

import cookie from '../assets/util/cookie'

Vue.use(Vuex)

const userInfo = {

  name: cookie.getCookie('name') || '',

  token: cookie.getCookie('token') || ''

}

const store = new Vuex.Store({

  state: {

    userInfo: userInfo

  },

  mutations: {

    setUserInfo (state) {

      state.userInfo = {

        name: cookie.getCookie('name'),

        token: cookie.getCookie('token'),

      }

    }

  }

})

export default store

在 main.js 新增Vuex配置，

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

import router from './router'

import store from './store/store'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  store,

  render: h => h(App),

  components: { App },

  template: '<App/>'

})

配置 axios

Promise based HTTP client for the browser and node.js

axios 是一個基於 Promise 的 http client, 通過他，我們向後端進行資料互動，如果你不喜歡它，可以使用jquery的 ajax 代替.

我們來安裝一下

epimetheus/epimetheus-frontend$ yarn add axios

yarn add v1.15.2

[1/5]   Validating package.json...

[2/5]   Resolving packages...

[3/5]   Fetching packages...

[4/5]   Linking dependencies...

[5/5]   Building fresh packages...

success Saved lockfile.

success Saved 2 new dependencies.

info Direct dependencies

└─ [email protected]

info All dependencies

├─ [email protected]

└─ [email protected]

  Done in 4.39s

修改 main.js 檔案

加入

import './axios_config/'

import Axios from 'axios'

Vue.prototype.$http = Axios

github

https://github.com/zhangyunan1994/epimetheus-frontend

參考

• nodejs : https://nodejs.org
• vue : https://vuejs.org/
• vuex : https://vuex.vuejs.org/
• vue-route : https://router.vuejs.org/
• elementUI : http://element-cn.eleme.io/#/zh-CN/component/installation
• axios : https://github.com/axios/axios