Vue.js VueJS 2 + ASP.NET MVC 5

发布于09月05日

我是VueJS的新手.

I follow this tutorial and works very well -> TUTORIAL

但当我创造一个.vue页面测试VueJS2路由，浏览器不懂"导入"，我读到我必须使用像Babel这样的transpiler，有人知道我是怎么解决的吗？

应用程序.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'
    }
});

_布局.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>

谢谢！！

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

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

{ "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" } }

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' } });

Vue.js VueJS 2 + ASP.NET MVC 5

推荐答案

Vue.js相关问答推荐

为什么元素会从Vue 3中的TransitionGroup左上角出现？

作为props 传递的原始 ref 的 Vue 3 react 性

如何使用 Vite 从公共目录导入 JSON 文件？

如何在 vuejs 中导入和使用本地 .csv 文件

Axios Intercept 在第一次调用时未从 localStorage 应用令牌

无法在 Vuex 中的其他操作中反跳操作

在 jest document.querySelector 中测试 vue 组件期间始终返回 null

Transition-group children must be keyed...but they are keyed

将自定义部分添加到 v-autocomplete 下拉列表

如何在 Node.js 服务器上部署 Vue.js 应用程序

Javascript/vue.js 接收json

如何使用 VueJS / Typescript 导入 JSON 文件？

当 v-for 与对象的属性一起使用时，将 v-model 与复选框一起使用

为什么 v-model 不适用于数组和 v-for 循环？

如何在 Vuex 中获取 Vue 路由参数？

将登录页面包含在单页应用程序中是否不安全？

如何从浏览器的源中删除 webpack：//

VueJS 2 + ASP.NET MVC 5

如何在 vue3 中的setup方法中发出事件？

在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里？