web-dev-qa-db-ja.com

VueJS 2 + ASP.NET MVC 5

私はVueJSが初めてです。 ASP.NET MVC5内に単一ページアプリケーションを構築する必要があります。

私はこのチュートリアルに従い、非常にうまく機能します-> [〜＃〜] tutorial [〜＃〜]

しかし、VueJS2 Routesをテストするために.vueページを作成すると、ブラウザーは「インポート」を理解しません。バベルのようなトランスパイラーを使用する必要があることを読んでいます。

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>

どうもありがとう！！

asp.netasp.net-mvcvue.jsvuejs2router
10
Johnson

Vue.js開発へようこそ！はい、あなたは正しいです。ブラウザが処理できるJavaScriptにimportステートメントを変換するために何かが必要です。最も人気のあるツールは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"
  }
}

そして、次のことを行います。

  1. 実行npm installすべてのパッケージを取得します。
  2. 実行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'
    }
});

それはそれであるはずです！ご質問がある場合はお知らせください。

17
exclsr