1-1-vue框架-基础-vue介绍，使用vue创建项目
vue学习
学习vue2，还是vue3？
直接说结论，如果你没有学过vue，就直接从vue3开始学，
Vue 2 将于 2023 年 12 月 31 日停止维护。（官网的公布）
vue介绍
-
第一：vue是一个框架
Vue是一套用于构建用户界面的渐进式 JavaScript 框架。 -
第二：建立在前端3大基础之上
它基于标准 HTML、CSS 和 JavaScript 构建，
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。 -
第三：组件化开发
提供了一套声明式的、组件化的编程模型， -
第四：易于上手
帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
也就是可以边学习边开发，渐进式学习，关键在于应用 -
第五：是一种插件式的开发，
类似python中的flask，所以我喜欢使用flask+vue进行前后端分离的开发，
vue的api风格
Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
选项式 API (Options API)
使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
这是vue2的api风格，vue-element-admin就是使用的这种api风格，
组合式 API (Composition API)
通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。
在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。
这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。
比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用了组合式 API 与 script setup 改造后和上面的模板完全一样的组件：
<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>
这是vue3的版本，
官方的建立：
如果你是使用 Vue 的新手，这里是我们的大致建议：
在学习的过程中，推荐采用更易于自己理解的风格。再强调一下，大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。
在生产项目中：
-
当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。
对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。 -
当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。
这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。
实际上，官方的意思还是，如果你作为一个老手，还是推荐使用组合式的，因为这种更加的简洁，
前提条件
熟悉命令行
已安装 16.0 或更高版本的 Node.js
查看你的node版本
node -v
创建应用
如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。
确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 (不要带上 > 符号)：
> npm init vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
Ok to proceed? (y) 你要继续吗？这个选yes
然后输入项目名字，全部小写
其他的你都可以选择no
cd vue-base
npm install
npm run dev
然后执行这三个命令，
访问：http://localhost:5173/
你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 script setup，而非选项式 API。
目录结构解释
├── README.md
├── index.html
├── node_modules
│ ├── @babel
│ ├── @esbuild
│ ├── @jridgewell
│ ├── @vitejs
│ ├── @vue
│ ├── csstype
│ ├── esbuild
│ ├── estree-walker
│ ├── fsevents
│ ├── magic-string
│ ├── nanoid
│ ├── picocolors
│ ├── postcss
│ ├── rollup
│ ├── source-map-js
│ ├── vite
│ └── vue
├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── base.css
│ │ ├── logo.svg
│ │ └── main.css
│ ├── components
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ └── icons
│ └── main.js
└── vite.config.js
- node_modules这是项目的依赖文件件，这是执行了npm install安装的，
- public公共文件夹，里面有一个图标，左上角的图片，
- src，这是源码的文件夹，主要的编码都在这里
- index.html是入口文件，
- package.json，描述信息，你依赖的版本，
- vite.config.js，配置文件，
通过cdn使用vue
新建一个html文件：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
