前端学习 Vue CLI（脚手架）笔记

备注：因为对之前脚手架部分的笔记不太满意，所以打算过阵子在这里另开一份。阅读时直接从新版本开始即可

---

旧版本

3.1 vue-cli脚手架

• index.html中建立id为app的模板（不用修改）

<div id="app"></div>

• main.js引入App.vue，并将它挂载到index.html的模板上（不用修改）

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

• App.vue中引入编写的vue子组件（RoyalNavy、IronBlood是我编写的子组件，可以按自己的项目更改）

<template>
  <div id="app">
    <RoyalNavy></RoyalNavy>
    <IronBlood></IronBlood>
  </div>
</template>

<script>
import RoyalNavy from './components/RoyalNavy.vue'
import IronBlood from './components/IronBlood.vue'

export default {
  name: 'App',
  components: {
    RoyalNavy,
    IronBlood
  }
}
</script>

• 编写子组件

<template>
    <div>
        <h2>阵营：{{ camp }}</h2>
        <h2>旗舰：{{ flagship }}</h2>
    </div>
</template>

<script>
export default {
    name: 'RoyalNavy',
    data() {
        return {
            camp: '皇家',
            flagship: '伊丽莎白女王'
        }
    }
}
</script>

3.2 Render函数

1. vue.js是完整版的vue.runtime.xxx.js，包含核心+模板解析器
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要用render函数接收createElement函数去制定具体内容

3.3 ref属性

3.4 props配置

3.5 mixin混入

功能：可以把多个组件的共同配置提取成共同的混入对象

1. 在src目录配置xxx.js文件存放mixin

   export const mixin1 = {
       methods: {
           button() {
             alert(this.cname);
           },
         },
   }
   

2. 使用混入

   1. 全局混入：在main.js中使用

      import Vue from 'vue'
      import App from './App.vue'
      import { mixin1 } from "./mixin";
      
      // 全局混合
      Vue.mixin(mixin1)
      

   2. 局部混入：在子组件xxx.vue中使用

      <script>
      import { mixin } from "../mixin";
      export default {
        name: "",
        data() {
          return {
      
          };
        },
        mixins: [mixin],
      };
      </script>
      

3.6 scoped样式

作用：让样式仅对子组件生效

写法：在对应子组件下写上

<style scoped>

---

新版本