图骨南
图骨南

个人笔记|给自己看的使用Vue脚手架

初始化脚手架

看同文集下 搭建vue开发环境

脚手架结构

  • main.js

    整个项目的入口文件

    //引入Vue
import Vue from 'vue'
//引入App组件 即所有组件的父组件
import App from './App'
//引入路由
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象--vm
/* eslint-disable no-new */
new Vue({
    //相当于尾部的（看下面↓）
  el: '#app',
  router,
  components: { App },
  template: ''
})//.$mount('app')

  • index.html

    





<%= htmlwebpackPlugin.options.title %>

render函数

用于不能使用template配置项的情况

  • vue.js 与vue.runtime.xxx.js的区别

    1. vue.js是完整版的Vue,包含:核心功能+模板解析器。
    2. vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器。

  • vue.runtime.xxx.js没有模板解析器

    不能使用template配置项

    需要使用render函数接收到的createElement函数去指定具体内容。

修改默认配置

  • 执行vue inspect > output.js看Vue脚手架的默认配置。

  • 使用vue.config.js可以对脚手架进行个性化定制，详见: https://cli.vuejs.org/zh

ref属性与props配置

ref属性

  • 被用来给元素或子组件注册引用信息（id的替代者)

  • 应用在html标签上获取的是真实DOM元素

    应用在组件标签上是组件实例对象(vc)

  • 使用方式

    • 打标识:

      .....

      或

    • 获取:

      this.$refs.xxx

props配置

  • 功能

    让组件接收外部传过来的数据

    1. 传递数据:

    2. 接收数据:

      • 第一种方式（只接收）

        props: [ 'name ']

      • 第二种方式（限制类型)

        props:{
name :Number
}

      • 第三种方式（限制类型、限制必要性、指定默认值)

        props:{
name:{
type:String，//类型
required:true，//必要性
default:'老王’ //默认值
}
}

  • 备注:

    props是只读的

    Vue底层会监测对props的修改，如果进行了修改,就会发出警告

    若业务需求确实需要修改，那么可复制props的内容到data中一份，然后去修改data中的数据。

mixin混入

混合 = 复用配置

组件里如果有很多相同的配置，可以把相同的配置拎出来单独放，组件想要的时候直接引用就好 以达到高复用率

  • 功能

    可以把多个组件共用的配置提取成一个混入对象

  • 使用方式

    1. 定义混合

      例如

      {
    data(){...},
    methods:{....}
    ....
}

    2. 使用混入

      • 全局混入

        Vue.mixin(xxx)

        全局混入的话要写在main.js文件里，先import，然后调mixin，再然后所有组件就都有这东西了

      • 局部混入

        mixins: ['xxx']

        局部混入的话就哪个组件用哪个组件import，然后在vc里和data同级写一下mixins

插件 - plugins

本质上就是个对象 但是硬性要求必须包含一个install方法

  • 语法

    Vue.use(插件名)

    记得先引入嗷！

  • 功能

    用于增强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
                                          }

scoped样式

如果不同组件里有相同类名 style可能会出现冲突

两条裙子有一模一样的商品名 但一条是短裙一条是连衣裙

但是不要紧！我们js是自上而下执行代码的！就算类名相同style不同 哪个最后执行就用哪个！

那要选哪条呢？哪条最后出现就选哪条

但是template里有标签 script里有引入 那执行顺序要按谁的来捏？Vue脚手架在解析vue文件的时候不看template里先用谁 而是看谁最新被引入

可是有在货架上摆放的先后顺序 有拿衣服的先后顺序 这要怎么算捏？当然是看手里最后拿到的是哪条，而不是看货架

很时髦嗷这个vue

  • 作用

    让样式在局部生效，防止冲突。

  • 写法