Joh*_*son 12 asp.net asp.net-mvc router vue.js vuejs2
我对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>
App.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>
非常感谢!!
exc*_*lsr 18
欢迎来到Vue.js开发!是的,你是对的,你需要一些东西将import语句翻译成浏览器可以处理的JavaScript.最流行的工具是webpack和browserify.
您还使用了一个.vue文件,该文件需要在浏览器获取之前进行转换(使用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 ".
现在我们需要安装可以实现这一目标的工具/库.我建议使用Node.js附带的npm .一旦安装了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"
}
}
并执行以下操作:
npm install以获取所有包.npm run-script build以通过webpack生成dist.js文件.请注意,在此问题的示例中,路由器在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'
}
});
那应该是它!如果您有任何疑问,请告诉我.
| 归档时间： |
|
| 查看次数： |
17201 次 |
| 最近记录： |