【Vue.js学习笔记】10：第一个Vue脚手架项目,组件嵌套

接下来Vue的学习尽量在Vue脚手架项目中来学习，而不是像之前那样使用cdn的方式了。

使用treer生成项目结构

使用tree >> tree.txt可以将目录结构（不含文件）导出到名为tree的txt文件中，但是Windows下的tree命令实在太差，竟然没有-I参数来指定要忽略的文件，这里使用treer。用npm全局安装它：

npm install treer -g

安装好后，在项目目录下：

treer -i "node_modules" >> tree.txt

稍做调整即可。

第一个Vue脚手架项目

Vue的项目结构详解不再赘述，在网上有很多写的很好的。这里修改一下根组件App.vue中的内容：

<!--(1)模板:HTML结构.这里用template包起来(不会渲染template)-->
<template>
  <!--有且只能有一个根标签-->
  <div id="app">
    <h2>{{title}}</h2>
  </div>
</template>

<!--(2)行为:处理逻辑-->
<script>
  export default {
    name: 'App',
    //在这里注册导入的组件
    components: {},
    data() {
      return {
        title: "这是data中的title的内容"
      }
    }
  }
</script>

<!--(3)样式-->
<style>
  #app {

  }
</style>

可以看到一个Vue组件是以.vue结尾的文件，其中包括模板、行为、样式三部分。在刚创建好的项目中，这个根组件会去调用一个HelloWorld组件来实现整个页面，这里将这部分调用删掉了。

使用npm run dev运行一下，在页面上可以看到：
在这里插入图片描述

组件嵌套

Users.vue

在components组件目录下创建这样一个新的组件。

<template>
  <!--class名字用组件名全小写-->
  <div class="users">
    <ul>
      <li v-for="user in users">{{user}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Users",
    data() {
      return {
        users: ["lzh1", "lzh2", "lzh3"]
      }
    }
  }
</script>

<style scoped>

</style>

App.vue

当使用局部注册组件时，在要导入它的组件（这里就是根组件）里将它导入并注册，然后用标签的形式使用即可。

<!--(1)模板:HTML结构.这里用template包起来(不会渲染template)-->
<template>
  <!--有且只能有一个根标签-->
  <div id="app">
    <h2>{{title}}</h2>
    <users></users>
  </div>
</template>

<!--(2)行为:处理逻辑-->
<script>
  //导入要用的其它组件
  import Users from './components/Users'

  export default {
    name: 'App',
    //在这里注册局部导入的组件
    components: {
      // "users": Users
      //可以省略掉前面的"users",则组件的标签默认就是其小写形式
      Users
    },
    data() {
      return {
        title: "这是data中的title的内容"
      }
    }
  }
</script>

<!--(3)样式-->
<style>
  #app {

  }
</style>

运行结果

在这里插入图片描述

全局注册组件

另外一种方式（用的很少）是将要使用的组件注册为全局的，这要在main.js中注册，见下面第5行和第11行：

// 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 Users from './components/Users'

Vue.config.productionTip = false;

//注册全局的Vue组件
//当调用<users/>这样的标签时就会执行导入的Users组件
Vue.component("users", Users);

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

// index.html -> Vue.js -> App.vue

当以这种方式将组件注册为全局了以后，在使用时就不需要再将其导入和注册了，只要直接使用这个组件的标签就可以了。

注意组件标签不要冲突，也不要和HTML本身的标签有冲突，组件标签一般用组件名的全小写。