Git與遠程倉庫操作、服務器開發基本流程及Vue簡單配置流程

1.基於VSCode下Git操作：

① 新建一個新倉庫（自行百度），並獲取http鏈接；

② 之後在VSCode裏新建窗口，ctrl+` 打開終端，cd 到自定義工作目錄下，輸入：

git clone http鏈接 ；dir會顯示存在文件夾XXX（此爲你倉庫對應的名稱），cd進入後輸入 yarn init -y，會自動生成 package.json文件：內容爲：

{
"name": "XXX",
"version": "1.0.0",
"main": "index.js",
"repository": "http鏈接",
"author": "用戶名 郵箱",
"license": "MIT"
}

③ 然後新建tsconfig.json文件，輸入：

{
     "compilerOptions":{
            "module": "commonjs",    //這句非常重要
            "sourceMap": true,  //是否生成map文件
            "outDir": "dist",   //輸出目錄
            "declaration": true,    //是否生成.d文件
            "removeComments": false,    //服務端remove
            "noImplicitAny": true,
            "target": "es2018"
        },
    
    "include": [    //只編譯其中的目錄中文件
        "src"
    ]

}

④ VSCode打開XXX文件夾，其中存在package.json文件，再新建 .gitignore 文件用於對git設置：使git忽視掉其中設置的文件夾中文件的變化，內容爲：

node_modules 
dist/**/*.map
dist/**/*.ts

此時在中存在你修改後的文件，點擊“+”可將文件暫存，再點擊“√”並輸入信息（如圖中的111）後即可push到git倉庫中。

⑤ 小提示：1.修改快捷鍵：Git pull : Ctrl+T；Git Push : Ctrl+Shift+K；Git Commit : Ctrl+K    對git的提交應先Ctrl+K提交，再Ctrl+Shift+K推送，才真的到倉庫裏；2.設置裏查找 format，將粘貼、保存格式化程序勾選。

2.服務端簡單開發流程：

①  新建tsconfig.json、.gitignore、src/index.ts；具體內容同上幾節，但是注意此時是在git環境下進行開發，數據需要先在工作目錄下 yarn init -y 獲取package.json；

新建：src/index.ts；內容爲：通過監聽30000端口：此時沒有安裝依賴包，需要安裝：

console.log('start server')

import server from '@ctsy/server';
import { install as RouterInstall } from '@ctsy/router';
import { install as SessionInstall } from '@ctsy/session';

server.install({ install: RouterInstall });
server.install({ install: SessionInstall });

console.log('port:30000');
server.start(30000);

②  終端輸入tsc -w，另一終端輸入 依賴包：yarn add @ctsy/server @ctsy/controller @ctsy/model @ctsy/relation @ctsy/config @ctsy/router @types/node @ctsy/session @ctsy/common @types/sequelize  用於將ctsy文件添加。

③  新建src/controller文件夾，裏面新建文件，注意此中爲頁面路徑，習慣大寫，並添加class 類名，該類名和文件名一致。內容與前一篇db.ts類似，但不是調用this.M()用於獲取，而是通過調用延時函數來體會各種異步操作的不同：具體內容如下：

新建src/controller/Function.ts文件，內容如下：通過頁面（具體調用在前一篇）調試結果如下：

④ 擴展：調用sum()對應的結果： 由於代碼中 return (this._ctx.query.ID || 0) + 1; 即，這個 +1 對應的是字符串的擴展，打開網頁：http://localhost:30000/Function/sum?ID=15 返回：{"d":"151","c":200,"i":"","e":""} ，將其修改爲 通過 GET / POST （需要端口測試工具）來進行數據交互：總體代碼如下：

//Function.ts
import BaseController from '@ctsy/controller/dist/base_controller';
import { timeout } from '@ctsy/common';

export default class Function extends BaseController {
    hello() {
        return 'hello,this is for test ';
        //alert('hello');
    }
    sum(data: any) {
        //用於自加
        return (this._ctx.query.ID || 0 + 1);
    }
    /**
     * 該post用於測試，通過網頁端發送數據，直接將數據返回
     * @param data 
     */
    post(data: any) {
        return data;
    }
    //以下三種寫法均爲延時1s，即三種寫法均等價
    async test() {
        await timeout(1000);//延時1s
        return "this is a 1s later";
    }
    pro_test_a() {
        return new Promise(async (a) => {
            await timeout(1000);
            a('this is an another 1s later');
        })
    }
    pro_test_b() {
        return timeout(1000).then(() => {
            return 'this is then 1s later';
        })
    }
}

3.Vue簡單配置流程

• 安裝：cmd下：命令行：npm install --global vue-cli 之後 npm install -g webpack 然後開始輸入： vue init webpack myVue 注意：

第一個 name要輸入小寫；第二個回車，第三個會先彈出什麼Only，輸入YES回車即可；之後輸入Y回車，但有一個：Use ESLint to line your code ?選擇No；最後我選 yarn 下載。

• 安裝完成後輸入 vue -V 可以查看對應版本；發現此時版本爲2.9.6，而現在vue到3了
• 輸入 npm  uninstall -g vue-cli 卸載，完成後 npm install -g @vue/cli 進行重新安裝
• 此時vue -V查看對應版本3.9.6；ok，cd 到指定目錄，vue create xxx(項目名稱必須爲小寫)，然後一路回車後等安裝好，有提示 “$ cd xxx”和“$ yarn serve”，按提示輸出即可。
• 進入項目目錄後打開服務後，提示登陸http://localhost:8080 ,顯示vue已經配置完成。

如下圖：

• 之後 VSCode打開對應文件夾，添加文件vue.config.js，用於配置vue：

 

module.exports = {
publicPath: './', //設置當前路徑
outputDir: 'dist' //打包後的存儲路徑
}

然後打開package.json文件，發現一個命令行：serve ；cd 進入項目路徑後yarn serve ；便可打開vue服務，8080端口即可使用。