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>