gpt4 book ai didi

asp.net - VueJS 2 + ASP.NET MVC 5

转载 作者:搜寻专家 更新时间:2023-10-30 22:09:32 25 4
gpt4 key购买 nike

我是 VueJS 的新手。我必须在 ASP.NET MVC5 中构建单页应用程序。

我遵循本教程并且效果很好 -> TUTORIAL

但是当我创建一个 .vue 页面来测试 VueJS2 路由时,浏览器不理解“导入”,我读到我必须使用像 Babel 这样的转译器,有人知道我是如何解决的吗?

App.VUE

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

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

应用.JS

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


new Vue({
el: '#app',
router,
render: h => h(App),
data: {
message: 'Hello Vue! in About Page'
}
});

_Layout.cshtml

<div class="container-fluid">
@RenderBody()

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


<script src="~/Scripts/essential/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/essential/bootstrap.min.js"></script>
<script src="~/Scripts/essential/inspinia.js"></script>
<script src="~/Scripts/essential/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>

<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/plugin/metisMenu/jquery.metisMenu.js"></script>
<script src="~/Scripts/plugin/pace/pace.min.js"></script>
<script src="~/Scripts/plugin/slimscroll/jquery.slimscroll.min.js"></script>

非常感谢!!

最佳答案

欢迎使用 Vue.js 开发!是的,你是对的,你需要一些东西来将导入语句翻译成浏览器可以处理的 JavaScript。最流行的工具是 webpack 和 browserify。

您还使用了 .vue file ,需要先转换(使用 vue-loader ),然后浏览器才能获取它。我将阐述如何做到这一点,并设置 webpack,这涉及几个步骤。首先,我们使用的 HTML 看起来像这样:

<html>
<head>
</head>
<body>
<div class="container-fluid">
<div id="app">
{ { message } }
</div>
</div>
<script src="./dist.js"></script>
</body>
</html>

我们的目标是使用 webpack 将 App.vue 和 app.js 打包/编译成 dist.js。这是一个 webpack.config.js 文件,可以帮助我们做到这一点:

module.exports = {
entry: './app.js',
output: {
filename: 'dist.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}

此配置表示,“从 app.js 开始,替换我们遇到的 import 语句,并将其打包到 dist.js 文件中。当 webpack 看到 .vue 文件时,使用vue-loader 模块将其添加到 dist.js。”

现在我们需要安装可以实现这一目标的工具/库。我推荐使用 npm,它随 Node.js 一起提供。 .一旦你安装了 npm,你可以将这个 package.json 文件放在你的目录中:

{
"name": "getting-started",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"dependencies": {
"css-loader": "^0.28.7",
"vue": "^2.4.2",
"vue-loader": "^13.0.4",
"vue-resource": "^1.3.3",
"vue-router": "^2.7.0",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.5.5"
}
}

并执行以下操作:

  1. 运行 npm install 以获取所有包。
  2. 运行 npm run-script build 以通过 webpack 生成您的 dist.js 文件。

注意在这个问题的例子中,router 在 app.js 中是未定义的,但是这里有一个固定的文件:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

var router = new VueRouter();

new Vue({
el: '#app',
router,
render: h => h(App),
data: {
message: 'Hello Vue! in About Page'
}
});

应该是吧!如果您有任何问题,请告诉我。

关于asp.net - VueJS 2 + ASP.NET MVC 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46040716/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com