首
安装
1、安装nodejs（链接），18.0以上版本。
2、在想要创建项目的目录下执行命令
npm create vue@latest按提示创建项目，其中vue router是实现路由功能，pinia实现组件之间共享数据。如果项目需要两个功能建议选择yes。
3、
cd <your-project-name>
npm install
npm run dev启动项目访问所给链接即可。
安装bootstrap
如果创建项目时，部分功能没有选择，之后可手动加入，以bootstrap为例。
项目目录下执行：
npm install bootstrap在main.js中引入：
//import './assets/main.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
pinia和router也像这样引入，如果自定义样式记得删除man.css样式，App.vue中的样式不需要也可以删除。
vue文件结构
创建/src/components/NavBar.vue:
<script setup>
</script>
<template>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</div>
</nav>
</template>
<style scoped>
</style>分为三部分script（js）、template（html）和style（css）。script的setup可以帮用户完成很多东西，也可以不写然后手动设置，详细请看文档。style的scoped是为了让不同vue组件间css样式名称不产生冲突。
在App.vue中引入：
<script setup>
import NavBar from './components/NavBar.vue'
</script>
<template>
<NavBarVue />
<RouterView />
</template>
<style scoped>
</style>
RouterView是每个路由对应的视图。
基础知识
template获取script变量
创建组件/scr/components/TestSon.vue:
<script setup>
const msg = "hello world";
</script>
<template>
<span>{
{ msg }}</span>
</template>
script中定义变量，template使用{ {}}进行获取。
接受父组件参数
修改TestSon.vue：
<script setup>
const pros = defineProps({
msg: {
type: String,
required: true,
}
})
</script>
<template>
<span>{
{ pros.msg }}</span>
</template>
使用defineProps定义组件接受的参数。
创建组件/scr/components/TestParent.vue:
<script setup>
import TestSon from './TestSon.vue';
</script>
<template>
<TestSon msg="123" />
</template><TestSon />是<TestSon></TestSon>的缩写，父组件直接以属性的方式传递参数。
向组件中传递模板
编写组件HomeContent.vue:
<script setup>
import ContentBase from './ContentBase.vue';
</script>
<template>
<ContentBase>
<h1>title</h1>
<p>I have a dream...</p>
</ContentBase>
</template>我们希望有一个类似容器的组件contentbase，容纳当前编写的模板内容。
ContentBase：
<template>
<div class="container">
<div class="card">
<slot />
</div>
</div>
</template>使用slot槽来接受内容，夹在<ContentBase>之间的内容会替换<slot>的位置。
属性绑定
上述例子中父组件传递的参数msg是固定string，我们也可以通过v-bind动态的绑定：
<script setup>
import TestSon from './TestSon.vue';
const msg = "123";
</script>
<template>
<TestSon v-bind:msg="msg" />
</template>也可以简写为：
<TestSon :msg="msg" />条件渲染
<script setup>
const flag = true;
</script>
<template>
<div v-if="flag">
真的
</div>
<div v-else>
假的
</div>
</template>列表渲染
<script setup>
const list = ["alice", "bob"];
</script>
<template>
<div v-for="item in list" :key="item">
{
{ item }}
</div>
</template>需要绑定key，要求每个样例key不同。
事件处理
<script setup>
function say(msg){
alert(msg);
}
</script>
<template>
<button v-on:click="say('hello')">Say hello</button>
</template>可简写：
<button @click="say('hello')">Say hello</button>输入绑定
<script setup>
import { ref } from "vue";
const message = ref();
</script>
<template>
<p>Message is: {
{ message }}</p>
<input v-model="message" placeholder="edit me" />
</template>如果需要在script中使用message的值，需要使用message.value来访问。ref用来声明响应式状态，对于一些复杂类型如object，可以使用reactive代替ref。
访问DOM
<script setup>
import { ref, onMounted } from 'vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="input" />
</template>onMounted会在组件加载完之后调用，只会执行一次，input.value是组件实例。
子组件向父组件抛出事件
父组件TestParent
<script setup>
import TestSon from './TestSon.vue';
const say = () => {
alert("hi");
};
</script>
<template>
<TestSon @parent_event="say" />
</template>子组件TestSon
<script setup>
const emit = defineEmits(["parent_event"]);
emit('parent_event');
</script>
<template>
</template>
也可通过$emit直接抛出
<script setup>
</script>
<template>
<button @click="$emit('parent_event')">emit</button>
</template>
