Question

我想将VueJS与.NET Core Razor页面一起使用。

boot.ts

import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
    { path: '/', component: require('./components/home/home.vue.html') },
    { path: '/counter', component: require('./components/counter/counter.vue.html') },
    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.cshtml') }
];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html'))
});

请注意上面代码中的 fetchdata.vue.cshtml 。运行应用程序时，出现以下错误：

ERROR in ./ClientApp/components/fetchdata/fetchdata.vue.cshtml
Module parse failed: .\NetCoreVueJs\ClientApp\components\fetchdata\fetchdata.vue.cshtml Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div>
|         <h1>Weather forecast</h1>
 @ ./ClientApp/boot.ts 9:37-91
 @ multi event-source-polyfill webpack-hot-middleware/client? 
path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts

是否可以将 .cshtml 文件用作VueJS中的组件？

Answer 1

是的，您可以在剃须刀页面中使用Vue，但我认为您使用错误的方式。请记住，.cshtml文件在后端被编译为发送到浏览器的html标记。

如果要使用剃刀视图，则必须将VueJS代码安装在生成并发送到浏览器的HTML上。请参阅[他在Codepen上创建的示例来说明这一点，我正在使用Pug模仿生成HTML模板的内容，一旦生成，我就在其上安装Vue JS。 https://codepen.io/jaireina/pen/MNvvgd

哈巴狗

#app
    input(type="text", placeholder="type your name", v-model="name")
    each val in [1,2,3]
    p.name {{name}}

JS

var app = new Vue({
  el: '#app',
  data: {
    name: ''
  }
})

您将无法以尝试的方式使用Vue作为单页应用程序并将cshtml文件作为模板传递给它。如果您确实需要使用剃刀视图，则可以按照我之前提到的做一些事情。但是，如果您想创建SPA，我建议您使用.NET创建一个API，并让您的Vue应用使用该API。

我希望这会有所帮助。

VueJS CSHTML组件

1 个答案: