使用vite创建vue3项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

或者 yarn：

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev　　　

运行完成后会得到一个如下结构的文件

 在该文件夹下执行 npm run dev

 

  会得到如图所示地址，在启动时可以明显的感觉到项目的启动速度非常快，基本做到秒开，输入地址得到如下页面

 

 在 packafe.json 中可以看到采用的是 vite 启动方法，同时 vue 版本是 3.0.4，说明这个项目是基于 vue3.0 的

 

 在main.js 中可以看到采用了 createApp 函数来挂载整个实例，这里和 vue2.0 是不同的

 

 

 至此，我们就可以在这个项目中编写 vue3.0 代码了，这里附上一个小 Demo，此Demo中用到了computed,onMounted,onUnmounted,reactive,ref,toRefs,watch,

 

 

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>{{ counter }}</p>
  <p>{{ doubleCounter }}</p>
  <button @click="clearTimer">暂停计时器</button>
  <p ref="tagP">11</p>
</template>

<script>
import {
  computed,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
export default {
  props: ["msg"],
  setup() {
    // ref 只能声明普通值类型
    const count = ref(0);

    // 声明定时器
    let timer = ref(null);

    // 解构 toRefs 后的数据不会丢失响应式
    const { counter, doubleCounter } = useCounter(timer);

    // 获取元素
    const tagP = useTagp(counter);

    // 暂停方法
    const clearTimer = () => {
      useClearTime(timer);
    };

    return {
      count,
      counter,
      doubleCounter,
      clearTimer,
      tagP,
    };
  },
};

// 计算属性
function useCounter(timer) {
  // reactive 声明引用类型
  const data = reactive({
    counter: 1,
    doubleCounter: computed(() => data.counter * 2),
  });

  // 页面加载触发
  onMounted(() => {
    timer.value = setInterval(() => {
      data.counter++;
    }, 1000);
  });

  // 页面销毁
  onUnmounted(() => {
    clearInterval(timer.value);
  });

  // 使用 toRefs 可以将 reactive 类型 装换为 ref 单个值类型，并且解构不会丢失响应式
  return toRefs(data);
}

// 获取页面元素并且改变值
function useTagp(counter) {
  const tagP = ref(null);
  watch(counter, (val, oldVal) => {
    tagP.value.innerHTML = `from ${oldVal} to ${val}`;
  });
  return tagP;
}

// 清除定时器
function useClearTime(timer) {
  clearInterval(timer.value);
}
</script>