Vue-组件化开发和脚手架Vue CLI

1 工程化开发模式优点

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

2 脚手架Vue CLI

2.1 基本介绍

Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

2.2 好处

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

2.3 使用步骤

1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
2. 查看vue/cli版本： vue --version
3. 创建项目架子：vue create project-name(项目名不能使用中文)
4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

2.4 项目目录介绍

2.5 运行流程

npm run serve --> main.js (导入vue，导入 APP.vue， 实例化Vue，将 App.vue 渲染到 index.html容器中） --> index.html

3 组件化开发

• ​组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
• 好处：便于维护，利于复用 → 提升开发效率。
• 组件分类：普通组件、根组件。
  比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分
  

3.1 根组件介绍

整个应用最上层的组件，包裹所有普通小组件

3.2 语法高亮插件

3.3 组件构成

• 三部分构成
  • template：结构 （有且只能一个根元素）
  • script: js逻辑
  • style： 样式 (可支持less，需要装包)
• 让组件支持less
  （1） style标签，lang=“less” 开启less功能
  （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

<template>
  <div>
    <!-- 结构 -->
  </div>
</template>

<script>
export default {
    // js逻辑
}
</script>

<style>
    /* 样式 */
</style>