Vue脚手架的基本使用

1.脚手架全局安装：

（1）cmd检查脚手架版本

 npm view @vue/cli versions

（2）cmd安装指定版本的脚手架：

npm install @vue/cli@4 -g

2.创建一个脚手架：

cmd控制台切换到指定的目录命令：

vue create 项目名

然后cd到项目里运行：

npm run serve

3.结构：

运行完npm run serve后，生成代码文件：  

     

4.修改默认配置：

vue inspect > output.js

生成output.js文件看默认配置：

vue.config.js文件可对脚手架属性精选修改：

可在 配置参考 | Vue CLI 进行选择参考

5.ref属性：

vue用来绑定dom元素:

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

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>

6.props属性：

APP.vue父类：

  <Student name=”李四” sex=”女” :age=”18”/>

 子类Student.vue：

<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// props:['name','age','sex'] 

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

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

7.minin混合属性：

添加minin.js文件

 minin文件：

export const hunhe = {
  methods: {
    showName(){
      alert(this.name)
    }
  },
  mounted() {
    console.log('你好啊！')
  },
}
export const hunhe2 = {
  data() {
    return {
      x:100,
      y:200
    }
  },
}

 vue文件引入：

//引入一个hunhe
   import {hunhe,hunhe2} from '../mixin'

  export default {
    name:'School',
    data() {
      return {
        name:'学校名',
        address:'河南',
        x:666
      }
    },
  mixins:[hunhe,hunhe2],
  }

8.plugin插件：

建立plugin.js文件：

export default {
  	install(Vue,x,y,z){
  		console.log(x,y,z)
  		//全局过滤器
  		Vue.filter('mySlice',function(value){
  			return value.slice(0,4)
  		})
  
  		//定义全局指令
  		Vue.directive('fbind',{
  			//指令与元素成功绑定时（一上来）
  			bind(element,binding){
  				element.value = binding.value
  			},
  			//指令所在元素被插入页面时
  			inserted(element,binding){
  				element.focus()
  			},
  			//指令所在的模板被重新解析时
  			update(element,binding){
  				element.value = binding.value
  			}
  		})
  
  		//定义混入
  		Vue.mixin({
  			data() {
  				return {
  					x:100,
  					y:200
  				}
  			},
  		})
  
  		//给Vue原型上添加一个方法（vm和vc就都能用了）
  		Vue.prototype.hello = ()=>{alert('你好啊')}
  	}
  }