web-dev-qa-db-ja.com

.vue拡張コンポーネントとwebpackなしでvue.jsアプリケーションを作成できますか？

注：現在のようなコードにコンパイラを使用せずにvue.jsの大きなアプリケーションを作成できますか？

vue.js拡張機能を使用せずにwebpackなしで.vueアプリケーションを作成したい。出来ますか？可能であれば、リンクを提供するか、その場合のルーティングの使用方法のサンプルを提供してください。

.vue拡張機能でコンポーネントを作成すると、.js拡張機能でコンポーネントを作成し、angular 1のようにアプリケーションを使用できます。コードを変換するコンパイラ。

これはhtml、css、jsファイルのみで実行でき、webpackのようなものはありません。

私がしたこと 。 index.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vueapp01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js webpackのロード時に追加されたこのファイル

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a href="#/hello">Hello route</a>
    <a href="#/">Helloworld route</a>
    {{route}}
    <router-view/>
     <!-- <hello></hello> -->
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      route : "This is main page"
    }
  }

}
</script>

ルーター

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '../components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

このようなことをしました。コードをコンパイルするために、webpackではなく、html、css、jsファイルだけでこれを行うことができますか？ angular 1。

ありがとう

vue.jsvuejs2vue-componentvue-router
16
Himanshu sharma

このjsFiddleで述べられているように、 http://jsfiddle.net/posva/wtpuevc6/ 、webpackまたは.vueファイルを使用する義務はありません。

以下のコードは私からのものではなく、すべてのクレジットはこのjsFiddle作成者に送られます：

index.htmlファイルを作成します：

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="/js/Home.js"></script>
<script src="/js/Foo.js"></script>
<script src="/js/router.js"></script>
<script src="/js/index.js"></script>

<div id="app">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>

Home.js

const Home = { template: '<div>Home</div>' }

Foo.js

const Foo = { template: '<div>Foo</div>' }

router.js

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

index.js

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

フレームワークを評価してください...

補足事項：.vueファイルは本当に素晴らしいです。使用しないことが要件でない場合は、必ず試してみてください

12
Hammerbot

私もvue.jsの学習を開始しましたが、webpackなどに詳しくないので、管理とコードのクリーン化を図るため、.vueファイルを分離して使用したかったのです。

私はこのライブラリを見つけました： https://github.com/FranckFreiburger/http-vue-loader

およびそれを使用するサンプルプロジェクト： https://github.com/kafkaca/vue-without-webpack

私はそれを使用していますが、うまくいくようです。

9
yeahman

完全にできますが、多くの欠点があります。たとえば、SassやLessなどのプリプロセッサを簡単に使用することはできません。またはTypeScriptまたはBabelでソースコードをトランスパイルします。

古いブラウザのサポートが必要ない場合は、ES6モジュールを今すぐ使用できます。ほとんどすべてのブラウザーがサポートしています。 ES6-Module を参照してください。しかし、Firefoxは dynamyc import（） をサポートしていません。 Firefox 66（Nightly）のみがサポートしており、有効にする必要があります。それだけでは不十分な場合、Webアプリケーションのインデックスは作成されません。 SEOにとっては悪いことです。たとえば、GooglebotはJavascriptコードをクロールおよびインデックス付けできますが、 まだ古いChrome 41 をレンダリングに使用しており、そのバージョンはES6モジュールをサポートしていません。

それがあなたにとって不利な点でなければ、これを行うことができます：

1-Vue、VueRouterなどの30パーティライブラリのインポートを削除します。スクリプトタグを使用して、それらをindex.htmlファイルに含めます。すべてのグローバル変数は、すべてのes6モジュールでアクセス可能です。たとえば、main.jsおよびすべての.vueファイルから次の行を削除します。

import Vue from 'vue';

そして、index.htmlに次の行を追加します。

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

2-すべての.vueファイルを書き換え、ファイル拡張子を.jsに変更します。たとえば、次のように書き換えます。

<template>
    <div id="home-page">
        {{msg}}
    </div>
</template>
<script>
    export default {
        data: function() {
            return { msg: 'Put home page content here' };
        }
    }
</script>
<style>
    #home-page {
        color: blue;
    }
</style>

このようなものに：

let isMounted = false; /* Prevent duplicated styles in head tag */

export default {
    template: `
        <div id="home-page"> /* Put an "id" or "class" attribute to the root element of the component. Its important for styling. You can not use "scoped" atribute because there isnt a style tag. */
            {{msg}}
        </div>
    `,
    mounted: function () {
        if (!isMounted) {
            let styleElem = document.createElement('style');
            styleElem.textContent = `
                #home-page {
                    color: blue;
                }
            `;
            document.head.appendChild(styleElem);
            isMounted = true;
        }
    },
    data: function () {
        return {
            msg: 'Put home page content here'
        };
    }
}

3-すべてです。 このリンク に例を入れます

追伸構文を強調せずにテキストを編集すると、イライラすることがあります。 Visual Studio Codeを使用する場合は、 テンプレートリテラルエディター 拡張機能をインストールできます。構文を強調してリテラル文字列を編集できます。スタイルの場合はCSS構文を選択し、テンプレートの場合はHTML構文を選択します。 HTMLの不明なタグは、さまざまに強調表示されます。これを解決するには、カラーテーマを変更します。たとえば、 Brackets Dark Pro カラーテーマまたは任意のテーマをインストールします。

よろしく！

3
Pedro Urday

確かにできます。 Vueでプロジェクトを行いましたが、.vueファイルのコンパイル中にいくつかの問題が発生しました。そこで、3つの個別のファイルを持つ構造に切り替えました。

ただし、webpackが必要なことに注意してください。 Vueのアイデアは、巨大なプロジェクトをコンポーネントに分割することでした。したがって、.jsファイル内のテンプレートを使用するのはごく普通のことです。だから見てください

html-loader そして css-loader

これらのモジュールを使用すると、次のように記述できます。

component.js

// For importing `css`. Read more in documentation above 
import './component.css'

// For importing `html`. Read more in documentation above
const templateHtml =  require('./component.html')

export default {
  name: 'ComponentName',
  components: { /* your components */ },
  mixins: [/* your mixins */ ],
  template: templateHtml,
  computed: .....
}

component.css

#header {
  color: red
}

component.html

<div id="header"></div>

[〜＃〜] but [〜＃〜]

HTMLファイルは、templateプロパティで使用するのと同じ方法で記述する必要があることを知っておく必要があります。

また、このレポを見てみましょう。ここで何か役に立つことがあります

Vue-html-loader 。 Vueコアチームによるhtml-loaderからの分岐です。

1
Yevhenii Herasymchuk