介绍vite脚手架框架使用（理解工程化）

• 更好的管理开发文件、进行模块化
• 如何快速构建一个工程化的项目：需要使用脚手架
• –save-dev -D 开发依赖–项目运行不需要，编译需要 --save -S 发布依赖–项目运行的时候也需要

脚手架

• 脚手架是一个可以实现开发框架快速搭建的一个命令
• 在vue中有两个常用的脚手架
  • vue-cli ： @vue/cli 都是基于webpack平台，webpack是整个项目编译，所以启动有些慢，但是开发过程编译快
  • vite： 基于rollup实现的一个脚手架；rollup是需要执行的文件才编译，所以启动很快

vite脚手架

• cnpm安装：npm install -g cnpm --registry=https://registry.npmmirror.com
• yarn安装：cnpm install -g yarn 测试命令：yarn -v
• vite使用：yarn create vite/npm create vite@latest/pnpm create vite
  • 输入项目名字
  • 选择开发框架
  • 选择开发语言
  • 这里得到的项目，没有安装依赖，项目不能运行
    • 开发框架不仅可以管理文件，还可以对写的一些高级语法进行编译（ES2022标准等新语法，less、sass等预处理器）
    • 还能启动一个开发服务器（使用open live serve 打开的是vscode的提供的一个服务器）
  • 安装开发依赖：cnpm/npm/yarn/npx/pnpm install
  • 分析构架：
    • —— node_modules 所有的依赖包，不要删除，如果出现项目运行报一些文件丢失的问题，那么删除这个目录，执行 cnpm/yarn install
    • —— public 公共静态资源(比如简单的首页图片、favicon、bootstrap样式这些文件)
    • —— src source–源码，进行项目开发的源码文件，所有的业务逻辑代码、页面样式等
      • —— main.js 是项目的实例入口文件
    • —— index.html 它是项目的入口文件 – 几乎所有的vue项目都是单页应用(SPA–single page application 整个项目只有一个html页面，那么其它业务页面都是嵌入到这个页面中)
      • —— id 表示实例容器元素
      • —— script 引入应用的实例
    • —— vite.config.js 它是vite脚手架的配置文件
    • —— package.json 框架依赖管理文件，包括命令

h函数（渲染函数）

• 问：虚拟dom或者虚拟节点是什么？
  • 它是由h函数创建的一个普通js对象，它描述了真实dom的结构和属性
• vue框架中没有真实dom，只有虚拟函数
• h函数在对dom变化性非常强的时候使用–比如递归实现tree功能
• 如果要编写非js复杂性html页面，那么使用template模块—那么在渲染到页面上的时候，会被vue-loader编译成一个js 的render代码
• 使用render函数编写页面的效率低下，所以可以使用template模块
• 如果有template和render方法的时候，render方法不生效？
  • 因为template编译成render方法以后，会覆盖当前render方法

import { h } from 'vue'

const App = {
    // Component is missing template or render function. 
    // template需要特殊的配置，才能被vite脚手架进行编译，可以使用render方法来取代
    // template: '
test...
'
    // render方法，是vue底层提供的一个用于js执行页面渲染的一个方法
    // render: function() {
    render() {
        // 这里的js只能创建底层VNode节点 -- 需要调用一个h函数
        // 01/19 表示h函数有19种定义，01表示第一种定义
        // h(type: string, props?: RawProps, children?: RawChildren): VNode
        // : VNode 表示h函数执行以后会返回一个VNode对象
        // h创建虚拟节点 -- html节点
        let VNode = h(
            // type(指传递的html元素类型): string 传递html节点的名字
            'div',
            // props?(?表示这个参数可以不传): RawProps
            {
                style: {
                    color: 'red',
                    fontSize: '16px'
                },
                class: [
                    'my-test'
                ]
            },
            // RawChildren = string | number | boolean | VNode | VNodeArrayChildren | (() => any)
            [
                '搭建第一个 Vite 项目',
                h(
                    'p',
                    {
                        style: {
                            color: 'blue',
                            fontSize: '12px'
                        }
                    },
                    '好好学习，天天向上'
                )
            ]
        )
        // 虚拟dom或则虚拟节点是什么？
        // 它是由h函数创建的一个普通js对象，它描述了真实dom的解构和属性
        // vue框架中没有真实dom，只有h函数创建的虚拟dom
        // 为什么要使用虚拟dom，后边讲解！！！
        // h函数在对dom变化性非常强的时候使用--比如递归实现tree功能
        // 所以在vue中给出了一个vue单文件模块化的语法，也就是文件的后缀为.vue文件即可
        console.log(VNode)
        return VNode
    }
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

setup（）函数

• 优先级：setup（）> template > render()

vue-cli脚手架：

• @vue/cli 这个库可以在本地进行安装，然后调用命令来进行项目开发框架搭建：cnpm i -g @vue/cli
• 1、Please pick a preset: Manually select features 选择项目初始化方式，可以是默认的，也可以是自己配置的
• 2、选择自己配置：选择是否使用ts、预处理器、路由、状态管理器等
• 3、Choose a version of Vue.js that you want to start the project with 3.x 选择vue的版本
• 4、代码检查规则：Pick a linter / formatter config: Standard
• 5、检查代码的时机：Pick additional lint features: Lint on save
• 6、对脚手架进行额外配置在哪个文件进行：Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
• 7、然后保存进行开发框架安装
• vite的用法，不需要在本地安装vite这个命令，直接使用yarn库运行即可
• 安装：cnpm i -g yarn
  测试：yarn -h
  yarn create vite
• 虚拟dom是由一堆的虚拟节点(VNode)组成的dom对象，它是一个普通的js对象，它描述了真实dom的结构

总结：

• computed属性——定义一个getter方法，然后要求返回一个数据，这个定义的方法可以直接在页面上使用
• 脚手架：
  • 它是一个可以快速搭建开发框架的一个命令，yarn create vite
  • 实现原理，就是接受用户在cmd中的输入，然后解析输入，把需要的文件下载到本地即可
• 框架：
  • 随着我们的业务发展，项目开发越来越大，业务越来越复杂，为了项目的可维护性，可伸缩性，所以会采用最新的技术去开发项目，但是浏览器不认识代码
  • 比如：nve文件，样式预处理器，ES6高级语法，Typescript等文件
  • 所以需要一个编译器来执行编译，把浏览器不认识的代码编译成浏览器认识的代码，那么不同的语法需要不同的编译器，比如less需要less编译器，vue需要vue编译器
  • 所以less的编译器叫less-loader,vue的编译器叫vue-loader
  • 那么就需要一个平台把所有编译器集中起来，然后去对编写的代码进行编译，最终输出一个浏览器可执行的文件，这个平台现在叫webpack或者rollup
  • 那么通过平台可以把各种开发框架——vue / react / angular 等和样式预处理器，typescript等高级语法进行整合项目开发，就可以更大程度上保证项目的开发效率和可维护性。