该项目的主要思想是提供一种简单的方法来启动新项目,在服务器端使用 .Net Core WebAPI,在客户端使用 VueJs。为了实现这一目标,我们设置了主要配置,以使用一些实用程序(如热重载)和一些前端库(如 Element-UI 和 FontAwesome)来实现此集成。
我们的目标是提供一个简单的 SPA,最大限度地减少依赖性和性能问题。 VueJs 配置了 Vuex 和 Vue Router,但是如果您觉得它不满足您的要求,可以将其删除。组件库也是如此。在此模板中,我们还提供了具有主要功能的示例。
该模板的灵感来自于 Mark Pieszak 的项目和 Nordes 的项目。
* 工作正在进行中。在未来版本中可用。
要下载并安装模板,只需键入:
> dotnet new -i aspdotnet-vuejs
您可以使用
dotnet new -l
命令查看已安装模板的列表。
然后要创建项目,您只需在目录中使用以下命令即可:
> dotnet new vue
这将自动运行dotnet restore
。但可以在模板配置中更改它。使用上一个命令之前,请参阅dotnet new vue -h
。
解决方案和项目名称将是目录的名称。
要更新您的安装,您只需重复安装过程即可。只要版本号不相等,就不会出现任何意外的行为。
从 shell 中键入以下命令:
> dotnet new -u aspdotnet-vuejs
要开始开发应用程序,只需使用 .Net CLI 命令:
> dotnet run YourAplication.csproj
您只需在项目目录中键入
dotnet run
或配置您的 IDE 来运行即可。在最后一种情况下,请不要忘记传递ASPNETCORE_ENVIRONMENT=Development
环境变量。
这还将运行所有节点依赖项,例如npm i
。
该应用程序将以开发模式启动,并在
https://localhost:5001
和http://localhost:5000
启用热重载。
在开始该过程之前,您需要确保您的 wwwroot为空。
只需使用 .Net Core CLI 进行正常的发布方式即可
> dotnet publish YourProject.csproj -c release -o ./publish/
您还可以从 dotnet cli 添加所有其他参数。请访问 MSDN 网站以了解更多信息。
这将重建您的项目,然后它将使用特殊目标在生产模式下重建您的客户端(vuejs)。
如果您在 NginX 服务器后面进行发布,则可能需要更多配置。
假设您有基本站点http://www.example.com
并且在 NginX 配置中您希望将 dotnet 应用程序包含在http://www.example.com/myApp
中。在这种情况下,您需要为index.html 设置基本uri。您无需在开发和生产之间手动执行此操作,而是拥有包含可能覆盖的文件./build/base.prod.config.js
。
只需像下面这样设置您的覆盖:
module . exports = {
baseUriPath : '/myApp/'
}
当您下次发布时,将考虑该路径并自动设置基本 uri 路径。
该项目已经通过 Docker Hub 添加了一些可用的 docker 容器。如果需要,您可以拉取图像。它将在本地提供示例。该图像使用 Alpine 版本,因此仅占用很小的空间。
由于 docker 中的容器非常流行,因此模板根文件夹中还包含Dockerfile
。不要忘记.dockerignore
,其中一些文件被忽略,以避免在发布之前复制一些不需要的文件。
确保您已安装 Docker。
该代码在 HTTP 上内置了 Gzip 压缩。最好使用该代码,特别是如果您使用 Kestrel。否则,如果您使用 IIS,请删除Startup.cs
中找到的特定代码。通常,IIS 提供自己的压缩模块,该模块的性能更高。
关于./ClientApp/components/**/*中可用的Components
有一些自动化。所有以关键字base
开头的文件都将被声明为全局文件,并且在任何地方使用的组件名称将以蛇形命名法定义,而无需使用base
关键字。
示例: baseHelloWorld
将注册为hello-world
,您将能够在 Vue 模板中使用它。
< template >
< div >
< hello-world /> works!
</ div >
</ template >
项目中每个页面的卡片组件都有一个真实的示例。组件的名称是
baseCard.vue
。
当您处于开发模式时,不会生成 css。仅当您使用dotnet publish
命令时才会创建它们,或者作为替代方案,您也可以输入npm run build -- --prod
这将启动生产构建并缩小和提取文件。
重要提示:目前,webpack 会清理 .Net 项目中的整个 wwwroot 文件夹。因此,如果您有静态文件,请将它们移动到./ClientApp/static/文件夹中。
为了帮助加快开发速度,我们提供了组件库Element-UI的安装。该库的文档可以在他的网站上找到。
如果不需要,可以在
main.js
中正常删除它。