【vite】vue3+ts极简教程（vite 的应用）

一、依次执行以下四步，即可极速创建项目

1. npm init @vitejs/app my-vite-vue
2. cd my-vite-vue
3. npm install
4. npm run dev

vite指令后，可以选择创建的不同框架的脚手架。比如：React vue 等。

二、通过两种不同方式编写简单组件与方法，推荐方式一，编码高效

App.vue

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
 
<template>
  <HelloWorld msg="唤醒VUE3.X" />
</template>

HelloWorld.vue

<!-- 方式一 script setup -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
 
defineProps<{ msg: string }>()
 
const count = ref(0)
 
const double = ref(0)
 
// 普通方法
const addcount = () => {
  count.value++
}
let alertMsg = () => {
  alert(count.value)
}
 
// 监听方法
watch(count, (item) => {
  double.value = item * 2
})
 
// 计算属性字符反转
const message = 'abcd'
const reversedMessage = computed(() => {
  return message.split('').reverse().join('')
})
</script>
 
<template>
  <!-- 样式绑定 -->
  <h1 :style="{ color: count > 3 ? 'red' : 'blue' }">{{ msg }}</h1>
  <button type="button" @click="addcount">count is: {{ count }}</button>
  <button type="button" @click="alertMsg">alert</button>
  <p>{{ double }}</p>
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</template>
 
<!-- 方式二 export setup -->
<!-- <script lang="ts">
import { computed, ref, watch } from 'vue'
export default {
  props: {
    msg: String,
  },
  setup(props: any) {
    const msg = props.msg
    const count = ref(0)
 
    const double = ref(0)
 
    // 普通方法
    const addcount = () => {
      count.value++
    }
    let alertMsg = () => {
      alert(count.value)
    }
 
    // 监听方法
    watch(count, (item) => {
      double.value = item * 2
    })
 
    // 计算属性字符反转
    const message = 'abcd'
    const reversedMessage = computed(() => {
      return message.split('').reverse().join('')
    })
    return {
      count,
      message,
      addcount,
      alertMsg,
      reversedMessage,
    }
  },
}
</script> -->