Vueが単一ファイルのコンポーネントを使用して開発、およびCLI足場

欠点道Vue.componentグローバル登録コンポーネント

グローバルコンポーネントは非常に便利な定義Vue.componentが、それはわずかなプロジェクトをすることができ、それが得られ、いくつかの固有の欠陥を持って、あなたは完全な強さVueのフレームワークを再生することはできません。

これは、世界的なカスタムが管理するコンポーネントの数がかつてより困難、唯一のグローバルコンポーネントの名前が必要です。
それは、複雑なテンプレートを書くためにあまりにも多くの問題を構文強調表示するエディタをサポートするための方法はありません。
これは、CSS、外部で定義されたスタイルのコンポーネント、影響を受けるコンポーネントの利用効率の必要性をサポートしていません。
これは、動的に構築をサポートしていない、前処理および熱負荷を使用することはできません。

Vueの単一ファイルのアセンブリ・ソリューションおよびインストールするには、その環境とのconfigure

Vueのフレームワークは、単一のファイルコンポーネント.vueソリューションサフィックスを得ました。
だから、どのように利用できるのVueの利便性を楽しむ人たちのものに.vue単一ファイル拡張子のコンポーネントを使用するには？

まず、あなたはこのフレームワークをインストールすることで、Node.jsのフレームワークをインストールする必要があり、我々は、NPMのように自動化ツール、もちろん、NPMの独自の糸の代わりとしてインストールするのシリーズを得ることができます。しかし、Node.jsのは、インストールされているはずです。
インストールNode.jsの後、我々は経由NPM VUE足場command.-GはVUEグローバルユーザーをインストールするために足場を指しインストールされています。

npm install -g @vue/cli

インストールが完了したら、インストールが成功したとVUE VUE versionコマンドでインストールされ見ることができます

vue --version

フィギュア

次に、我々は、createコマンドの新しいフロントエンドエンジニアリングVUEのVUEを作成することができます。そして、デフォルトのモードを選択します。足場は、自動的にプロジェクトのニーズにすべての依存をインストールします

vue create vue-demo

ユーザーが作成されます完了後ヴュー・デモプロジェクトは、現在のユーザーのフォルダに存在します。私たちは、私たちは基本的なファイルを作成し、さらには私たちのためにローカルのgitを作成するための足場の多くを見ることができます。
図：
ディレクトリのフォルダにcdによってコンソールで、その後、NPMまたは糸コマンドでプロジェクトを開始します。推奨糸道。

npm run serve

若しくは

yarn serve

7.この時点で、あなたはVUE-デモがAを作成しましたアクセスすることができます

シングルは、既存のコンポーネントの変換を文書化

さらなる研究のために、そして、我々が最適化されていなければならないとのToDoリストやTODO項目コンポーネントVueが単一ファイル成分に変換、およびアクセスの形でフロントエンドのフレームワークを使用します。

打开vue-demo前端项目的入口文件main.js，这个文件中定义了vue的根节点名称。

new Vue({
  render: h => h(App),
}).$mount('#app')

起到的作用类似于

var vm = new Vue({
        el: "#app",
        /.../
        })

render:h=>h(App)代表入口组件是App.vue,我们需要在App.vue引入并注册todo-list和todo-item组件。
App.vue默认引用并注册了一个叫HelloWorld的组件。从这个示例证明，要想在App.vue中引入我们自己的组件，我们先要为这两个组件创建自己的单文件.vue文件。
按照约定，我们在components文件夹在创建两个vue后缀文件。
首先是todo-item.vue。通过观察helloWorld.vue,我们可以发现，一个vue文件是由三大块组成的。

template用来放置模板，相当于现有组件中的template标签。
script用来放置组件的数据（data），方法（methods）,属性（props）
style是原有组件中不予支持的样式表

<template>
    
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

按照这个结构，我们需要将原有todo-item组件下的template部分，放置到template标签中

template: `
              <li>
                  <slot name="pretext" :val="vrandom"></slot>
                  <span v-if="!del">{{title}}</span>
                  <span v-else style="text-decoration:line-through">{{title}}</span>
                  <button v-show="!del" @click="handleClick">删除</button>
                  <slot name="suftext">默认尾部</slot>
              </li>`,

变为

<template>
    <li>
        <slot name="pretext" :val="vrandom"></slot>
        <span v-if="!del">{{title}}</span>
        <span v-else style="text-decoration:line-through">{{title}}</span>
        <button v-show="!del" @click="handleClick">删除</button>
        <slot name="suftext">默认尾部</slot>
    </li>
</template>

将原组件中的props,data,methods放置到script标签中。

<script>
export default {
    props: {
          title: String,
          del: {
            type: Boolean,
            default: false
          }
        },
    data: function() {
          return {
              vrandom:Math.random()
          };
        },
    methods: {
            handleClick(){
                console.log("点击删除按钮！");
                this.$emit('delete',this.title);
            }
        }
}
</script>

同理，我们创建todo-list.vue

<template>
    <ul>
        <slot></slot>
    </ul>
</template>
<script>
export default {
    data: function() {
          return {
            
          };
        },
    methods:{
            
    }
}
</script>
<style scoped>

</style>

9.在App.vue将todo-item.vue和todo-list.vue引入并注册.

<script>
import todolist from './components/todo-list.vue'
import todoitem from './components/todo-item.vue'

export default {
  name: 'App',
  components: {
    todolist,
    todoitem
  }
}
</script>

我们注册了todolist和todoitem，我们需要在App.vue中使用它。要使用这两个组件，我们需要准备相应的数据。将原new Vue中的data数据和methods方法移到App.vue中。
App.vue的完整script如下

<script>
import todolist from './components/todo-list.vue'
import todoitem from './components/todo-item.vue'

export default {
  name: 'App',
  components: {
    todolist,
    todoitem
  },
  data(){
    return{
      list: [
              {
                title: "新课程1",
                del: false
              },
              {
                title: "新课程2",
                del: true
              },
              {
                title: "新课程3",
                del: false
              }
            ]
    };
  },
  methods: {
    handleDelete(vtitle){
      console.log("删除工程！",vtitle)
    }
  }
}
</script>

最后将原页面中html代码，即使用todo-list和todo-item组件的html移至App.vue中。

<template>
  <div id="app">
    <todolist>
      <todoitem v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
      </todoitem>
    </todolist>
  </div>
</template>

此时有两个细节需要处理：

v-for 后面需要动态绑定Key关键字。
コンポーネント名、コンポーネント名の登録と一致するように使用されます。当社は、事前組み立てtodoitemと呼ばれてきたが、我々はtodoitemのためのこの登録コンポーネントの登録、その後、同じトークンの時に、私たちは協会の名前を使用する必要があります。それ以外の場合は、エラーとして報告されます。

完了後、図の効果。

これまでのところ、我々はその後、二つの成分を単一のファイルの変換を完了しました。今すぐ登録App.vueにコンポーネントがtodolistのとtodoitemはローカルスコープされ、汚染および他のコンポーネントと競合しません。

だから、我々はあなたが行うことができますどのようにグローバルtodolistの中で登録したい場合は？
我々は唯一でtodolistのを紹介してVue.componentによってmain.jsに登録する必要があります。

import todolist from './components/todolist.vue'

Vue.component("todolist", todolist);

その

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

Vue.component("todolist", todolist);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

しかし、あまり一般的に登録された世界的なコンポーネントをお勧めします。

使用スタイル単一ファイルアセンブリ

我々はコンテンツを持っているシングルファイルアセンブリに使用されていない：、私たちは、スタイル、独自のスタイル要素のスタイルを定義し、このパターンは唯一の他の部品を汚染することなく、自分で動作することを保証することができます。
次のように言葉を選びました：

<style scoped>
    .redsapn{color: red}
</style>

用のタグを書き込むことによって、ユニークなハッシュ値を生成し、Vueのフレームワークは、ユニークなスタイルであることが保証私たちのスタイル、だろう。
例えば、我々は、アセンブリのコンポーネント上記todoitem、および使用テンプレートにスタイルを追加します。

<template>
    <li>
        <slot name="pretext" :val="vrandom"></slot>
        <span class="redsapn" v-if="!del">{{title}}</span>
        <span v-else style="text-decoration:line-through">{{title}}</span>
        <button v-show="!del" @click="handleClick">删除</button>
        <slot name="suftext">默认尾部</slot>
    </li>
</template>

次のような結果の実装は次のようになります。