(尚025)Vue_案例_静态组件

页面效果展示截图:

第一步.首先拆分组件

(1).首先看一下是上下/左右结构

确定为:输入框+列表+底部;

(2).确定名字

(3).创建对应的组件

===================================================================

第二步:静态组件(拆分页面+拆分样式)

1.拆分页面

(1).

(2).

(3).拆分成功后,需要在App.vue中引入这3个组件写成标签

2.拆分样式

(1).在src下新建样式base.css

将index.css拆分到base.css

将main和Item一起拷入TodoList.vue组件中去

(2).在main.js中引入base.css样式(注意:main.js中引入任何组件都有效)

===================================================================================================================================

启动项目 npm run dev ,项目启动截图如下 :

厉害了!!!