-
vue组件化开发思想
-
组件化的思想：
- 将一个页面的所有的处理逻辑放到一起，处理起来就会非常复杂，而且不利于后续的管理以及扩展；
- 如果，将一个页面拆分为一个个小功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了；
- 就像搭积木一样来搭建我们的项目；
-
用组件化思想来思考整个应用程序：
- 我们将一个完整的页面分成很多个组件；
- 每个组件都用于实现页面的一个功能块
- 而每一个组件又可以进行细分；
- 组件本身又可以在多个地方进行复用；
注册组件的方式
-
我们现在有一部分内容（模板、逻辑等），希望将这部分内容抽取到一个独立的组件中去维护，这个时候需要注册一个组件。
-
注册组件分为两种：
-
全局组件：在任何其他的组件中都可以使用的组件
- 全局组件需要使用我们全局创建的app来注册组件；
- 全局组件的特点：一旦注册成功后，可以在任意其他组件的template中使用
- 通过component方法传入组件名称、组件对象即可注册一个全局组件了；
- 之后我们可以在App组件的template中直接使用这个全局组件。
-
局部组件：只有在注册的组件中才能使用的组件；
- 局部注册是在我们需要使用到的组件中，通过components属性选项来进行注册的；
- 在App组件中，我们有data、computed,methods等选项，其实还可以有一个，components选项
- 该components选项对应的是一个对象，对象中的键值对是组件的名称：组件对象；
组件的名称
-
在使用app.component注册一个组件的时候，第一个参数是组件的名称，定义组件名的方式有两种：
-
方式一：使用kebab-case（短横线分隔符）
-
方式二：使用PascalCase(大驼峰标识符)
-
如何支持SFC
-
如果我们想要使用这一的SFC的vue文件，比较常见的是两种方式：
-
方式一：使用vue.CLI来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中使用.vue文件；
-
方式二：自己使用webpack或rollup或vite这类打包工具，对其进行打包处理；
-
-
一般都是用vue CLI的方式来完成。
Vue CLI脚手架
- 脚手架其实是建筑工程的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架；
- Vue的脚手架就是Vue CLI:
- CLI是Command-Line Interface,翻译为命令行界面；
- 我们可以通过CLI选择项目的配置和创建出我们的项目；
- Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置；
Vue CLI安装和使用
- 安装Vue CLI
- 进行全局安装:npm install @vue/cli -g
- 升级vue Cli:可以用npm update @vue/cli -g
补充内容
- jsconfig.json的演练
- 作用：给vscode进行读取，vscode在读取到其中的内容时，给我们的代码更好的提示；
- 引入的vue的版本
- 默认vue版本：runtime,vue-loader完成template的编译过程
- vue.esm-bundler:runtime+complie,对template进行编译。
- 单文件vue style是有自己的作用域的
- 给自己.vue的文件里面style加上scoped就可以形成单独文件的作用域
- vscode插件：vetur.vu2/vue3,volar
vite创建vue项目
- 1.安装一个本地工具：create-vue;
- 2.使用create-vue创建一个vue项目；
- npm init vue@latest