11.30

内容回顾：

ref

• 给标签绑定ref属性，获取的是当前DOM对象
• 给组件绑定ref属性，获取的是组件实例对象

this.$parent

this.$root

this.$children

DIR脚手架 cli

前端中的module

A模块依赖B模块

b.js
export const a = 5;
export function add(){}
export default obj

a.js
import * as obj from './b.js'

webpack（前端中工作 项目上线之前 对整个前端项目优化）

• entry 整个项目的程序入口（main.js或index.js）
• output 输出的出口
• loader 加载器 对es6代码的解析 babel-loader, css-loader 解析css文件，style-loader 将css代码添加一个style标签插入header标签中，url-loader
• plugins html-webpack-plugin 丑陋

使用vue-cli

• 1.电脑上 ，linux unix 等 安装nodejs，npm 包管理器

• 2. npm install -g @vue/cli  //安装 是 3.2.1
     

• //安装vue-cli 2版本
  npm install -g @vue/cli-init
  # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
  vue init webpack   my-project  //生成项目
  		模板的名字  项目名字
  

• 先看清除 你当前终端中的根目录是哪个，如果不是my-project,一定要切入到当前目录下，然后再执行npm install

• 运行项目 npm run dev 走了package.json

今日内容

//LuffyContent.vue
<template>
    //当前组件的结构
  <div v-for = 'item in list'>
    //指令系统  数据驱动视图
  </div>
</template>

<script>
   //当前组件的业务逻辑
  export default {
    name:'LuffyContent',//当前组件注册全局组件时，作为 Vue.component()
    data(){
        return {}
	}
  }
</script>

<style scoped>
//当前组件样式
</style>



main.js

warn: propty or methods 'xxxx' not defned

found in

LuffyContent.vue

module not found

模块： npm 社区 下载的模块 npm i vue vue-router -S

import Vue from 'vue'

自己创建的模块 找路径

axios

相当于jquery ajax

官网：https://www.kancloud.cn/yunye/axios/234845

将axios挂载到vue的原型上，那么在各个组件中都能使用，因为面向对象（继承）

vuex **

1.下载npm i vuex -S

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state:{
    num:1,
    questionList:[]
  },
  mutations:{
    setMutaNum(state,val){
      console.log(val)
      state.num+=val
    },
    setMutaAsync:function(state,val){
     state.num+=val
    
    },
    course_questions(state,data){
      state.questionList = data;
     
    }
  },
  actions:{
    setActionNum(context,val){
      //Action 提交的是 mutation，而不是直接变更状态。
      context.commit('setMutaNum',val)
    },
    setActionAsync:function(context,val){
      setTimeout(()=>{
        context.commit('setMutaAsync',val)
      },1)
     
     },
     course_questions(context,courseId){
       //异步  aixos 异步
       Axios.get(`course_questions/?course_id=${courseId}`)
       .then((res)=>{
        console.log(res)
        let data = res.data.data;
        context.commit('course_questions',data)
       })
       .catch((err)=>{
        console.log(err)
       })
     }
  }
})

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})