Vue developed using single-file components, and CLI scaffolding

Shortcoming way Vue.component global registration component

Global components Vue.component define very convenient, but it has several inherent flaws, resulting in it can only be a small project, you can not play a full strength Vue framework.

It is a global custom requires the name of the only global components, the number of components once more difficult to manage.
It is no way to support syntax highlighting editor, too much trouble to write complex template.
It does not support CSS, the need for efficiency in the use of externally defined style components, the affected component.
It does not support dynamically constructed, can not use the pre-treatment and thermal loading.

Vue single-file assembly solutions and its environment to install and configure

Vue framework obtained solution suffix .vue single file component.
So how to use .vue single file suffix components to those of us who enjoy the convenience of Vue available to it?

First, you need to install node.js framework by installing this framework, we can get a series of automated tools such as npm, of course, also be installed as an alternative to their own yarn of npm. But node.js is sure to be installed.
After installation node.js, we installed via npm vue scaffold command.-G refers to the scaffolding to install vue global users.

npm install -g @vue/cli

After the installation is complete, you can view the installation was successful and installed by vue vue version command

vue --version

Figure

Next, we can create a new front-end engineering vue vue of the create command. And select the default mode. Scaffolding will then automatically install all dependent on project needs

vue create vue-demo

Vue-demo project after completion will create a user exists in the current user folder. We can see a lot of scaffolding to help us create the underlying file, or even create a local git for us.
Figure:
In the console by cd into the directory folder, and then start the project by npm or yarn command. Recommended yarn way.

npm run serve

yarn serve

7. At this point you can access vue-demo has created a

Single documented the transformation of existing components

In order to further study, then, as we should have been optimized todo-list and todo-item components Vue transformed into a single-file components, and use the front-end framework in the form of access.

打开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关键字。
Component name used to be consistent with the component name registration. Our pre-assembly has been called todoitem, but we will at the time of this registration component registration for todoitem, then the same token we need to use the name of the association. Otherwise it will be reported as an error.

After completion, the effect of FIG.

So far, we have completed the transformation of a single file, then two components. Register Now to App.vue components todolist and todoitem are local scope, does not pollute and conflicts with other components.

So, if we want to register in the global todolist how you can do?
We only need to introduce todolist in and register to main.js by Vue.component.

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

Vue.component("todolist", todolist);

which is

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

But less is generally recommended registered global components.

Use style single-file assembly

Single-file assemblies we have a content has not been used: style, we can define the style of your own style components, and ensure that this pattern will only work on their own without contaminating other components.
Worded as follows:

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

Generate a unique hash value by writing scoped tags, Vue framework would be our style, guaranteed to be unique style.
For example, we add style to todoitem above components, and use template assembly:

<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>

Implementation of the results is as follows: