ABP frame (asp.net core 2.X + Vue) runs a front end (reproduced)

ABP frame (asp.net core 2.X + Vue) operating the front end

In this part of the main say it is a formal process can be up and running in a browser from ABP official website to download the project to the project!
    • According to needs its own system to choose to install Node.js (official website address: https://nodejs.org/en/download/ ) verify that the installation is successful, the command window in windos: node -v

    • By mounting npm VUE scaffolding (vue-cli): npm install -g vue-cli // - g is globally installed, verify that the installation is successful, the command window in windos: vue -V

    • Npm install installation yarn: npm install -g yarn, verify that the installation is successful, the command window in windos: yarn -v

  1. ABP download from the project's official website (the official website address: https://aspnetboilerplate.com/Templates )

  2. After downloading the file list shows the project archive

  3. First, let's run aspnet-core projects through the vs2017 open, it will automatically go to download the dll string Rebuild all change after the success of this project appsettings.json MyABPProject.Web.Host in the database connection string in the project, into their own strings, and then restore the database.

  4. Database restore method:

    • The MyABPProject.EntityFrameworkCore this project is set to start the project (otherwise it will error:

      The specified framework version '2.1' could not be parsed
      The specified framework 'Microsoft.NETCore.App', version '2.1' was not found.

    • 打开程序包管理器控制台(工具->NuGet包管理器->程序包管理器控制台)

    • 通“Update-Database”这个命令进行数据库还原,等待还原完成后,直接F5启动,在端口号后面加上“/swagger”会在浏览器中看到以下界面运行到此,说明asp.net core服务器端项目已正式启动完成

  5. 接下来我们来运行vue的客户端程序

    • vue项目的列表信息详细如同所示:

    • 在终端中打开vue项目的目录地址(D:\项目管理\MyABPProject\4.3.1\vue>),通过命令“yarn install”进行安装项目依赖,恢复安装完成后如下图显示:

    • 通过命令“yarn serve --open”直接运行客户端项目,“--open”的作用是,项目启动后,直接在浏览器中打开,不需要手动输入地址,命令“yarn serve”也可以启动项目,但是需要手动在浏览器中输入地址

    • 浏览器中打开客户端项目地址(http://localhost:8080/#/)显示以下界面:

    • 用户名:admin  密码:123qwe 点击登录后成功进入系统:

  直至到此,项目运行完成,在上面可以根据自己的需求进行更改。

Guess you like

Origin www.cnblogs.com/iamherea/p/11511949.html