说明

​​《Vue开发实战-从0开始搭建大型Vue项目》​​​是 ​​Ant Design Vue​​ 的作者在极客时间开的一门视频课，笔者记录一下学习笔记，仅供参考。

Vue.component 缺点

• 全局定义：强制要求每个​​component​​ 中的命名不得重复
• 字符串模板：缺乏语法高亮，在​​html​​​ 有多行的时候，需要用到丑陋的​​\​​
• 不支持css：意味着当​​html​​​ 和​​JavaScript​​​​组件化时，css​​ 明显被遗漏
• 没有构建步骤：限制只能使用​​html​​​ 和​​ES5 JavaScript​​​，而不能使用预处理器，如​​Pug（formerly Jade）​​​和​​Bable​​

单文件组件 优点

• 完整语法高亮
• CommonJS 模块
• 组件作用域的CSS

Vue CLI

可以通过 Vue CLI 搭建项目

npm install -g @vue/cli

vue create my-app

cd my-app

npm install

npm

通过上面的操作，我们可以开始进行单文件.vue的开发。

单文件vue

大致的模板就是下面这个样子

<!-- 视图 -->
<template>
  <div id="app"></div>
</template>

<!-- 逻辑 -->
<script>export default {
  name: 'app',
  data() {
    return {

    }
  }
}</script>

<!-- 样式 -->
<style>#app{
    color: green;
}</style>

todolist改造成vue文件

• ​​App.vue​​：父组件
• ​​TodoItem.vue​​​：子组件，在​​App.vue​​​ 同级​​components​​ 文件夹里

App.vue

<template>
  <div id="app">
        {{msg}}
        <div>
            <input type="text" v-model="info">
            <button v-on:click="handleClick">添加</button>
        </div>
        <ul>
            <todo-item v-for="item in list" :key="item">
              <template v-slot:item="itemProps">
                <span :style="{fontSize: '20px', color: itemProps.checked ? 'red': 'blue'}">{{item}}</span>
              </template>
            </todo-item>
        </ul>
    </div>
</template>

<script>import TodoItem from './components/TodoItem.vue'
export default {
  name: 'app',
  data() {
    return {
        msg: 'hello Vue!',
        info: '',
        list: [],
    }
  },
  methods: {
    handleClick() {
        this.list.push(this.info)
        this.info = ''
    }
  },
  components: {
    TodoItem,
  }
}</script>

<style>

</style>

TodoItem.vue

<template>
  <li class="item">
    <input type="checkbox" v-model="checked">
    <slot name="item" v-bind="{checked}"></slot>
  </li>
</template>

<script>export default {
  props: ['item'],
  data() {
    return {
      checked: false
    }
  }
}</script>

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