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

---

theme: scrolls-light

「这是我参与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：项目的根组件

4. vue项目的运行流程

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

1. 1. App.vue用来编写待渲染的模板 1. index.html中需要预留一个el区域

1. 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区域 ```

跋尾

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