VUE之旅—day3

工程化开发和脚手架Vue CLI

开发Vue的两种方式：

核心包创痛开发模式：基于html/css/js文件，直接引入核心包，开发Vue。
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

源代码→自动化编译压缩组合→运行的代码
意思即为源代码（es6语法/typescript/less/sass）通过自动化编译压缩组合（webpack配置)转换成运行大代码（js/css)

存在的问题：
1. webpack配置不简单
2. 雷同基础配置
3. 缺乏统一标准
解决方案：需要一个工具，生成标准化的配置

Vue CLI基本介绍

VueCLI是Vue官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

开箱即用，零配置
内置babel等工具
标准化

使用步骤：

1.全局安装（一次）：yarn global add @vue/cli或 npm i @vue/cli -g

2.查看Vue 版本：vue–version

3.创建项目架子：vuecreateproject-name（项目名-不能用中文)

4.启动项目：yarn serve 或 npm run serve（找package.json)

在这里插入图片描述

脚手架目录文件介绍&项目运行流程

在这里插入图片描述

组件化开发&根组件

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

好处：便于维护，利于复用→提升开发效率

组件分类：普通组件、根组件
根组件：所有应用最上层组件，包裹所有普通小组件。

语法高亮插件 Vetur

一个根组件App.vue，包含三个部分：
- template结构（只能有一个根节点）
- style样式（可以支持less，需要安装包less和less-loader）
- script行为

在这里插入图片描述

<template><div id="app" @click="fn()">我是一个盒子<div class="box"></div></div>
</template><script>
// 导出的是当前组件的配置项
// 里面可以提供data(特殊) method computed watch 生命周期八大钩子
export default {created() {console.log("我是created");},methods: {fn() {alert('你好')}}
}
</script><style lang="less">
/*让style支持less
1.给style加上  lang="less"
2.安装依赖包 less 和 less-loaderyarn add less less-loader -D(开发依赖)
*/
#app {width:300px;height: 300px;background-color: pink;.box{width:100px;height: 100px;background-color: rgb(145, 181, 209);}
}
</style>

普通组件的注册使用

组件注册的两种方式：

局部注册：只能在注册的组件内使用
- 创建.vue文件（单文件组件）
- 在使用的组件内导入，并局部注册 components:{组件名:组件对象}
全局注册：所有组件内都能使用
- 创建.vue文件（单文件组件）
- main.js内导入，并全局注册Vue.component(组件名,组件对象)

使用：当成HTML标签使用 <组件名></组件名>

注意：组件名规范→大驼峰命名法，如MyHeader

技巧：一般都用局部注册，如果发现确实是通用组件，再抽离到全局。

局部注册

在这里插入图片描述

App.vue

<template><div class="vue"><!-- 头部组件 --><MyHeader></MyHeader><!-- 主体组件 --><MyMain></MyMain><!-- 尾部组件 --><MyFooter></MyFooter></div>
</template><script>
import MyFooter from './components/MyFooter.vue'
import MyHeader from './components/MyHeader.vue'
import MyMain from './components/MyMain.vue'
export default {components: {MyHeader,MyMain,MyFooter
}
}
</script><style>
.vue{width: 400px;height: 500px;background-color: pink;padding: 20px;font-size: 20px;margin: 0 auto;color: rgb(72, 77, 81);
}
</style>

components中的MyHeader.vue

<template><div class="my-header">我是MyHeader</div>
</template><script>
export default {}
</script><style>
.my-header{width: 100%;height: 80px;background-color: rgb(122, 186, 154);text-align: center;line-height: 80px;
}
</style>

components中的MyMain.vue

<template><div class="my-main">我是MyMain</div>
</template><script>
export default {}
</script><style>
.my-main{width: 100%;height: 300px;background-color: rgb(147, 198, 242);margin: 10px 0;text-align: center;line-height: 300px;
}
</style>

components中的MyFooter.vue

<template><div class="my-footer">我是MyFooter</div>
</template><script>
export default {}
</script><style>
.my-footer{width: 100%;height: 80px;background-color: rgb(242, 225, 147);text-align: center;line-height: 80px;
}
</style>