记录一个教学的交互式系统的开发 —— 环境搭建

创建项目


最近临近毕业,也到了毕业设计和找工作的时间了,所以就想着做一个开源项目,之前上课也不是很满意学校的教学系统,也就是,想着做一个可以记录学生学习记录和教师教学记录的平台,支持网页、桌面应用和小程序的项目。
这个项目呢打算使用的技术栈:
前端:vue3.0 + typescript + element plus + electron
后端:golang + gin + gorm
项目名:Mango Education Interactive Service —— MEIS
技术栈会有出入后面也会持续更新的。

搭建前端环境

在你的项目目录中执行 npm create vue@latest
记录一个教学的交互式系统的开发 —— 环境搭建_第1张图片
我这里是已经创建了文件夹所以直接在当前文件下创建,关于其他的配置项一律选择no,我们在后面慢慢配置。

运行成功后我们将会看到这个页面:
记录一个教学的交互式系统的开发 —— 环境搭建_第2张图片

1. typescript配置

在命令行中运行:vue add typescript

如果出现报错:
在这里插入图片描述
查看环境变量中是否配置了node_global的绝对路径。
查看命令:npm config get prefix
在这里插入图片描述如果还是失败:查看目录中是否有vue环境,没的话运行:npm i -g @vue/cli@next

错误2:
在这里插入图片描述
执行:Set-ExecutionPolicy -Scope CurrentUser

记录一个教学的交互式系统的开发 —— 环境搭建_第3张图片
执行:vue -V
在这里插入图片描述
可以看到版本号时,则成功了。

记录一个教学的交互式系统的开发 —— 环境搭建_第4张图片
安装完成后他会问你,是否需要使用class风格装饰器也就是:

 home = new Vue() => class Home extends Vue{}

我这里选择no。

在这里插入图片描述接着问你:是否使用babel与typescript自动检测填充。可以辅助我们开发,选择yes
在这里插入图片描述
是否将所有的js文件转换为ts:yes。
在这里插入图片描述
是否允许js编译。
在这里插入图片描述
是否跳过所有声明文件的类型检查(建议应用程序使用)

如果你和我报同样的错误:
记录一个教学的交互式系统的开发 —— 环境搭建_第5张图片
执行:

  1. npm i -S-D @vue/cli-service
  2. vue add typescript

查看文件:
记录一个教学的交互式系统的开发 —— 环境搭建_第6张图片
已经安装成功。
若运行显示找不到main.js文件,记得修改Index.html中的文件引用。
记录一个教学的交互式系统的开发 —— 环境搭建_第7张图片

2. 安装pinia

也就是之前我们常用的vuex,pinia是重新设计与Composition API一起使用的。以后我们会单独说他和vuex的区别。
执行:vue add pinia

3. 安装router

执行:vue add router

搭建后端

1. 搭建环境

运行:go mod init [项目名]
在这里插入图片描述
显示你创建了一个新的文件。

创建文件:main.go
记录一个教学的交互式系统的开发 —— 环境搭建_第8张图片
执行文件:go run main.go
显示:
在这里插入图片描述

2. 配置gorm

运行:go get -u gorm.io/gormgo get -u gorm.io/driver/mysql
我们这里使用的是mysql

测试是否安装成功:

func main() {
	dsn := "root:123456@tcp(127.0.0.1:3306)/mesi?charset=utf8mb4&parseTime=True&loc=Local"
	_, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		fmt.Println("err:", err)
	}
	fmt.Println("数据库链接成功")
}

3. 配置gin

运行:go get -u github.com/gin-gonic/gin
测试是否安装成功:

r := gin.Default()
	r.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pong",
		})
	})
	r.Run() // listen and serve on 0.0.0.0:8080

访问:127.0.0.1:8080/ping
记录一个教学的交互式系统的开发 —— 环境搭建_第9张图片

总结

到这里我们的第一步配置就完成了,下一章我们继续完成项目的搭建,后面会用MEIS来替代我整个项目名,前端和后端的开发文章也会分开。

你可能感兴趣的:(MEIS,golang,vue)