VUE之旅—day3

工程化开发和脚手架Vue CLI

开发Vue的两种方式：

1. 核心包创痛开发模式：基于html/css/js文件，直接引入核心包，开发Vue。

2. 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

   源代码→自动化编译压缩组合→运行的代码

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

   存在的问题：

   1. webpack配置不简单
   2. 雷同基础配置
   3. 缺乏统一标准

   解决方案：需要一个工具，生成标准化的配置

Vue CLI基本介绍

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

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

好处：

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

使用步骤：

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)

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

组件化开发&根组件

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

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

   组件分类：普通组件、根组件

2. 根组件：所有应用最上层组件，包裹所有普通小组件。

   语法高亮插件 Vetur

   一个根组件App.vue，包含三个部分：

   • template结构（只能有一个根节点）
   • style样式（可以支持less，需要安装包less和less-loader）
   • script行为

普通组件的注册使用

组件注册的两种方式：

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

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

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

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

局部注册

App.vue

components中的MyHeader.vue

components中的MyMain.vue

components中的MyFooter.vue

全局注册

在需要使用的地方直接标签导入即可。

组件拆分

页面开发思路：

1. 分析页面，按模块拆分组件，搭架子（局部或全局注册）

2. 根据设计图，编写组件html结构cSs样式（已准备好）

3. 拆分封装通用小组件（局部或全局注册）

   将来→通过js 动态渲染，实现功能