Vue3&Vite

Vue3

Vue 是一款用于构建用户界面的渐进式 JavaScript 框架，它基于标准 HTML、CSS 和 JavaScript 构建

并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面

Vue的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

声明式：我们之前写的代码都是编程式，例如利用Dom编程来实时更改页面数据，而声明式则可以直接绑定变量和标签

以非工程化的方式打开Vue3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 这里也可以用浏览器打开连接,然后将获得的文本单独保存进入一个vue.js的文件,导入vue.js文件即可 -->
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <div id="app">
            <!-- 给style属性绑定colorStyle数据 -->
            <!-- {{插值表达式 直接将数据放在该位置}} -->
           <h1 v-bind:style="colorStyle">{{headline}}</h1>
           <!-- v-text设置双标签中的文本 -->
           <p v-text="article"></p>
           <!-- 给type属性绑定inputType数据 -->
           <input v-bind:type ="inputType" value="helloVue3"> <br>
           <!-- 给按钮单击事件绑定函数 -->
           <button  @click="sayHello()">hello</button>
        </div>

        <script>
            //组合api
            const app = Vue.createApp({
                // 在setup内部自由声明数据和方法即可!最终返回!
                setup(){
                    //定义数据
                    //在VUE中实现DOM的思路是: 通过修改修数据而影响页面元素
                    // vue3中,数据默认不是响应式的,需要加ref或者reactive处理,后面会详细讲解
                    let inputType ='text'
                    let headline ='hello vue3'
                    let article ='vue is awesome'  
                    let colorStyle ={'color':'red'}        
                    // 定义函数
                    let sayHello =()=>{
                        alert("hello Vue")
                    }
                    //在setup函数中,return返回的数据和函数可以在html使用
                    return {
                       inputType,
                       headline,
                       article,
                       colorStyle,
                       sayHello
                    }
                }
            });
            //挂载到视图
            app.mount("#app");
        </script>
    </body>
</html>

前端的一些关键字：

{{}}：插值表达式
v-bind:style属性：绑定css样式
v-text属性：绑定双标签中的文本
v-bind:type属性：绑定标签中type属性
@click：绑定单击事件触发的函数

后端的写法：

const app = Vue.createApp({
    // 在setup内部自由声明数据和方法即可!最终返回!
    setup(){
        // 定义type属性
        let inputType ='text' 
        // 定义style属性
        let colorStyle ={'color':'red'}        
        // 定义函数
        let sayHello =()=>{
            alert("hello Vue")
        }
        //在setup函数中,return返回的数据和函数可以在html使用
        return {
           inputType,
           colorStyle,
           sayHello
        }
    }
});
//挂载到视图
app.mount("#app");//通过id选择器挂载到id为app的div上

在这里我们只需要大概的体会一下vue框架中的功能以及他的固定写法

Vite

Vite工具主要是用来管理/建立前端工程化的项目模板/规范

Vite和npm组合起来就相当于后端的Maven

Vite的特点与优势：

快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力。
统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量。
代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑。
自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等。

简单的说，Vite工具的功能就是便于前端项目的创建、编写、管理、部署

使用Vite创建前端工程化项目

npm create vite：新建Vite项目

新建好Vite项目后，我们会发现pakage.json目录下记录了本项目所需的依赖，所以我们根据文件的记录给依赖安装一下

npm install：根据pakage.json目录安装依赖

注：我们需要先使用cd命令进入项目的目录，再安装依赖

npm run：使用dev/build/preview运行该项目

在学习Vite之前，我们针对于前端代码的预览是使用vscode的golive插件，而从今天开始，我们使用npm run dev来进入开发模式

关于JS和TS的选择问题

TS（Typescript）是JS的一个超集，使用TS之后，JS的语法更加的像JAVA

在实际开发之中，TS的使用更多一点，但我们不着急去学习TS，原因如下：

为了降低难度,提高前端工程化的效率
对于学JAVA的我们来说,学习TS非常容易,但是还是需要一些时间
TS不是非学不可,不用TS仍然可以正常开发工程化的前端项目

Vite项目的目录结构

Vite项目目录结构.PNG

node_modules：npm安装的框架及所需依赖的目录
public：用于存放一些公共资源，例如：HTML文件、图像、子图，这些资源会被直接复制到构建出的目标目录中
src：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试
- assets：于存放一些项目中用到的静态资源，如图片、字体、样式文件等
- components：用于存放组件相关的文件，组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用
- layouts：用于存放布局组件的文件，布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等
- pages：用于存放页面级别的组件文件，通常是路由对应的组件文件，在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件
- plugins：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等
- router：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递
- store：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率
- utils：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等
package.json：node.js配置文件，包含了项目的基本信息和依赖关系
vite.config.js：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等

设置运行时端口号

//修改vite项目配置文件 vite.config.js
export default defineConfig({
  plugins: [vue()],
  server:{
    port:3000
  }
})

Vite项目组件（SFC入门）

Component中文释义：元件

SFC（Single-File Component）单文件组件

Vue组件：

一个页面作为整体,是由多个部分组成的,每个部分在这里就可以理解为一个组件
每个.vue文件就可以理解为一个组件,多个.vue文件可以构成一个整体页面
组件化给我们带来的另一个好处就是组件的复用和维护非常的方便

Vue文件：

传统的页面有.html文件.css文件和.js文件三个文件组成（多文件组件）
vue将这文件合并成一个.vue文件（单文件组件）
.vue文件对js/css/html统一封装，该文件有三个部分构成：
- template标签：代表组件的html部分代码（代替传统的.html文件）
- script标签：代表组件的js代码（代替传统的.js文件）
- style标签：代表组件的css样式代码（代替传统的.css文件）

<script>
</script>

<template>
</template>

<style>
</style>

template中文释义：模板

工程文件的关系

index.html

按照我们之前的思路，查看index.html文件，发现其中内容如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

我们发现，其中并没有实质性的内容能展现丰富的内容页，但存在关键两行代码

<div id="app"></div>
<!-- 以模块化方式导入js文件 -->
<script type="module" src="/src/main.js"></script>

main.js

我们查看这个被导入的js文件，内容如下：

//从vue框架中导入函数：createApp
import { createApp } from 'vue'
//导入全局样式文件，该文件中的样式或作用到所有的.vue元素上
import './style.css'
//导入App.vue组件 并起别名为App
import App from './App.vue'
//使用App.vue(别名APP)作为形参，使用createApp的函数生成一个对象，再将这个对象挂载到id值为app的元素上
createApp(App).mount('#app')

这个文件的作用，就是将App.vue的组件，挂载到id值为app的元素上

App.vue

相同的，App.vue中也可以导入别的.vue组件，实现组件嵌套

其导入方式和ES6的模块化导入大致相同

在使用时，直接将导入的vue模块当作HTML中的单标签使用

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
	……
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
    ……
</style>

注：.vue组件中，语法上要求template只能有一个一级子标签，但语法报错并不影响vue3的正确运行

[vue/no-multiple-template-root]

The template root requires exactly one element.eslint-plugin-vue

Css样式的导入方式

我们可以在.vue组件的style标签下直接编写为该组件修饰的css样式

同时，我们也可以在src下建立style目录，专门存放css样式文件，有哪个组件需要用，则由该组件调用

相当于把css样式文件也模块化

正如我们在main.js中导入全局css文件那样，直接在script中使用import标签导入css文件

import './style/style.css'

如果是在.vue文件中，除了上述方法（script外部文件导入），也可以在script标签中使用@import方式导入css文件

<style scoped>
    @import './style/style.css'
</style>

响应式入门和setup函数

响应式数据：在数据变化时，vue框架会将变量最新的值实时更新到dom中

在vue2中，数据不做特殊处理，默认就是响应式数据
在vue3中，数据经过ref/reactive函数的处理才是响应式数据
- ref/reactive函数是vue3中给我们提供的方法，导入进来即可使用

注：ref处理的响应式数据，在操作时需要注意：

在script中操作时，要使用.value的形式操作

在template中操作时，无需使用.value的形式操作

<script>
import {ref} from "vue"
export default {
  setup() {
    let counter = ref(1);
    function counterIncr() {
      counter.value++;
    }
    function counterDecr() {
      counter.value--;
    }
    return {
      counter,
      counterIncr,
      counterDecr,
    };
  },
};
</script>
<template>
  <div>
    <button @click="counterIncr">+</button>
    <span v-text="counter"></span>
    <button @click="counterDecr">-</button>
    <button @click="showCounter"></button>
  </div>
</template>

<style scoped>
</style>

setup

在vue3的非工程化打开中，我们大致知道了vue3的固定写法

我们将vue3则setup函数作为模块化处理的默认导出

再被import App from './App.vue'导入到main.js文件中

最后通过createApp(App).mount('#app')挂载到#app元素使用

这样就实现了使用.vue文件（vite项目结构），工程化的实现了vue框架的使用

但是，vue&vite提供了setup关键字作为语法糖（类似注解），解决了每次需要默认暴露和setup函数的冗余代码，所以以上仍然是白学 😓

<script setup>
import {ref} from "vue"
    let counter = ref(1);

    function counterIncr() {
      counter.value++;
    }

    function counterDecr() {
      counter.value--;
    }

</script>

<template>
  <div>
    <button @click="counterIncr">+</button>
    <span v-text="counter"></span>
    <button @click="counterDecr">-</button>
    <button @click="showCounter"></button>
  </div>
</template>

<style scoped>
</style>

#前端工程化

Vue-视图渲染技术上一篇

Node.js&npm 下一篇