VUE-Day04 脚手架

小总结：

拿到项目

先划分组件

每个组件内包含几部分：①<template>模板 ②script ③样式   

                                        模板中放的就是HTML片段，之前所学习的绑定语法 

                                        script 主要是组件 ps: 只有new.Vue的data是写死的对象，其他的先写个function函数，然后return一个对象。computed watch 

拿到部分界面，刨坑，将可能发生变化的位置内容、属性、样式都找到，这样就知道data里面写什么了,因为页面需要变得地方，下面都必须有值的支持。

做每个组件时，要找到遥控的感觉，不要想着查找元素，要学会操作低下的数据控制页面的变化

 

脚手架：

什么是脚手架代码：半成品的项目源代码    (基本功能都已经有了，路由，new Vue 等，只需添加个性化定制的数据和界面)

什么是脚手架命令行工具(CLI)：反复创建脚手架源代码

如何使用：①用 npm 安装脚手架命令行工具：

                     npm i -g @vue/cli

                  结构：可在命令行中使用vue命令反复创建Vue脚手架项目源代码

                  ②用Vue脚手架工具命令创建项目源代码：　　            

　　　　　　default 默认

　　　　　　vue create  项目名字

　　　　　　Babel vuex router 

　　　　   　use history mode 使用历史模式，可以去掉地址栏的#号

　　　　　　分文件保存，还是一个文件保存

　　　　　　In dedicated config files  //使用独立的配置文件保存每种工具的配置

　　　　　　In package.json  // 配置保存在一个文件    

　　　　　　Save this as a present for futere projects？ //是否将此配置运用到将来所有项目的模板

　　　　　　npm run serve //启动一个临时简版服务器，用于开发 live-server

　　　　　　compiled 编译

目录结构：

public：所有不需要编译就可以直接使用的静态资源。

src：组件，js，要写的都放这里。     ps：mount(加载)

views：称得上页面的组件放在这里

 

项目打开命令行

npm run serve

 

组件生命周期

create：创建new Vue() 示例对象或组件对象。

mount：扫描并生成虚拟DOM树，首次加载页面。

update：当模型数据更新时，自动触发。

destroy：当销毁组件对象时。

 

duplicate 重复的