如颖随行|「Vue 入门系列」第一期，新手快速入门指南，初识 Vue( 四 ) 引言Vue是JavaScript开发人员非常喜欢

我们把关注点放到 Vue 本身，后期的文章会讲解每一个选项的作用，所以这里面只选择第一项和第二项，按空格键选中（或取消），然后按回车键。
选择第一项和第二项
版本选择 2.x，按回车键继续安装。
选择 2.x
还有两个步骤，综合到一张图显示，按照标红框的选择和输入，按回车键，等待安装完成。
等待安装完成
安装完成后，进入项目目录，然后输入 npm run serve，项目就跑起来了，此时，可以打开浏览器，输入 http://localhost:8080，看一下运行效果。
// 进入项目目录C:\code\vue>cd vue-demo// 运行项目C:\code\vue\vue-demo>npm run serve// 看到下面的信息，代表项目跑起来了// 可以在浏览器的地址栏中输入 http://localhost:8080 预览项目 DONECompiled successfully in 1789ms App running at: - Local:http://localhost:8080/ - Network:Note that the development build is not optimized. To create a production build, run npm run build.
浏览器预览
现在，基于 Vue CLI 搭建的项目环境已经准备好了，如果您使用的是 Visual Studio Code，那么请安装上 Vetur 插件，它可以让 Vue 语法高亮。
我们将使用 Chrome 浏览器进行 Vue 项目的预览与调试。这就需要在 Chrome 上安装 Vue DevTools 这个开发者工具，它可以显示 Vue 组件的状态、方法等。
Vue DevTools
初识项目结构一切准备就绪后，可以将整个 vue-demo 项目文件夹拖入到 Visual Studio Code 中，查看项目结构。
VS CODE 中的项目
在项目结构中，有一个包含 index.html 的 public 文件夹和一个以 main.js 为入口点的 src 文件夹。
public 文件夹不需要经常操作，而 src 文件夹，则是开发过程中主要用到的目录。
项目的源代码和一些资源都会保存在 src 文件下。
其中， assets 文件夹保存项目用到的图片资源以及一些全局 CSS 文件。
components 文件夹会存放我们自己开发的组件。可以看到， Vue CLI 帮我们创建了一个 HelloWorld.vue 的组件。
入口文件 main.js在 main.js 入口文件开头，引入了 Vue，并将 App.vue 这个组件渲染到了 public/index.html 上的 id 为 app 的容器中。
import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),}).$mount('#app').vue 文件在 Vue 中，编写的组件会以 .vue 为扩展名，一个组件就是一个 .vue 文件。您可以仔细观察 src/components/HelloWorld.vue 文件。组件总是由三部分组成：