VueCli的一些简单案例

NavBar .vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">{{title}}</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
        aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavId">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li v-for="(item, index) in items" :key="index" class="nav-item">
          <a class="nav-link" href="#">{{item}}</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">关于</a>
          <div class="dropdown-menu" aria-labelledby="dropdownId">
            <a class="dropdown-item" href="#">Action 1</a>
            <a class="dropdown-item" href="#">Action 2</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
      </form>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      title: '组件化',
      items: ['vue cli', 'vue router', 'vuex', 'nuxt']
    }
  },
}
</script>

<style lang="css">
</style>

---

List.vue

<template>
  <ul class="list-group mt-2">
    <li
      v-for="(item, index) in langs" :key="index"
      class="list-group-item d-flex justify-content-between align-items-center">
      {{item}}
      <span class="badge badge-danger badge-pill">{{index}}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      //
    }
  },
  // 从组件外部传递进来
  props: {
    langs: [],
  }
}
</script>

<style lang="css">
</style>

---

Card.vue

<template>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">{{info.name}}</h4>
      <p class="card-text h3 text-danger">{{info.hot}}</p>
      <button
        @click="add"
        type="button" 
        class="btn btn-primary btn-lg btn-block">+</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    info: Object
  },
  methods: {
    add: function() {
      this.info.hot++;
    }
  }
}
</script>

<style lang="css">
</style>

---

App.vue

<template>
  <div class="container">
    <!-- 导航栏 -->
    <NavBar />

    <!-- 列表: 传递了一个数组 -->
    <List :langs="skills" />

    <div class="row mt-3">
      <!-- 多个卡片 -->
      <div
        v-for="(item, index) in cardData" :key="index"
        class="col-lg-4 col-sm-13 my-3">
        <!-- 组件位于循环中 -->
        <Card :info="item" />
      </div>
    </div>
    
  </div>
</template>

<script>
// 导入
import NavBar from './components/NavBar.vue';
import List from './components/List.vue';
import Card from './components/Card.vue';

export default {
  name: 'App',
  components: {
    NavBar,
    List,
    Card
  },
  data() {
    return {
      skills: ['ECMA Script', 'TypeScript', 'Sass', 'Java'],
      cardData: [
        {
          name: 'Go',
          hot: 9
        },
        {
          name: 'Rust',
          hot: 8
        },
        {
          name: 'Kotlin',
          hot: 10
        },
        {
          name: 'TypeScipt',
          hot: 10
        }
      ]
    }
  },
}
</script>

<style>
</style>

---

启动服务后，如图所示：

---

扩展：

 关于运行删除了 node_modules 的工程： 进入工程，先执行 npm install (安装删除了的 node 模块), 然后再执行 npm run serve 就可以了