Vue3.0 项目创建

1.Vue3.0-快速上手

创建 Vue3 的 3 种方式

Vue-CLI
Webpack
Vite

- Webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName
cd projectName
npm install
npm run dev

- Vue-CLI
npm install -g @vue/cli
vue create projectName
cd projectName
vue add vue-next
npm run serve

2.什么是Vite?

Vite 是 Vue 作者开发的一款意图取代 webpack 的工具
其实现原理是利用 ES6 的 import 会发送请求去加载文件的特性
拦截这些请求, 做一些预编译, 省去 webpack 冗长的打包时间

安装Vite
npm install -g create-vite-app
利用Vite创建Vue3项目
create-vite-app projectName
安装依赖运行项目
cd projectName npm install npm run dev

3.Vue3.0兼容Vue2.x

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      msg: "一条数据",
    };
  },
  methods: {
    myFn() {
      alert("www.baidu.com");
    },
  },
};
</script>

4.Vue3.0-Custom Renderer API

Vue2.x 存在的问题

新增一个功能就要在 data 中新增数据, 就要在 methods, computed, watch 中新增业务逻辑
数据和业务逻辑分散了, 不利于管理和维护, 所以 Vue3 中推出了组合 API

<template>
  <div>
    <form>
      <input type="text" v-model="stu.id" />
      <input type="text" v-model="stu.name" />
      <input type="text" v-model="stu.age" />
      <input type="submit" @click="addStu" />
    </form>
    <ul>
      <li v-for="(stu, index) in stus" :key="stu.id" @click="remStu(index)">
        {{ stu.name }} -- {{ stu.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      stus: [
        { id: 1, name: "zs", age: 10 },
        { id: 2, name: "ls", age: 20 },
        { id: 3, name: "ww", age: 30 },
      ],
      stu: {
        id: "",
        name: "",
        age: "",
      },
      // 新增功能1的数据
      // 新增功能2的数据
    };
  },
  methods: {
    remStu(index) {
      this.stus.splice(index, 1);
    },
    addStu(e) {
      e.preventDefault();
      this.stus.push({ ...this.stu });
      this.stu.id = "";
      this.stu.name = "";
      this.stu.age = "";
    },
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
  computed: {
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
  watch: {
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
};
</script>

<style>
</style>