准备工作
在开始之前，确保您的环境满足以下条件：
安装了最新版本的 Node.js (推荐使用 Node Version Manager, nvm, 来管理不同版本的 Node)
安装了 npm (Node.js 自带的包管理器)
您可以在命令行中输入 node -v 和 npm -v 来检查它们的版本。
安装 Vue CLI
Vue CLI 是一个官方发布的脚手架工具，可以帮助我们快速生成 Vue 项目结构。在终端中运行以下命令来全局安装它：
npm install -g @vue/cli # 或者使用 yarnyarn global add @vue/cli
安装完成后，您可以通过 vue --version 来确认其安装成功。
创建 Vue 项目
使用 Vue CLI 创建一个新的 Vue 项目非常简单。打开您的终端，运行以下命令：
vue create my-vue-app
这里的 my-vue-app 是您应用的名称，您可以根据喜好进行修改。
接着，CLI 会提示您选择预设配置。对于初学者，推荐选择 "Manually select features" 以便自定义配置。您可以使用方向键选择，然后按回车键确认。
接下来，选择需要的功能，比如 Babel、Router、Vuex 等。对于入门项目，建议至少勾选 "Babel" 和 "Linter / Formatter"。选择完毕后，CLI 将自动为您安装相关依赖并创建项目。
项目结构
您会看到以下目录结构：
node_modules/- 项目的依赖库public/- 公共资源文件夹，包含index.htmlsrc/- 源代码文件夹，我们将在这里编写 Vue 代码assets/- 资源如样式、图片等components/- Vue 组件文件夹App.vue- 主组件文件main.js- 入口文件
编写第一个组件
在 src/components/ 目录下创建一个名为 HelloWorld.vue 的新文件，并写入以下内容：
<template>
<div>
<h1>{
{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: '欢迎来到 Vue.js!'
}
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>这里，我们定义了一个名为 message 的数据属性，并在模板中使用插值将其显示出来。scoped 样式表示这些样式只作用于当前组件。
在 App 组件中使用它
接下来，打开 src/App.vue 文件，并用以下内容替换其内容：
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>这里，我们导入了刚刚创建的 HelloWorld 组件并将其注册到 App 组件的 components 对象中。然后在模板中使用 <HelloWorld /> 标签来实例化它。
启动开发服务器
现在，我们可以启动开发服务器来预览我们的应用了。在终端中运行以下命令：
npm run serve # 或者使用 yarnyarn serve
一旦服务器启动成功，打开浏览器并访问 http://localhost:8080。你应该能看到页面上显示着 "欢迎来到 Vue.js!"。
