持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
前言
在前面教程中我们通过CDN的方式引入vue@next资源库，把Vue暴露在window全局中以使用，在本教程中，我们通过vue-cli教授架的方式从零创建一个vue app。
搭建开发环境
为能使用vue-cli，我们首先需要搭建node环境。从官网下载node并安装，安装完node之后，我们即可在终端使用npm命令：
npm -v
安装完node之后，我们通过命令全局安装vue-cli：
npm install -g @vue/cli
安装成功之后，则可以使用vue命令：
vue -V
vue-cli创建app
在终端输入命令创建一个modal-app项目：
vue create modal-app
运行之后进入上图的选择界面，我们使用键盘上下键选择最后一项，手动选择创建的项目特性。enter之后进入下图选择界面：
我们通过空格键取消「Linter / formatter」项的选中态，这一项的作用是为项目生成代码校验和格式化的配置，目前我们不需要。enter之后我们进入下一个vue版本选择界面：
我们选择3.x版本即可，进入配置文件选择界面：
我们选择选项一，把babel、eslint等配置生成专有配置文件:
在最后一个询问：是否保存为未来项目的预设操作，我们选择否！
执行完之后vue-cli就开始创建项目并安装相关依赖了，我们等待其安装成功：
按照指引进入modal-app目录，并运行命令启动项目：
Vue文件&模板
我们找到src/main.js文件：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
其中引用了App.vue文件，这个就是vue项目文件，每一个.vue文件都是一个vue组件。template标签下包含了两个并列的跟节点，这与vue2所不同。删除App.vue文件内容变更为：
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: 'App',
data() {
return {
title: 'Hello, Vue App!',
}
}
}
</script>
name字段定义了该组件的名字，也可以不定义，保存后即可看到效果：
template refs
如何在vue组件中获取dom元素？
<template>
<h1>{{ title }}</h1>
<input type="text" ref="name" />
<button @click="handleClick">获取</button>
</template>
<script>
export default {
name: 'App',
data() {
return {
title: 'Hello, Vue App :)',
}
},
methods: {
handleClick() {
console.log(this.$refs.name)
this.$refs.name.focus()
},
},
}
</script>
我们通过在dom上绑定
ref属性，再利用vue内置的refs属性即可获取对应的dom节点，之后就可以对其进行dom相关的操作了。
组件
在项目components目录新增Modal.vue文件：
<template>
<div class="backdrop">
<div class="modal">
<p>modal content</p>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
}
</script>
<!-- 添加scoped属性使样式仅在组件内生效 -->
<style scoped>
.backdrop {
position: fixed;
top: 0px;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
.modal {
width: 400px;
padding: 20px;
margin: 100px auto;
background: white;
border-radius: 10px;
}
</style>
我们在style标签添加样式时设置了scope属性，限制所定义的样式仅在本组件内生效，vue会在每一个定义的样式上追加一个唯一的随机ID串。
Modal组件定义好之后便可在App.vue中引用：
<template>
<h1>{{ title }}</h1>
<Modal />
</template>
<script>
import Modal from './components/Modal.vue'
export default {
name: 'App',
components: { Modal },
data() {
return {
title: 'Hello, Vue App :)',
}
},
}
</script>
