Vue脚手架
第一步 (仅第一步执行) 全局安装@vue/cli
npm install -g @vue/cli
安装制定版本
npm install -g @vue/cli@4.5.14
卸载vue/cli
npm uninstall @vue/cli
注意
@vue/cli 五版本的和四版本的有区别 五版本的 《vue create 项目名》 命令执行不了 执行不了 必须卸载 安装 四版本的
第二部 切换到你要创建项目的目录 然后使用命令创建项目
vue create 项目名
第三步启动项目
npm run serve
备注
1.如出现下载缓慢请配置npm淘宝镜像
npm config set registry https://registry.npm.taobao.org
2.Vue脚手架隐藏了所有webpack相关的配置 若想看具体的webpack配置
请执行 vue inspect > output.js
3.安装less-loder
npm i less-loader@7 //版本7
vue2中main.js文件解析
//引入vue
import Vue from 'vue' 该文件是整个项目的入口文件
//引入App组件 他是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建vue实例对象--vm
new Vue({
render: h => h(App),
}).$mount('#app')
ref属性
被用来给元素或子组件注册引用信息(id的替代者)
应用在html标签上获取的是真实DOM元素 应在组件标签上的是组件实例对象
应用方式
<h1 ref="xxx"></h1> 或 <School ref="xxx"></School>
获取this.$refs.xxx
props传参
传递参数
<Student name='李四' sex='男' :age='18'/>
<Student name='王五' sex='男' :age='100'/>
接收参数
props 外部传过来的数据不能修改
props是只读的 Vue底层会检测你对props的修改 如果进行了修改就会发出警告
若业务需求确实需要更改 那么请复制props的内容到data中一份,然后修改data中的数据
<Student name='王五' sex='男' /> //传递参数
props:['name','sex','age'] //接收参数
myAge:this.age //data中的数据
<h2>学生年龄{{myAge+1}}</h2> //修改data中的数据
只接收
props:['name','sex','age'] //简单声明接收
限制类型
props:{ //接受的同时 对数据进行类型限制
name:String,
age:Number,
sex:String
}
大型项目都是使用第三种
限制类型 限制必要性 指定默认值
props:{ //接受的同时对数据 进行类型限制 + 默认值的指定 + 必要性的限制
name:{
type:String,//name的类型是字符串
required:true//name是必要的
} ,
age:{
type:Number,
default:99 //默认值
},
sex:{
type:String,//name的类型是字符串
required:true//name是必要的
}}