3.使用Vue脚手架

一、初始化脚手架

1.说明

脚手架（Vue CLI）一般会用最新版本，Vue技术可以选择合适版本,并非要一一对应。

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

2.具体步骤

npm install -g @vue/cli
vue create xxx
npm run serve

• 安装好脚手架，再输入vue，该命令可以执行

• 进入项目文件夹，创建项目

• 进入创建好的项目目录，然后启动项目

点击Ctrl+C可以停止项目

二、分析脚手架结构

1.目录

• babel.config.js

  babel的控制文件

1. package.json / package-lock.json

   包说明书 / 包版本控制文件：锁定版本和下载地址等，保证下次下载总能下载到指定版本

2. README.md

   对整个项目的说明，功能介绍

3. src文件夹

• main.js

  执行完npm run serve 之后就执行main.js

或者这样挂载

• App.vue

• assets

  存放静态资源

• components

  存放组件

4. public文件夹

• favicon.ico

  网站页签图标

• index.html

2.render函数

引入的时候，缺乏模板解析器

所以不能配置template，借助render函数配置具体内容，Vue帮我们调用该函数。

参数createElement是function，用于创建具体元素，编写具体内容。

其中'h1'是指html的标签元素。

简洁版写法：

代码写完由webpack打包的时候，已经把.vue都转换成.js文件的，不需要再有模板解析器。所以vue提供了运行时vue（runtime）给用户引入。

3.修改默认配置

vue脚手架把配置文件都隐藏起来了

不让更改的东西

通过vue.config.js修改配置 配置参考 | Vue CLI (vuejs.org)

4.ref属性

• 原生获取DOM元素的方式

• ref方式获取DOM元素或者组件实例对象

• 总结

5.props配置

实现了同一组件不同数据

• 简单接收

• 接收的同时对数据进行类型限制

• 限定接收数据的的必要性或默认值 （default和required不会同时出现）

注意：

1.props传过来的值一般不能改

2.props传过来的值优先级高，vc首先准备传过来的值，再有data中的数据

总结：

6.mixin混入（合）

问题：两个组件的功能基本一致，通过mixin进行复用

步骤：

• 创建一个.js文件

不仅可以配置方法，也可以配置数据

• 引入混合文件并配置mixins选项

局部混入

全局混入

总结：

注意：

如果混合和组件自身的data数据重复，以data自身的为准； 如果混合和组件自身都有生命周期钩子函数，结果是全都存在，且混合的优先级更高。

7.插件

vue插件的本质就是对象

• 创建.js文件

• 引入插件并使用

测试

总结：

8.scoped样式

所有的样式最后都是混合在一起的，如果有多个相同类名会冲突，并以 后引入的组件为主进行覆盖。

添加scoped以后

注意：

1. App.vue文件一般不加scoped

9.查看所有版本并安装指定版本号

查看webpack版本号

npm view webpack versions

查看less-loader的版本

npm view less-loader versions

安装指定版本的less-loader

三、浏览器本地存储

统称为webStorage

1.localStorage

1. 保存数据

如果第二个参数存储的不是string类型，会自动调用toString方法

2. 读取数据

3. 删除数据

4. 清空数据

用户人为清空、或借助api删除则数据清空

2.sessionStorage

浏览器关闭则数据清空

3.总结

四、$nextTick