【WTM实战教程】001 vue环境配置和项目启动

KnifeZ 11/15/2020, 10:56:35 AM 820

本文通过一个简单的CMS内容管理系统来快速上手WTM-vue。

一、下载项目

从 https://wtmdoc.walkingtec.cn/setup 上面下载vue版的wtm项目。

具体配置如下,注意前端UI需要选 Vue(前后端分离),其他的根据自己需要选择。
wtm配置

二、VUE环境配置

要想运行期vue,得先安装node.js和npm,

node.js安装教程

打开nodejs官网 https://nodejs.org/en/ .下载LTS版本。下载之后一步一步安装,安装完成之后打开Windows Power Shell,输入 node -v,即可验证node.js是否安装成功。

node验证

注:显示的版本号可能不一样。

npm安装教程

NPM为nodejs下的包管理器,安装卸载升级各自依赖包的。
其实nodejs自带了npm,先在Windows Power Shell输入 npm -v,能够如上一步一样正常返回版本号即表示安装成功,但通常nodejs自带的npm不是最新的,需要更新到最新版本,在命令行里输入如下代码并回车执行。执行之后再次输入 npm -v查看版本号是否变化。

npm install -g npm
0

启动项目

数据库配置

下载项目之后通过VS打开(推荐vs2019),按下图所示修改appsettings.json和DataContext.cs文件中的数据库连接字符串。

图

我用的是sqlite,其他数据库连接方式见https://blog.knifez18.com/post/132412432670984714.html

生成数据库

打开 程序包管理器控制台,底部没有的在顶部工具栏=工具=Nuget包管理器中打开。如果生成时选的是多个项目,需要在默认项目那里选择 CMSdemo.DataAccess,然后在下方命令行输入如下脚本:

add-migration init
update-database
0
1

当控制台返回successed和done时,就表明数据库创建成功了。

运行项目

这一步什么都不需要做,只需要按 F5或者点击工具栏的 IIS Express即可看到浏览器打开登录页面。默认的账户密码为admin,000000。点击log in就可以正常登录啦。
login

到此WTM实战教程的第一篇已经完成,当顺利执行到这里的时候,就说明你已经一只脚踏进WTM-vue版的门里了,下一节则介绍一下如何在vue里完成表的增删改查和前后端接口请求的完整流程。

如果有不明白的,可以点击logo在关于中找到我的联系方式,后续会把该教程的源码放在Gitee上~

如果觉得文章帮助了您,可以请我喝杯咖啡

#Tags

VueWTM

发表评论

邮箱
昵称

热门文章

本站已稳定运行了1天 共计人访问
Powered by .NET 5 on ubuntu