Vuejs脚手架十三

import Vue from 'vue'
import App from './App.vue'
//设置vue生产环境
Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: {
    App
  },
  render: h => h(App)
})

• CLI： command line interface；
• main.js中的render：
  • 在脚手架中，引入的vue是一个残缺版的vue，所以没有模板解析器，vue内部的render函数就可以解决这个问题；语法render(createElement) {}参数是一个函数，可以用于创建一个元素，createElement(‘元素标签名’，‘标签里面的内容’)就不用模板解析器去解析元素了；render函数需要返回参数函数的调用；
  • vue中包含vue核心和模板解析器，脚手架中引入的vue是没有模板解析器的，vue将模板解析器与核心分离，是为了当vue项目打包的时候，可以使模板解析器不用参与打包占用内存；

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
     
    },
  },
  // 语法检查
  lintOnSave: false
}

• 修改默认配置项：脚手架中会有一个隐藏的配置，不让人改动，所以可以通过创建vue.config.ja来覆盖掉隐藏的位置，这样只有不需要删掉就好了；
• 语法检查：可以在配置文件中使用lintOnSave: false；来关闭语法检查；

// app Vue组件
<template>
  <div>
    <h2 v-text="msg" ref="title"></h2>
    <button @click="showInfo">输出h2</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
import  School from './components/School.vue'
export default {
name: 'App',
components: {
  School
},
data() {
  return {
    msg: '欢饮来到我的世界'
  }
},
methods: {
  showInfo() {
    console.log(this);
    console.log(this.$refs.title);
    console.log(this.$refs.sch);
  }
}
}
</script>

• 标签属性:ref：在标签上使用ref属性标记标签元素，然后可以通过组件实例中的$refs中就可以获取到标记的标签，这相当于原生js中获取元素的步骤；组件实例中的 $refs可以以key：value的形式存储标签中有ref属性的元素，key为ref属性的值：value为被标记的标签元素；
• 如果在组件标签中使用ref标记，则它的值就是该组件的完整实例对象，如果使用原生js的id获取组件标签，则获取的是该组件的template模板；