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已经配置完成。

*/

更新优化步骤如下：

①：cmd下输入命令行： npm install -g @vue/cli  即安装完成；

②：于项目文件夹处打开cmd（或直接cd、mkdir进入）

③：输入：vue ui  进入可视化配置（或 输入命令行安装：

vue create create-vue-app-in-2019

④：选择对应配置：Babel、TypeScript、Router、Vuex、和Css即可；然后 除了 history mode 选 no ，CSS选less，前期配置完成。

如下图：

• 之后 VSCode打开对应文件夹，添加文件vue.config.js，用于配置vue：

module.exports = {
publicPath: './', //设置当前路径
outputDir: 'dist' //打包后的存储路径
}

然后打开package.json文件，发现一个命令行：serve ；cd 进入项目路径后yarn serve ；便可打开vue服务，8080端口即可使用。