vue-cli的使用(一)

1. 安装

• npm i -g @vue/cli

2. 创建项目

• vue create 项目名称

3. vue项目中src目录的构成

assets 文件夹；存放项目中的静态资源文件，例如：css样式表，图片
components 文件夹：程序员封装的可复用的组件
main: 项目的入口文件，整个项目的执行要先执行main.js
app.vue是项目的根组件

vue 组件

1. vue组件化开发，把可复用的ui结构组件放到.vue后缀文件里
2. vue的三个组成部分

template->组件的模板结构
script->组件的JavaScript行为
style->组件的样式

3. 组件中的data不能是对象，必须是函数

export default {
        data(){
            return{
                username:'zs'
            }
        }
    }

4. 组件中只有一个根元素
5. style中设置lang='less'用其他语法
6. 使用组件的三个步骤

• 使用import语法导入需要的组件

import left from '@/components/left.vue'

• 使用components节点注册组件

components:{
	left
}

• 以标签形式使用刚才注册的组件

<left></left>

7. 组件的props

• props是自定义属性，允许使用者通过自定义属性为当前组件指定初始值
• props中的数据，可以直接在模板结构中被使用
• props中的数据是只读的，不能更改
• props设置默认值 --default;设置传输类型--type;必填项 --required:true

props:{
	init:{
    	default:0,
        type:Number,
        required:true,
    }
}