Java全栈课程之Vue3详解———Vue简介

一、Vue简介

Vue(发音为/vju:/,类似view)是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue都可以胜任

Vue官方文档：Vue.js - 渐进式 JavaScript 框架 | Vue.js

        1.渐进式框架

Vue是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但Web世界是十分多样化的,不同的开发者在Web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用Vue:

• 无需构建步骤,渐进式增强静态的HTML
• 在任何页面中作为Web Components嵌入
• 单页应用(SPA)
• 全栈/服务端渲染(SSR)
• Jamstack/静态站点生成(SSG)
• ·开发桌面端、移动端、WebGL,甚至是命令行终端中的界面

        2.Vue版本

目前,在开发中,Vue有两个大版本可以选择Vue2和Vue3,老项目一般都是Vue2的,而新项目一般都选择Vue3开发

二、VueAPI风格

Vue的组件可以按两种不同的风格书写:选项式API和组合式 API

大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后,你也能够很快地理解另一种风格

        1.选项式 API(Options API)

使用选项式API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 data、methods和mounted。选项所定义的属性都会暴露在函数内部的this 上,它会指向当前的组件实例

<script>
export default {
    data() {
        return {
            count: 0
        }

    },
    methods: {
        increment() {
            this.count++
            }
    },
    mounted() {
    console. log( The initial count is ${this.count}. )
    }
}
</script>
<template>
    <button @click="increment">Count is: {{ count }}</button>
</template>

        2.组合式 API(Composition API)

通过组合式API,我们可以使用导入的API函数来描述组件逻辑。

<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
    count. value++
}
onMounted(() => {
    console. log( The initial count is ${count.value}. )
})
</script>
<template>
    <button @click="increment">Count is: {{ count }}</button>
</template>

三、Vue开发前准备

构建工具让我们能使用Vue单文件组件(SFC)。Vue官方的构建流程是基于Vite的,一个现代、轻量、极速的构建工具。

        1.前提条件

                熟悉命令行

                安装Node.js

        2.创建vue项目

npm init vue@latest

这一指令将会安装并执行 create-vue，它是Vue官方的项目脚手架工具。你将会看到一些诸如 Typescript和测试支持之类的可选功能提示

如果不确定是否要开启某个功能,你可以直接按下回车键选择No。在项目被创建后,通过以下步骤女表依颗并启动开发服务器 

cd 文件名
npm install
npm run dev

四、Vue项目目录结构

.vscode	VSCode工具的配置文件夹
node_modules	Vue项目的运行依赖文件夹
public	资源文件夹(浏览器图标)
src	源码文件夹
.gitignore	git忽略文件
index.html	入口HTML文件
package.json	信息描述文件
README.md	注释文件
vite.config.js	Vue配置文件