「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」。

单页面应用程序(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：项目的根组件

vue项目的运行流程

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

1. App.vue用来编写待渲染的模板
2. index.html中需要预留一个el区域
1. 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区域

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖

🤟🏼 冇事来学系--Vue2.0中vue-cli使用