1. 概述

在实际开发过程中，一般不会采用引用单文件的方式开发，采用脚手架vue-cli开发，更加方便，易扩展和维护。本文介绍脚手架vue-cli的安装，以及采用vue-cli的Demo开发 - TodoList。

2. 安装过程

node -v，查看node版本
npm -v，查看npm版本
npm install -g vue-cli , 安装vue-cli 脚手架构建工具

参考：
vue.js 三种方式安装
https://blog.csdn.net/m0_37479246/article/details/78836686

3. 使用介绍

vue init webpack firstApp ，初始化一个vue-cli项目
npm run dev 或者 npm run start ，效果一样，启动了webpeak dev server
对应package.json的scripts配置

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },

单文件组件
使用es6，不再使用es5进行编码 ??

全局样式和局部样式

scoped决定是否是全局或局部，一般情况下，组件都使用局部组件，便于解耦

<style scoped>
  .item {
    color: green;
  }
</style>

TodoList Demo项目源码

Dir Tree

$ tree src/
src/
├── assets
│   └── logo.png
├── components
│   └── TodoItem.vue
├── main.js
├── router
│   └── index.js
└── TodoList.vue

main.js

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

Vue.config.productionTip = false

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

TodoList.vue

<template>
  <div>
    <input class='input' v-model='todo'/>
    <button @click='handleSubmit'>Submit</button>
    <ul>
      <todo-item
        v-for='(item, index) of list'
        :key='index'
        :content='item'
        :index='index'
        @delete='handleDelete'
      ></todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem'

export default {
  components: {
    'todo-item': TodoItem
  },
  data () {
    return {
      todo: '',
      list: []
    }
  },
  methods: {
    handleSubmit () {
      this.list.push(this.todo)
      this.todo = ''
    },
    handleDelete (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style>
  .input {
    color: red;
  }
</style>

./components/TodoItem.vue

<template>
  <li class='item' click='handleClick'>{{content}}</li>
</template>

<script>
export default {
  props: ['content', 'index'],
  methods: {
    handleClick () {
      this.$emit('delete', this.index)
    }
  }
}
</script>

<style scoped>
  .item {
    color: green;
  }
</style>