脚手架(VUE CIL)

目录

好处：

使用步骤：

组件化开发

普通组件注册使用

全局组件注册使用

组件三大组成成分注意点

---

vue cil是VUE官方提供的全局命令工具，可以快速帮我们创建一个开发VUE的标准化基础架子

好处：

内置babel等工具，零配置，标准化webpack配置

使用步骤：

1.全局安装:yarn global add @vue/cil 或者npm i @vue/cil -g

2.查看vue版本:vue --version

3.创建项目架子:vue create project-name(项目名不能使用中文名称)

4.启动项目：yarn serve或者npm run serve（命令与package.json中对应，不固定）

创建项目之后产生一个项目文件夹，打开该文件夹包括

其中，index.html是模板文件

APP.vue是APP根组件（编写：项目运行看到的内容）

main.js是文件入口（第一个执行的文件）

组件化开发

一个页面可以拆分成多个组件，每个组件都有自己独立的样式、结构、行为

组件分类：普通组件、根组件（整个应用最上层组件、包裹所有普通的小组件）

好处：便于维护、利于复用

APP.vue文件，三个组成部分,结构（template,有且只有一个根元素）、样式(style)、行为(script)

普通组件注册使用

1、在src文件夹中components中创建普通组件

2、在使用的组件中（import）导入,并注册使用

导入：

import 普通组件名 from '普通组件所在位置'

注册：

export default {
    components:{
    组件名:组件对象  
    }
 }

使用：当成html标签使用

全局组件注册使用

1、在src文件夹中components中创建全局组件

2、在main.js文件夹中import导入全局组件，并通过Vue.component('组件名',组件对象)进行注册

import 组件名 from '组件所在位置'

Vue.component('组件名',组件对象)

3、在其他组件中使用全局组件

注意：通常不直接声明全局组件，通常声明为普通组件，由于多次使用，将普通组件转为全局组件

组件三大组成成分注意点

1.data是函数，确保数据独立

2.style默认为全局样式，加scoped为局部样式

3.组件只有一个根元素