Vue CLi是什么？来自官方的介绍：
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过
@vue/cli搭建交互式的项目脚手架。通过
@vue/cli+@vue/cli-service-global快速开始零配置原型开发。一个运行时依赖 (
@vue/cli-service)，该依赖：可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
言简意赅的说，vue cli就是一套帮助开发者使用vue框架的命令行工具。
相比较于vue-cli2.X,@vue/cli 3.X 在经过项目初始化之后目录结构简化了很多：
在没有使用脚手架开发过程中，我们使用CDN或类CDN 方式加载VUE。在进行更复杂开发过程中，显然是不合适的。于是，我们需要将VUE开发模块化组件化。
在VUE的项目中，一个.vue文件就是一个组件。拆分的组件低耦合，方便扩展与维护。SFC单文件组件规范如下：
<!-- HTML模板部分 在一个.vue文件中有且只有一个 -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- 引入子组件 并传递父组件的值给子组件 -->
<HelloWorld msg="Welcome to Your Vue.js App" :title="title" :frontEnd="frontEnd"/>
</div>
</template><!-- 2.业务逻辑行为部分 主要是本组件选项设置部分 同样也是有且仅有一个 -->.
<script>
//导入子组件模块
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
//注册子组件
components: {
HelloWorld
},
data(){
return {
title:"我的第一个Vue demo!",
frontEnd:[
{name:"html"},
{name:"css"},
{name:"javascript"}
]
}
}
}
</script>
<!-- CSS样式部分，可以有多个 -->
<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>
