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

安装完成