Javascript VueJs 3-结合客户端渲染使用捆绑的sfc 问候语

你好，Vuers同胞们

所以我有以下情况：

我使用ASP.Net Core 3.1作为我的服务器，我想使用Vue SFC设置，包括Typescript支持，并将生成的组件绑定到我的.cshtml中

示例用法 Example.vue Index.cshtml

@page
@模型名称空间.To.IndexModel

问题 有没有办法将单个文件组件捆绑起来，然后根据需要在（cs）html中使用这些组件

最好是将每个组件放在自己的.js文件中，以便按需加载，但这不是必须的

---

提前感谢

这是可能的。但为了澄清，您似乎希望单独使用这些组件。这意味着您所称的SFC/组件将需要被视为其自己的Vue应用程序

假设是这样，您需要为每个组件创建一个vue应用程序，并分别导出它们，而不是单独捆绑组件

您需要决定如何/何时安装它们。我依赖于一种更为手动的装载方式，这需要一行js将DOM元素与小部件链接起来并传递属性。或者，您可以仅依赖DOM标记。诚然，js方式有点冗长，但不太容易出现边缘情况

下面是js方式的示例

组件/example/index.js

：

从“./Example.vue”导入示例；
导出常量挂载示例=（el，道具）=>
Vue.createApp（el，道具）；

然后将组件包装在一个函数中，该函数允许您传递要使用的DOM元素和道具

你需要

mountExample（“#example”，{name:@Model.name”，content=“@Model.content}）；

另一种方法（没有js实例化）是将其包装在一个函数（IIFE）中，该函数查找

标记，解析内容，然后使用提供的参数装载应用程序。这比另一个示例要复杂得多，但应该不会太复杂

对于这个示例，我会这样组织：

Example

/components/example/
|-- Example.vue
|-- index.js

然后通过

vue.config.js

使用网页链接来执行这些操作

module.exports={
//调整内部网页包配置。
//看https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
链接网页包：配置=>{
//删除标准入口点
config.entryPoints.delete（'app'）
//然后加上你自己的
config.entry（'示例'）
.add（'./src/components/example/index.js'）
(完)
.entry（'菜单'）
.add（'./src/components/menu/index.js'）
(完)
}
}

一个警告；我已经使用rollup生成了这些，我还没有对此进行测试，但webpack也应该可以工作

网页包配置的资源：

---

这是可能的。但为了澄清，您似乎希望单独使用这些组件。这意味着您所称的SFC/组件需要被视为自己的Vue应用程序

假设是这样，您需要为每个组件创建一个vue应用程序，并分别导出它们，而不是单独捆绑组件

您需要决定如何/何时装载它们。我依赖于一种更为手动的装载方式，它需要一行js将DOM元素与小部件链接并传递属性。或者，您也可以只依赖DOM标记。无可否认，js方式有点冗长，但不太容易出现边缘情况

下面是js方式的示例

组件/example/index.js

：

从“./Example.vue”导入示例；
导出常量挂载示例=（el，道具）=>
Vue.createApp（el，道具）；

然后将组件包装在一个函数中，该函数允许您传递要使用的DOM元素和道具

你需要

mountExample（“#example”，{name:@Model.name”，content=“@Model.content}）；

另一种方法（没有js实例化）是将其包装在一个函数（IIFE）中，该函数查找

标记，解析内容，然后使用提供的参数装载应用程序。这比另一个例子要多做一些工作，但不应该太复杂

对于这个示例，我会这样组织：

Example

/components/example/
|-- Example.vue
|-- index.js

然后通过

vue.config.js

使用网页链接来执行这些操作

module.exports={
//调整内部网页包配置。
//看https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
链接网页包：配置=>{
//删除标准入口点
config.entryPoints.delete（'app'）
//然后加上你自己的
config.entry（'示例'）
.add（'./src/components/example/index.js'）
(完)
.entry（'菜单'）
.add（'./src/components/menu/index.js'）
(完)
}
}

警告；我已经使用rollup生成了这些，我还没有测试过，但webpack也应该可以工作

网页包配置的资源：

@page
@model Namespace.To.IndexModel
<example :name="@Model.Name" :content="@Model.Content" />

/components/example/
|-- Example.vue
|-- index.js