创建项目
最近临近毕业,也到了毕业设计和找工作的时间了,所以就想着做一个开源项目,之前上课也不是很满意学校的教学系统,也就是,想着做一个可以记录学生学习记录和教师教学记录的平台,支持网页、桌面应用和小程序的项目。
这个项目呢打算使用的技术栈:
前端:vue3.0 + typescript + element plus + electron
后端:golang + gin + gorm
项目名:Mango Education Interactive Service —— MEIS
技术栈会有出入后面也会持续更新的。
搭建前端环境
在你的项目目录中执行 npm create vue@latest
我这里是已经创建了文件夹所以直接在当前文件下创建,关于其他的配置项一律选择no,我们在后面慢慢配置。
运行成功后我们将会看到这个页面:
1. typescript配置
在命令行中运行:vue add typescript
如果出现报错:
查看环境变量中是否配置了node_global的绝对路径。
查看命令:npm config get prefix
如果还是失败:查看目录中是否有vue环境,没的话运行:npm i -g @vue/cli@next
错误2:
执行:Set-ExecutionPolicy -Scope CurrentUser
执行:vue -V
可以看到版本号时,则成功了。
安装完成后他会问你,是否需要使用class风格装饰器也就是:
home = new Vue() => class Home extends Vue{}
我这里选择no。
接着问你:是否使用babel与typescript自动检测填充。可以辅助我们开发,选择yes
是否将所有的js文件转换为ts:yes。
是否允许js编译。
是否跳过所有声明文件的类型检查(建议应用程序使用)
如果你和我报同样的错误:
执行:
npm i -S-D @vue/cli-service
vue add typescript
查看文件:
已经安装成功。
若运行显示找不到main.js文件,记得修改Index.html中的文件引用。
2. 安装pinia
也就是之前我们常用的vuex,pinia是重新设计与Composition API一起使用的。以后我们会单独说他和vuex的区别。
执行:vue add pinia
3. 安装router
执行:vue add router
搭建后端
1. 搭建环境
运行:go mod init [项目名]
显示你创建了一个新的文件。
创建文件:main.go
执行文件:go run main.go
显示:
2. 配置gorm
运行:go get -u gorm.io/gorm
和go 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
总结
到这里我们的第一步配置就完成了,下一章我们继续完成项目的搭建,后面会用MEIS来替代我整个项目名,前端和后端的开发文章也会分开。