在多页现有 .NET MVC 应用程序中用 VueJS 2 替换 jQuery 时的最佳方法 [英] Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application
问题描述
我对 VueJS 很陌生
我有一个多页 ASP.NET MVC 应用程序，我想在其中使用 VueJS(组件、2 路绑定、验证、CRUD 操作)
目前使用 jQuery 进行 DOM 操作、Ajax 请求等
我应该如何解决这个问题?我从不同的帖子(在线)中得到了太多的想法
有人可以指导我并给我一些入门指南吗?
一些循序渐进的文档会很棒，它展示了如何使用带有 vuejs 单文件组件和捆绑的 hello world 页面(MVC 视图)来做到这一点
捆绑的过程似乎很复杂.但我很想在我的代码中使用 LESS
感谢阅读
非常基础
我所知道的在 ASP.NET 中使用 Vue 的最基本方法就是将 Vue 脚本包含在您的项目中.您可以使用 vue.js Nuget 包，它会将 Vue 脚本添加到您的 Scripts 目录中，并且只在您的 MVC 视图中包含开发版本或缩小版本.
然后在你的视图cshtml中，添加一个脚本块.
其中 #app 指的是视图中的元素.如果您想使用一个组件，只需将其添加到您的脚本块中即可.
并修改您的 Vue 模板.
{{信息}}<孩子></孩子>如果您发现自己构建了很多组件(您可能会这样做)，请将它们提取到 vue.components.js 文件或类似文件中，在那里定义所有组件，并在视图中包含 vue 之外的组件脚本.
使用单个文件组件
为了使用单文件组件，您需要将单文件组件的 node.js 构建过程集成到您的 ASP.NET MVC 构建过程中.
安装 node.js.安装node.js后，全局安装webpack.
npm install webpack -g将 package.json 添加到您的项目中.这是我使用的.
<代码>{版本":1.0.0"，"name": "vue-example",私人":真的，开发依赖":{"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"},依赖关系":{"vue": "^2.2.1"}}我通常在我的项目中创建一个文件夹来保存我的 Vue 脚本和名为 Vue 的 .vue 文件.添加一个文件作为 Vue 构建过程的入口点.我们可以称它为 index.js(或任何你想要的).
从'vue'导入Vue从'./App.vue'导入应用程序新的 Vue({el: '#app',渲染:h =>h(应用程序)})创建 App.vue.
<div id="应用程序">{{味精}}<脚本>导出默认{名称:'应用'，数据 () {返回 {msg: '欢迎使用您的 Vue.js 应用程序'}}}
将 webpack.config.js 添加到您的项目中.这是我使用的.
module.exports = {条目:./Vue/index.js"，输出: {路径:__目录名，文件名:./Vue/bundle.js"，},模块: {装载机: [{ 测试:/.vue$/, 加载器: 'vue-loader' },],}}此配置指定 index.js 作为 webpack 的入口点，以找出要包含在 bundle.js 文件中的内容，该文件将被编译并放入 Vue 文件夹中.
为了在项目构建时编译 bundle.js 文件，我修改了项目文件以包含以下内容.
<Exec Command="npm install"/><Exec Command="webpack"/></目标><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");//构建一个看起来像的对象//{//"文件名": "./filename.vue"//}//列出 webpack 编译的入口点.函数 buildEntry() {const reducer = (entry, file) =>{ entry[file.split(".").shift()] = `./Vue/${file}`;返回条目；};返回 fs.readdirSync(path.join(__dirname, "Vue")).filter(file => file.endsWith(".vue")).reduce(reducer, {});}模块.出口 = {条目:buildEntry(),输出: {路径:path.join(__dirname, "Vue"),文件名:[名称].js"，图书馆:[名称]"},模块: {装载机: [{ 测试:/.vue$/, 加载器: 'vue-loader' },],}}这个 webpack 配置将为每个单独的文件组件构建一个脚本文件.然后，您可以将该脚本包含在您使用上述极其基本"技术的页面上，并通过全局公开或作为 Vue 的一部分在您的 Vue 中使用该组件.例如，如果我有一个 Modal.vue，我会将 Modal.js 包含在 ASP.NET MVC 视图中，然后通过
将其公开给 VueVue.component("Modal", Modal);或
new Vue({...成分:{模态":模态}})Webpack 是非常可配置的，因此您可能需要采用不同的方法并为每个页面构建一个包.
终于可以在开发运行的同时打开命令行了
webpack --watch直接在您的项目中，您的包或单个组件将在您每次保存时构建.
I am very new in VueJS
I have multi-page ASP.NET MVC app where I want to use VueJS (components, 2-way binding, validation, CRUD operations)
Currently using jQuery for DOM manipulation, Ajax requests etc
How should I approach this? I am getting way too much variations in thoughts from different posts (online)
Could anyone please guide me and give me some pointers to get started?
Some step by step doc will be great that shows how to do this with a hello world page (MVC View) with vuejs single file component and bundling
The bundling seems complicated process. But I would love to use LESS in my code
Thanks for reading
Extremely Basic
The most basic way to get started I know of with Vue in ASP.NET is just to include the Vue script in your project. You can use the vue.js Nuget package, which will add the Vue scripts to your Scripts directory and just include either the development or minified version in your MVC view.
<script src="~/Scripts/vue.min.js"></script>
Then in your view cshtml, just add a script block.
<script>
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
where #app refers to an element on your view. If you want to use a component, just add it to your script block.
<script>
Vue.component("child", {
template:"<h1>I'm a child component!</h1>"
})
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
and modify your Vue template.
<div id="app">
{{message}}
<child></child>
</div>
If you find yourself building a lot of components (which you likely will), extract them into a vue.components.js file or something similar, define all your components there, and include that on your views in addition to the vue script.
Using Single File Components
In order to use single file components, you need to integrate the node.js build process for single file components into your ASP.NET MVC build process.
Install node.js. After node.js is installed, install webpack globally.
npm install webpack -g
Add a package.json to your project. Here is what I use.
{
"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"
}
}
I typically create a folder in my project to hold my Vue scripts and .vue files called Vue. Add a file to serve as the entry point for your Vue build process. We can call this index.js (or anything you want).
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
Create App.vue.
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Add a webpack.config.js to your project. Here is what I use.
module.exports = {
entry: "./Vue/index.js",
output: {
path: __dirname,
filename: "./Vue/bundle.js",
},
module: {
loaders: [
{ test: /.vue$/, loader: 'vue-loader' },
],
}
}
This config specifies index.js as the entry point for webpack to figure out what to include in a bundle.js file, which will be compiled and put in the Vue folder.
In order to compile the bundle.js file whenever the project builds, I modify the project file to include the following.
<Target Name="RunWebpack">
<Exec Command="npm install" />
<Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>
This will install the necessary npm packages and then run webpack to build the bundle.js. This is necessary if you are building your project on a build server.
Now you just need to include the bundle.js file on a view that has an element with #app on it. You do not need to include vue.js or vue.min.js. That will be in the bundle.
Compile Individual Single File Components
We found there were times we wanted to use a single file component, but did not want to bundle it all into a single script. To do this, you mainly need only modify the 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' },
],
}
}
This webpack configuration will build a script file for every individual single file component. Then you can just include that script on a page where you are using the "Extremely Basic" technique above and use the component in your Vue by either exposing it globally or as part of the Vue. For example, if I have a Modal.vue, I would include Modal.js on the ASP.NET MVC view and then expose it to Vue by
Vue.component("Modal", Modal);
or
new Vue({
...
components:{
"Modal": Modal
}
})
Webpack is very configurable, so you may want to take a different approach and build a single bundle for each page.
Finally, you can open a command line while you are developing and run
webpack --watch
in your project directly and your bundle(s) or individual components will be built every time you save them.
这篇关于在多页现有 .NET MVC 应用程序中用 VueJS 2 替换 jQuery 时的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
