19_Vue脚手架

19_Vue脚手架

vue-cli

初始化脚手架

第一步（仅第一次执行）: 全局安装@vue/cli

​ npm install -g @vue/cli

第二步 切换到你要创建项目的目录，然后使用命令创建项目

​ vue create xxxx

第三步 启动项目

​ npm run sreve

备注

如出现下载缓慢请配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org

关于不同版本的Vue:
1.vue.js 与vue.runtime.xxx.js的区别;
(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
(2) .vue.runtime.xxx,js是运行版的Vue，只包含:核心功能;没有模板解析器。

​ 2.因为vue,runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

分析脚手架结构

修改默认配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false //关闭语法检查
})

ref属性

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

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc)

3.使用方式:
	打标识:<h1 ref="xxx">...</h1>或<School ref="xxx"></School>
	获取:this.$refs.xxx

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
import School from "./components/School";
export default {
  name: "App",
  components: {
    School,
  },
  data() {
    return {
      msg: "欢迎学习Vue！",
    };
  },
  methods: {
    showDOM() {
      console.log(this.$refs.title);
      console.log(this.$refs.btn);
      console.log(this.$refs.sch);
    },
  },
};
</script>

prop属性

小总结

代码演示

<template>
  <div>
    <h2>{{ msg }}</h2>
    <h2>学生名称:{{ name }}</h2>
    <h2>学生年龄:{{ myAge + 1 }}</h2>
    <button @click="updateAge">点我年龄加1</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "我是泉大的学生",
      myAge: this.age,
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
  //简单接收
  // props:['name','age']

  //接收的同时对数据进行类型限制
  /*  props:{ 
        name:String,
        age:Number
    } */

  //接收的同时对数据进行类型限制+默认值的指定+必要性的限制
  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      default: 99,
    },
  },
};
</script>

mixin属性

功能:可以把多个组件共用的配置提取成一个混入对象
使用方式:
	第一步定义混合J例如:
		{
		data(){....},
		methods:{...}
		....
		}
	第二步使用混入,例如:
		(1).全局混入: vue.mixin(xxx)
		(2).局部混入:mixins: [ ' xxx ']

代码演示

1.定义混合

export const hunhe1 = {
  methods: {
    showName() {
      alert(this.name);
    },
  },
};
export const hunhe2 = {
  data() {
    return {
      x: 100,
      y: 200,
    };
  },
};

2.局部使用 school.vue

<script>
import {hunhe1,hunhe2} from '../mixin'
export default {
  name: "Student",
  data() {
    return {
      name: "尚硅谷",
      address: "北京"
    };
  },
 mixins:[hunhe1,hunhe2]

};
</script>

3.全局使用 main.js

import {hunhe1,hunhe2} from './mixin'

Vue.config.productionTip=false

Vue.mixin(hunhe1)
Vue.mixin(hunhe2)

插件

代码演示

1.定义一个插件

export default {
  install(Vue) {
    // console.log("@@@install",Vue);

    //全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)

    })
  },
};

2.引入插件 main.js

//引入插件
import plugins from './plugins'

Vue.config.productionTip=false
//应用插件
Vue.use(plugins)

3.使用插件 school.vue

<template>
  <div>
    <h2>学校名称:{{ name | mySlice }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "尚硅谷123456",
    };
  },
};
</script>

scoped属性

<style scoped>
	/*
	解决各个Vue中样式名的冲突
	scoped作用域 作用在自己的Vue文件
	*/
</style>