Vue起步

这篇文章首先会从使用vue-cli搭建项目开始（别担心，我们只做初步了解不会深入使用），为的是让初学者能够更快理解，这样实际上手就会让你有一个大致概念。在开始学习Vue之前，需要的前置知识有：HTML基础标签、CSS基本语法、Javascript语法（熟练掌握）、命令行基础。

搭建环境

vue-cli官方文档为我们提供了两种全局安装vue-cli的方式，选择哪种取决于你使用的是npm还是yarn，需要注意的是随着时间的推移，版本不同可能功能上会有细微差别，所以一切以官方文档为准。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装好了vue-cli之后就可以使用vue命令创建新项目

vue create my-project //项目的名称

这时候会询问我们是使用默认选项还是自定义配置，当然对于初学者来说不需要eslint配置，所以我们选择 Manually select features

我们会看到多个提供给我们的选项，这里只选择第一个babel（空格切换选中取消）

然后询问你是将配置放在一个一个单独的文件里面In dedicated config files还是全部写在package.json文件里面In package.json，这里我们选择package.json

最后会询问你是否将此次配置设为默认配置，当然是no

配置完成后就会开始安装了，之后会提示两个命令让你启动项目

$ cd my-project
$ npm run serve

vue项目启动完成

文件目录

我们再来看看vue项目的文件目录，有哪些需要我们理解的文件

直接看src目录，这里是所有开发代码存放的位置。。。。。。

单页面组件

我们的App.vue文件，Vue官网称它为组件，单页面的意思是结构，样式，逻辑代码都写在同一个文件中，当我们引入这个文件后，就相当于引入对应的结构、样式和JS代码。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </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>

并且node端之所以能识别.vue文件，是因为webpack在编译时将.vue文件中的html，js，css都抽出来合成新的单独的文件。关于webpack的原理不在此赘述。

所以我们的文件大致分为三部分<template><script><style>分别对应着结构、脚本、样式。这样就成功搭建了一个Vue项目，之后深入你就需要去查看详细的官方文档。