第三章：使用Vue脚手架

第三章：使用Vue脚手架
第三章：使用Vue脚手架

 3.1：初始化脚手架
- 说明：脚手架是Vue官方提供的标准化开发工具(开发平台)
- 具体步骤
  1. (仅第一次执行)：全局安装@vue/cli。
    
    npm install -g @vue/cli
    1
  2. 切换到要创建项目的目录，然后使用命令创建项目。
    
    vue create 项目名
    1
  3. 启动项目。
    
    npm run server
    1
- 模板项目的结构
```
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
- 关于不同版本的Vue
  1. vue.js与vue.runtime.xxx.js的区别
    vue.js是完整版的Vue。包含：核心功能 + 模板解析器。
    vue.runtime.xxx.js是运行班的Vue，只包含：核心功能，没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数收到的createElement函数去指定具体内容。
- vue.config配置文件
  1. 使用vue inspect > output可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制。
3.2：ref与props
- ref属性
  1. 被用来给元素或子元素组件注册引用信息(id的替代者)
  2. 应用在html标签上获取的是真实的DOM，应用在组件标签上是组件实例对象(vc)。
  3. 使用方式
    打标识：...或
    获取：this.$refs.xxx
- props配置项
  1. 功能：让组件接收外部传过来的数据。
  2. 传递数据：
  3. 接收数据
    
    第一种中方式：只接收
    
    props: ["name", "sex", "age"]
    1
    
    第二种方式：限制类型
    
    props: { name: String, sex: String, age: Number, }
    1
    2
    3
    4
    5
    
    第三种方式：限制类型、限制必要性、指定默认值
    
    props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }
    1
    2
    3
    4
    5
    6
    7
  4. 注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需要确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
3.3：混入
- 功能
  
  可以把多个组件共用的配置提取成一个混入对象
- 使用方式
  1. 第一步定义混合：
    
    { data() {....}, methods: {....}, .... }
    1
    2
    3
    4
    5
  2. 第二部使用混合：
    
    全局混入：Vue.mixin(xxx)
    
    局部混入：mixins: [ xxx ]
3.4：插件
- 功能：用于增强Vue
- 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
- 定义插件：
```
对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)
    // 2. 添加全局指令
    Vue.directive(....)
    // 3. 配置全局混入(合)
    Vue.mixin(....)
    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
1
2
3
4
5
6
7
8
9
10
11
```
- 使用插件：Vue.use( xxx )
- scoped样式
  1. 作用：让样式标签局部生效，防止冲突。
  2. 写法：

第三章：使用Vue脚手架

3.1：初始化脚手架

3.2：ref与props

...

3.3：混入

3.4：插件