一，vue的简单介绍
1. vue的官网地址 - https://cn.vuejs.org
2. 什么是vue？
vue是一套用于构建数据驱动用户界面的渐进式框架(js库)。Vue是建立于 Angular和React的基础之上，基于MVVM设计模式,保留了Angular和React的优点并添加了自己的独特成分，让框架的使用变得更加简单。
3. vue的特点：
轻量：Vue库的体积非常小的，并且不依赖其他基础库。
数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令：内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化：Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
二，脚手架搭建项目
基于node环境
1.全局安装脚手架 - yarn global add @vue/cli / npm i @vue/cli -g
卸载命令- npm uninstall -g @vue/cli
2.检查是否安装完成 (查看版本号)- vue --version
3.进行项目创建- vue create 项目名 (注意项目名不能大写)
4.进入项目- cd 项目名
5.项目启动 - yarn serve
vue项目的目录页具体详解
node_modules // 依赖的第三方模块
public // vue服务器静态文件目录，只有唯一的一个index.html
src // 我们的开发目录，最重要的目录，源文件（我们写的代码）目录
二级目录
assets // 静态资源 css img font
components // 组件,是.vue的文件,主要是公用的小组件
views // 页面级别的组件
App.vue // 整个应用的顶级组件.
main.js // 入口文件
.gitignore // git忽略列表
babel.config.js // es6编译配置
package-lock.json // 包描述文件（记录更详细，记住当时的版本信息）
package.json // 包描述文件
README.md // 说明文档
三，组件
1.单文件组件
理解： 都是以vue结尾的文件
组成： 三部分
<template>
<div></div>//所有标签只能有一个父级标签
</template>
<script>
//默认暴露对象
export default{}
</script>
<style lang="less" scoped>
//scoped - 样式只能在当前文件使用 -局部作用域
</style>
2.单文件的使用
(1)引入组件 import 组件名 from '组件路径'
(2)注册子组件
export default {
components:{
组件名,
组件名
}
}
(3)使用： <组件名/>
template>
<div id="app">
<Hello>用子</Hello>
</div>
</template>
<script>
//引子
import Hello from './components/Hello.vue'
export default {
components: {
Hello //注子
}
}
</script>