使用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>