单页面应用程序(Single Page Application)

一个web网站只有一个HTML页面，所有的功能与交互都在这一个页面上完成

vue-cli是啥？

cli ---> command line interface 命令行接口工具

vue-cli是Vue.js开发的标准工具。它简化了基于webpack创建工程化的Vue项目的过程

// 下载 vue-cli：
npm install -g @vue/cli

vue-cli的使用

1.  在终端下运行以下的命令，创建指定名称的项目 (要先进入到想保存项目文件的文件夹之下)

vue create 项目的名称

运行命令后，选择 Manually select features ，手动选择要安装哪些功能

2.  运行项目

cd 项目名称
npm run serve

先进入项目的目录，然后run运行package.json里面的serve脚本

3.  vue项目中src目录的构成

• assets文件夹：存放项目中用到的静态源文件，如：css样式表、图片等
• components文件夹：封装的、可复用的组件都放要放到components目录下
• main.js：项目的入口文件。整个项目的运行，要先执行main.js
• App.vue：项目的根组件

4. vue项目的运行流程

在vue-cli创建的工程化项目中，vue 通过main.js 把 App.vue 渲染到 index.html的指定区域中。其中：

1. App.vue用来编写待渲染的模板
2. index.html中需要预留一个el区域
3. main.js把App.vue渲染到了index.html所预留的区域中(替换掉了预留的区域)

上面的两例代码中：

• render函数渲染谁，就是用谁去替换HTML页面中的 '#app' 区域
  
• render函数渲染的是哪个.vue组件，这个组件就叫做根组件
  
• 使用el属性来指定vue的控制区域 和 使用Vue实例的$mount方法的作用一样
  

// render函数原本的写法：
render: function(createElement){
  return createElement('要渲染的标签', '标签的内容')
}
// 简写：
render: (createElement)=>{
  return createElement('要渲染的标签', '标签的内容')
}
render: createElement => createElement('要渲染的标签', '标签的内容')
// 用一个单词h代替createElement
render: h => h('要渲染的标签', '标签的内容')
// render函数渲染谁，就是用谁去替换HTML页面中的 '#app' 区域(el)
render: h => h(Test)    // 用Test组件去替换HTML页面中的el区域