vite項目的創建與配置

使用npm安裝vite

npm init vite@latest

使用yarn創建：

yarn create @vitejs/app  xxx

npm創建：

npm init @vitejs/app  xxx

父子組件傳值：

<script setup lang="ts">
  import tpe from './components/test/index.vue';
  import {ref} from "vue";
  const msg = ref('歡迎學習vite')

  const handChang =(parpms:string)=>{
      console.log(parpms);
  }
</script>

<template>
  <tpe :msg="msg" @on-change="handChang"></tpe>
</template>

子組件：

<template>
    <p>{{props.msg}}</p>
    <button @click="headclick">點我調用父組件</button>
</template>


<script setup lang="ts">
const props = defineProps({
    msg:{
        type:String,
        default:()=>'默認值'
    }
})

const emit = defineEmits(['on-change'])
const headclick = ()=>{
    emit("on-change",'父組件方法被調用了')
}

</script>

 引入vuex配置和使用：

npm install vue@next --save

或者用yarn安裝：

yarn add vue@next --save

 安裝vue-router

npm install vue-router@next

 

npm install vue-router@4

 

************************************************

<template>
  <div>默認的count --{{ state.count }}</div>
  <button @click="increment">增加</button>
</template>


<script setup lang="ts">
import { reactive,computed } from 'vue';
// 定義返回值類型都為數值類型
type DState = {
  count:number;
  double:number;
}
// state:DState 設置返回值類型
const state:DState = reactive({
  count : 0, 
  double : computed(()=>state.count*2)
})
function increment(){
  state.count++;
}

</script>

 安裝element ui和icon

yarn add element-plus

yarn add @element-plus/icons

安裝完成