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端口即可使用。