项目的搭建

最新推荐文章于 2024-11-02 08:58:20 发布

不点外卖

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量101

点赞数

分类专栏： Vite2+Vue3+Electron19项目文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43484007/article/details/127152327

版权

Vite2+Vue3+Electron19项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vite创建项目

项目初始化

npm init vite

输入项目名称
在这里插入图片描述
选择项目所用框架。我这里选择vue

我这里选择js

项目创建成功

安装依赖

npm install

在这里插入图片描述
项目运行

npm run dev

看到这个页面就说明项目搭建成功
在这里插入图片描述

vue3的基本使用

<script setup>
import { ref } from "vue";
const textVal = ref("");
const radioVal = ref("man");
const textAreaVal = ref("");
const checkBox = ref([]);
const selectVal = ref("001");
const selectArr = ref([]);
</script>

<template>
  <div>
    <h3>输入框</h3>
    <p>{{ textVal }}</p>
    <input type="text" v-model="textVal" />
  </div>
  <div>
    <h3>单选按钮</h3>
    <p>{{ radioVal }}</p>
    <input type="radio" value="man" v-model="radioVal" />男
    <input type="radio" value="woman" v-model="radioVal" />女
  </div>
  <div>
    <h3>textArea</h3>
    <p>{{ textAreaVal }}</p>
    <textarea v-model="textAreaVal"></textarea>
  </div>
  <div>
    <h3>多选框</h3>
    <p>{{ checkBox }}</p>
    <input type="checkbox" value="教育" v-model="checkBox" />教育
    <input type="checkbox" value="运动" v-model="checkBox" />运动
    <input type="checkbox" value="休息" v-model="checkBox" />休息
  </div>
  <div>
    <h3>下拉框单选</h3>
    <p>{{ selectVal }}</p>
    <select v-model="selectVal">
      <option value="001">广州</option>
      <option value="002">深圳</option>
      <option value="003">佛山</option>
    </select>
  </div>
  <div>
    <h3>下拉框多选</h3>
    <p>{{ selectArr }}</p>
    <select v-model="selectArr" multiple>
      <option value="001">广州</option>
      <option value="002">深圳</option>
      <option value="003">佛山</option>
    </select>
  </div>
</template>

<style scoped></style>

在这里插入图片描述

父子组件的通信

父组件

<script setup>
import { ref } from "vue";
import Child from "./Child.vue";
const msg = ref("父组件的值");
const changeMsg = (val) => {
  msg.value = val[0];
};
</script>

<template>
  <div>
    父组件{{ msg }}
    <Child :msg="msg" @changeMsg="changeMsg"></Child>
  </div>
</template>

<template>
  <div>
    {{ msg }}
    <input type="text" v-model="textVal" />
    <button @click="handleMsg()">点击</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 父传子
defineProps({
  msg: String,
});
//子传父
const emit = defineEmits(["changeMsg"]);
const textVal = ref("");
const handleMsg = () => emit("changeMsg", [textVal, 1, "hehe"]);
</script>