vue脚手架

一、脚⼿架

1.介绍

• vue脚⼿架是vue官⽅提供的标准化开发⼯具（开发平台）
• 最新的版本是4.x
• ⽂档：https://cli.vuejs.org/zh/

2.使⽤步骤

• 第⼀步（仅第⼀次执⾏）：全局安装@vue/cli

npm install -g @vue/cli

• 第⼆步：切换到你要创建项⽬的⽬录，然后使⽤命令创建项⽬

vue create xxx

• 第三步：启动项⽬(⾸先得进⼊你创建的项⽬)

dir xxx

npm run serve

---

二、脚⼿架结构分析

• node_modules 第三⽅依赖包
• public
•  favicon.ico:⻚签图标
•  index.html:主⻚⾯
• src
•  assets:存放静态资源
•  logo.png
•  component:存放组件
•  HelloWorld.vue
•  App.vue:汇总所有组件
•  main.js:⼊⼝⽂件
• .gitignore:git版本控制忽略配置
• babel.config.js:babel的配置⽂件
• package.json:应⽤包配置⽂件
• README.md：应⽤描述⽂件
• Package-lock.json:包版本控制⽂件

---

三、关于不同版本的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函数去指定具体内容

---

四、ref属性

1.被⽤来给元素或⼦组件注册引⽤信息（id的替代者）

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

3.使⽤⽅式：

打标识：

获取：this.$refs.xxx

---

五、配置项props

1.功能：让组件接收外部传过来的数据

1）传递数据：

2）接收数据

•  第⼀种⽅式（只接收）：

 props:['name']

•  第⼆种⽅式（接收并且限制类型）

 props:{

 name:Number

 }

•  第三种⽅式（限制类型、限制必要性、指定默认值）

 props:{

 name:{

 type:String, //类型

 required:true,//必要性

 default:'⽼王' //默认值

 }

 }

注意：props是只读的，如果你进⾏了修改，就会发出警告