在 Orchard / ASP.NET MVC / Razor 中使用 'single file' Vue.js 组件

Question

我有一个托管在 Azure 中并使用 Orchard 作为 CMS 的大型网站。我们在 Orchard 框架中开发了几个自定义模块，它们基本上只是 ASP.NET MVC，在 Orchard 中运行良好。没什么特别的。

不是全职网络人员（我通常做桌面应用程序）我正在努力解决一些新手问题，试图让我的第一个 'single file' Vue.js 组件正常工作。我认为我的问题源于一些简单的语法 and/or url/filepath 问题。但是我一直在盲目地尝试排列，但运气不佳，所以我希望有人能给我指出正确的方向。

首先，这是我的工作起点

我的简化剃须刀 (index.cshtml) 文件：

@{

    Script.Require("jQuery").AtHead();

    Style.Include("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css").AtHead();
    Script.Include("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js").AtHead();

    Script.Include("https://cdn.jsdelivr.net/npm/vue/dist/vue.js").AtHead();
}

<div id="my-vue-app" class="container">

    <h2>This is a simple razor page</h2>

    <div v-for="shop in pizzaShops">
        <p>{{ shop.id }} - {{ shop.name }}</p>
    </div>

</div>

<!-- Right now, I am placing the js as a sibling of the view.  Placing the js into -->
<!-- the scripts folder feels disjointed right now.  The paths to the view is --> 
<!-- driven by Orchard naming and filepath conventions.  Being a prototype, I'm not -->
<!-- to hung up on this right now. -->
<script src="~/modules/mymodule/views/myviewfolder/index.js"></script>

我的简化 Vue 应用程序 (index.js) 文件：

const pizzaShops = [
    {
        id: 1,
        name: 'Pizza The Hut'
    },
    {
        id: 2,
        name: 'Little Geezers'
    },
    {
        id: 3,
        name: 'Pappa Runs'
    },
    {
        id: 4,
        name: 'Tri-ominoes'
    }
];

const app = new Vue({
    el: '#my-vue-app',
    data: {
        pizzaShops
    }
});

当我编译和运行上面的文件时，一切都按预期工作，我的视图包含您期望的输出：

Better Components! Better Pizza Pizza!

1 - Pizza The Hut
2 - Little Geezers
3 - Pappa Runs
4 - Tri-ominoes

现在，当我尝试介绍我的 'single file' Vue 组件时，rails 出现了问题。

这是我简化的 'single-file' Vue 组件 (pizzashop.vue):

<template>
  <div>
    <h1>static content</h1>
  </div>
</template>

<script>
  export default {
     name: 'pizzaShopComponent'
  }
</script>

<style scoped>
</style>

和我的更新视图 (index.cshtml)

<div id="my-vue-app" class="container">

    <h2>Better Components! Better Pizza Pizza!</h2>

    <div v-for="shop in pizzaShops">
        <p>{{ shop.id }} - {{ shop.name }}</p>
    </div>

    <pizzaShopComponent v-for="shop in pizzaShops" :shop="shop"></pizzaShopComponent>

</div>

现在我认为我需要做的就是把我index.js中的点连接起来，像这样：

import pizzaShopComponent from './pizzashop.vue'

const pizzaShops = [
  //ommitted for brevity
];

const app = new Vue({
    el: '#my-vue-app',
    data: {
        pizzaShops
    },
    components: {
        pizzaShopComponent
    }
});

但这导致我的输出变为：

Better Components! Better Pizza Pizza!

{{ shop.id }} - {{ shop.name }}

和此控制台消息

SyntaxError: import declarations may only appear at top level of a module

我试过像这样添加 type="module"：

<script type="module" src="~/modules/mymodule/views/myviewfolder/index.js"></script>

fix/suppress 控制台消息是什么，但我仍然有这个输出：

Better Components! Better Pizza Pizza!

{{ shop.id }} - {{ shop.name }}

谁能告诉我哪里错了？看起来这应该有效？

Answer 1

单文件 vue 组件需要像 webpack 这样的构建工具来生成一个 javascript 文件，然后您可以在浏览器中使用该文件。他们有示例模板可帮助您开始使用 .vue 文件：https://github.com/vuejs-templates

但您不需要使用 .vue 文件，您可以轻松利用组件而无需单个文件：https://vuejs.org/v2/guide/components.html

Answer 2

万一有人觉得这有帮助，我进入了兔子洞并安装了 webpack 并使用我的 ASP.NET 项目（即 Orchard 模块）和 VS2017。这是我遵循的步骤的简要总结，我不代表这是 "right" 的方法，但它对我有用。 - 我欢迎所有反馈，因为我只是在学习这些技术。

下载并安装 Node.js （在撰写本文时，我在 windows 10 上使用了 64 位安装程序，版本 8.11.3）
打开命令提示符并 cd 到包含我的 *.csproj 的文件夹
创建默认 package.json:

npm init -y
安装 Webpack：

npm install webpack --save-dev
安装 Webpack-cli（注意，这可能需要 --save-dev，不确定了）

npm install -D webpack-cli

修改您的 package.json 文件并为 webpack 添加脚本：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "wbp" : "webpack"
 },

添加 webpack.config.js 如下：

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

    mode: 'development',

    entry: {
        FirstEntry: './Views/Whatever/Index.js',
        SecondEntry: './Views/YupYup/Foobar.js,
        /* rinse and repeat */
        },

        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js'
        },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // this will apply to both plain `.js` files
            // AND `<script>` blocks in `.vue` files
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },

    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ]

}

安装 webpack 加载器和对等依赖项

npm install babel-core --save-dev

npm install "babel-loader" --save-dev

npm install "babel-preset-env" --save-dev

npm install "css-loader" --save-dev

npm install "vue-loader" --save-dev

npm install "vue-style-loader" --save-dev

npm install "vue-template-compiler" --save-dev

您的 package.json devDependencies 现在应该类似于：

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "vue-loader": "^15.2.6",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0"
}

向您的 Visual Studio 项目添加预构建步骤

npm run wbp

10（可选）安装 Vue.js Pack 2017 VS2017 扩展

Vue.js Pack 2017

经过反复试验、谷歌搜索和大量阅读才走到这一步。同样，我不确定这是批准的正确方式，但希望这对某人有所帮助。干杯！

在 Orchard / ASP.NET MVC / Razor 中使用 'single file' Vue.js 组件

Working with 'single file' Vue.js components in Orchard / ASP.NET MVC / Razor

asp.net-mvc

orchardcms

razor

vue.js