一、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配置文件 |