一、開發前準備

1.node環境搭建

去node.js官網下載長期支持版本的node，采用全局安裝，安裝方式自行百度

網址：https://nodejs.org/zh-cn/

安裝后在cmd命令行運行如下代碼，若返回版本信息則說明安裝成功 

2.GitHub創建-碼云

整個項目通過碼云來托管代碼，用到的工具是Git。

2.1.創建碼云賬號

進入碼云官網，注冊一個碼云賬號

網址：https://gitee.com/

2.2.創建一個git倉庫

創建一個名為jd-finance的項目倉庫，注意：最新版本的vue不支持創建大寫名稱的項目：

2.3.配置本地git環境

去git官網下載git并安裝，安裝方式自行百度

網址：https://git-scm.com/

安裝后運行git的命令行工具Git Bash，運行如下命令檢測版本信息：

 配置git用戶名稱和郵箱，這樣做很重要，因為每一個 Git 的提交都會使用這些信息，并且它會寫入到你的每一次提交中，不可更改：

 2.4.生成本地ssh公鑰

git bash運行以下命令，生成本地ssh公鑰，雙引號內為郵箱：

 git bash運行以下命令，查看ssh公鑰：

2.5.將本地ssh公鑰添加到碼云

將2.4生成的ssh公鑰添加到線上倉庫

3.將項目下載到本地

在本地創建一個vueProject文件夾，git bash進入到此文件夾，運行以下命令，將項目下載到本地

git clone git@gitee.com:***/jd-finance.git

項目地址 從你的倉庫中克隆，相應更改，如圖：

 4. 用vue-cli初始化vue+webpack項目

4.1.安裝vue腳手架工具

npm install -g @vue/cli

4.2.創建vue項目

進入到vue項目文件夾，創建vue項目（同時安裝webpack依賴）

cd vueProject
vue init webpack jd-finance

在安裝選項中選擇 2 （merge）

安裝完成后，運行：

cd jd-finance/
npm run dev

在瀏覽器中訪問：http://localhost:8080，出現如下界面，說明項目創建成功：

 4.3.將項目上傳到碼云

gid add .
git commit -m 'project init initialized'
git push

5.項目結構初始化

5.1項目結構更改

home.vue

router  >  index.vue

App.vue

更改完成后保存，npm run dev啟動項目，訪問http://localhost:8080，出現如下結果，說明項目結構初始化完成

----------------章節一 完結----------------