在多页现有.NET MVC应用程序中用VueJS 2替换jQuery时的最佳方法

Question

我是VueJS的新手

我有多页ASP.NET MVC应用程序,我想使用VueJS(组件,双向绑定,验证,CRUD操作)

目前使用jQuery进行DOM操作,Ajax请求等

我该怎么做呢？我从不同的帖子(在线)获得了太多的想法变化

有谁能指导我,并给我一些指导开始？

一些一步一步的文档将是伟大的,显示如何使用vuejs单文件组件和捆绑的hello world页面(MVC View)执行此操作

捆绑似乎很复杂.但我希望在我的代码中使用LESS

谢谢阅读

Answer 1

非常基本

最基本的入门方式我在ASP.NET中使用Vue知道只是在项目中包含Vue脚本.您可以使用vue.js Nuget包,它将Vue脚本添加到您的Scripts目录中,并在MVC视图中包含开发或缩小版本.

<script src="~/Scripts/vue.min.js"></script>

然后在你的视图cshtml中,只需添加一个脚本块.

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

where #app指的是视图中的元素.如果要使用组件,只需将其添加到脚本块即可.

<script>
    Vue.component("child", {
        template:"<h1>I'm a child component!</h1>"
    })

    new Vue({
        el: "#app",
        data: {
            message: "Hello from Vue"
        }
    })
</script>

并修改您的Vue模板.

<div id="app">
    {{message}}
    <child></child>
</div>

如果您发现自己构建了很多组件(您可能会这样做),请将它们提取到vue.components.js文件或类似文件中,在那里定义所有组件,并在vue脚本之外的视图中包含它们.

使用单个文件组件

为了使用单个文件组件,您需要将单个文件组件的node.js构建过程集成到ASP.NET MVC构建过程中.

安装的node.js.安装node.js后,全局安装webpack.

npm install webpack -g

将package.json添加到项目中.这是我使用的.

{
  "version": "1.0.0",
  "name": "vue-example",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-env": "^1.1.8",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "vue-loader": "^11.1.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.0"
  },
  "dependencies": {
    "vue": "^2.2.1"
  }
}

我通常在项目中创建一个文件夹来保存名为Vue的Vue脚本和.vue文件.添加文件以用作Vue构建过程的入口点.我们可以调用这个index.js(或任何你想要的).

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

创建App.vue.

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

将webpack.config.js添加到项目中.这是我使用的.

module.exports = {
    entry: "./Vue/index.js",
    output: {
        path: __dirname,
        filename: "./Vue/bundle.js",
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

此配置指定index.js作为webpack的入口点,以确定要包含在bundle.js文件中的内容,该文件将被编译并放入Vue文件夹中.

为了在项目构建时编译bundle.js文件,我修改项目文件以包含以下内容.

<Target Name="RunWebpack">
  <Exec Command="npm install" />
  <Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>

这将安装必要的npm包,然后运行webpack来构建bundle.js.如果要在构建服务器上构建项目,则必须执行此操作.

现在,您只需要在包含元素的视图中包含bundle.js文件#app.你不会需要包括vue.js或vue.min.js. 这将是捆绑.

编译单个单个文件组件

我们发现有时候我们想要使用单个文件组件,但不希望将它们全部捆绑到一个脚本中.为此,您主要只需要修改webpack.config.js.

const fs = require("fs");
const path = require("path");

// build an object that looks like 
// {
//      "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
    const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };

    return fs.readdirSync(path.join(__dirname, "Vue"))
        .filter(file => file.endsWith(".vue"))
        .reduce(reducer, {});
}

module.exports = {
    entry: buildEntry(),
    output: {
        path: path.join(__dirname, "Vue"),
        filename: "[name].js",
        library: "[name]"
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
        ],
    }
}

此Webpack配置将为每个单个文件组件构建一个脚本文件.然后,您可以在您使用上述"极端基本"技术的页面上包含该脚本,并通过全局或作为Vue的一部分公开它来使用Vue中的组件.例如,如果我有一个Modal.vue,我会在ASP.NET MVC视图中包含Modal.js,然后将其公开给Vue

Vue.component("Modal", Modal);

要么

new Vue({
    ...
    components:{
        "Modal": Modal
    }
})

Webpack非常易于配置,因此您可能希望采用不同的方法并为每个页面构建一个捆绑包.

最后,您可以在开发和运行时打开命令行

webpack --watch

直接在您的项目中,每次保存时都会构建您的软件包或单个组件.

Answer 2

我通过遵循@Bert在上面发布的帖子，尝试使用ASP.NET MVC 5（.NET 4.5，不是Core！）设置Vue，但是我遇到了很多问题，所以我找到了另一种方法：

（警告：如果要对自己的组件使用vue.js，则需要安装node.js（用于npm，webpack）以构建捆绑包，并安装vue-loader（用于解析* .vue文件））

1. 安装node.js
2. 运行Node.js命令提示符并导航到您的Visual Studio项目文件夹（放置* .csproj文件的位置）
3. 类型：npm init -y并按Enter键-它应生成具有依赖项和基本设置的packages.json文件
4. 为Vue添加必要的加载程序（没有这些加载程序，*。vue文件无法解析为捆绑包中的javascript）：npm install --save-dev vue-loader vue-template-compiler

5. （全局）添加webpack并将其保存在我们的package.json文件中：

   一种） npm install -g webpack

   b） npm install –-save-dev webpack

6. 最后，将Vue.js添加到项目中：npm install --save vue

现在，我的package.json看起来像：

{
  "name": "VueExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

7. 下一步是配置webpack-返回Visual Studio并添加到项目webpack.config.js文件，然后将以下代码粘贴到其中：

{
  "name": "VueExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

8. 添加Vue的文件夹到您的项目和地方两个文件在里面- index.js和App.vue：

index.js：

module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './Vue/dist/bundle.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};

App.vue：

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
});

9. 示例index.cshtml文件：

<template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

10. 返回在2）中打开的Node.js命令提示符，然后输入以下命令来运行webpack：，按Enter键并等待构建您的bundle.js，您可以在〜/ Vue / dist / bundle.js中找到webpack
11. 在Visual Studio中构建项目并运行它。