02_使用Vite搭建Vue3项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了02_使用Vite搭建Vue3项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先插件添加：Live Server、Vue - Official、Vue VSCode Snippets、别名路径跳转

官网：Vite | 下一代的前端工具链 (vitejs.dev)

1.创建一个文件夹VueApp，运行cmd转到该目录下，执行命令：npm create vite@latest

02_使用Vite搭建Vue3项目

2.然后转到vuedemo目录下命令：cd vuedemo，

3.执行命令：npm install。文件夹内会新添加node_modules文件夹和package-lock.json文件。

npm会根据项目根目录下的package.json文件中的dependencies和devDependencies字段来安装所需的包。这些包将被下载并安装到项目的node_modules目录中。

4.运行该项目：npm run dev

5.修改项目：

删除\vuedemo\src\style.css文件。

删除\vuedemo\src\components\HelloWorld.vue文件。

\vuedemo\src\main.js内的 “import './style.css” 删除掉。

\vuedemo\src\App.vue内的 script template style内的东西都删除掉

文章来源地址https://www.toymoban.com/news/detail-844577.html

6.修改Vue内容模板路径：C:\Users\Lua\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets\vue.json

app.vue

<script setup>
import {reactive } from 'vue'
const web=reactive({
  show:true
});
const toggle=()=>web.show=!web.show;
</script>

<template>
<h3>{{web.show}}</h3>
<p v-show="web.show">Hello....</p>
<button @click="toggle">切换</button>
</template>

<style  scoped>
</style>

运行：npm run dev

导入组件

在线components文件内创建header.vue，footer.vue两个文件

app.vue

<script setup>
import Header from './components/header.vue';
import Footer from './components/footer.vue';
</script>

<template>
<Header/>
<hr/>
<Footer/>
</template>

<style  scoped>
</style>

Header和Footer必须为大写

父传子 defineProps

app.vue是父组件,因为它包含了header.vue和footer.vue两个子组件

1.通过数组方式传递

app.vue

<script setup>
import Header from './components/header.vue';
import Footer from './components/footer.vue';
</script>

<template>
<Header PName="张三" Page="24"/>
<hr/>
<Footer/>

</template>

<style  scoped>
</style>

header.vue

<script setup>
    const user=defineProps(["PName","Page"]);
    console.log(user);
</script>

<template>
Hello
</template>

<style  scoped>
</style>

2.通过对象方式传递

app.vue

<script setup>
import Header from './components/header.vue';
import Footer from './components/footer.vue';
const Pdata={
  name:"李四",
  age:25
}
</script>

<template>
<Header PName="张三" Page="24"/>
<hr/>
<Footer v-bind="Pdata"/>

</template>

<style  scoped>
</style>

footer.vue

<script setup>
/*
const Pdata=defineProps({
    name:String,
    age:Number
});
*/
const Pdata=defineProps({
    name:String,
    age:{
        type:Number,
        required:false,////true表示必传属性,若未传则会提示警告信息
        default:26  ////未传默认值
    }
});

console.log(Pdata);
</script>

<template>
你好.....
</template>

<style  scoped>
</style>

3.传递响应式数据

app.vue

<script setup>
import { reactive } from 'vue'
import Header from './components/header.vue';
import Footer from './components/footer.vue';
const Pdata=reactive({
  name:"李四",
  age:26,
  id:1
});

const AddAge=()=>{
  Pdata.id++;
  console.log(Pdata.id)
}

</script>

<template>
<Header PName="张三" Page="24"/>
<hr/>
<button @click="AddAge">ID自增</button>
<br/>
<Footer v-bind="Pdata"/>

</template>

<style  scoped>
</style>

footer.vue

<script setup>
const Pdata=defineProps({
    name:String,
    age:{
        type:Number,
        required:false,////true表示必传属性,若未传则会提示警告信息
        default:26  ////未传默认值
    },
    id:Number
});
console.log(Pdata);
</script>

<template>
<h3>fooooooooooooooooooter</h3>
age:{{ Pdata.id }}
</template>

<style  scoped>
</style>

子传父 defineEmits

header.vue

<script setup>
    //子传父
    const dateuser=defineEmits(["getuser"]);
    dateuser("getuser",{name:"王五",age:33});
</script>

<template>
Hello
</template>

<style  scoped>
</style>

app.vue

<script setup>
import { reactive } from 'vue'
import Header from './components/header.vue';
import Footer from './components/footer.vue';

const getuserinfo=(data)=>{
  console.log("-------子传父----------")
  console.log(data);
}

</script>

<template>
<Header  @getuser="getuserinfo"/>
<hr/>
<button @click="AddAge">ID自增</button>
<br/>
<Footer />

</template>

<style  scoped>
</style>

传递事件

header.vue

<script setup>
    //子传父
    const dateuser=defineEmits(["getuser","useradd"]);
    dateuser("getuser",{name:"王五",age:33});

    const add=()=>dateuser("useradd",10);
</script>

<template>
<button @click="add">添加用户</button>
</template>

<style  scoped>
</style>

app.vue

<script setup>
import { reactive } from 'vue'
import Header from './components/header.vue';

const getuserinfo=(data)=>{
  console.log("-------子传父111----------")
  console.log(data);
}

const getuseradd=(data)=>{
  console.log("-------子传父222----------")
  console.log(data);
}

</script>

<template>
<Header PName="张三" Page="24" 
 @getuser="getuserinfo" @useradd="getuseradd"/>
<hr/>
</template>

<style  scoped>
</style>