支付宝打赏 
微信打赏 
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API，作者是尤雨溪。
文档与资源大全：https://vue3js.cn/
第一个Vue程序
1、安装Node.js
2、安装Vue-cli
如果之前安装过Vue2，需要把Vue2卸载。
npm uninstall vue-cli -g
安装最新版本的vue-cli
npm i -g @vue/cli
查看版本号
vue -v
3、创建Vue3.0项目
vue create 项目名称
4、运行项目
使用cd命令进入项目，然后运行
npm run serve
在浏览器中输入http://localhost:8080查看
5、使用图形化界面创建项目
vue ui
上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
项目结构
|-dist -- 生成打包后文件
|-node_modules -- 项目依赖包的目录
|-public -- 项目公用文件
|--favicon.ico -- 网站地址栏前面的小图标
|--index.html -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-src -- 源文件目录，程序员主要工作的地方
|-api -- 与后端交互使用相关方法和配置
|-assets -- 静态文件目录，图片图标、样式，比如网站logo
|-components -- Vue3.x的自定义组件目录
|-router -- vue-router相关配置
|--utils -- 通用工具包
|--views -- 页面
|--App.vue -- 项目的根组件，单页应用都需要的
|--main.css -- 一般项目的通用CSS样式写在这里，main.js引入
|--main.js -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore -- git的管理配置文件，设置那些目录或文件不管理
|--package-lock.json -- 项目包的锁定文件，用于防止包版本不一样导致的错误
|--package.json -- 项目配置文件，包管理、项目名称、版本和命令
使用Vite构建第一个Vue程序
官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
Vite官网：https://vitejs.cn
- Vite是Vue团队打造的新一代前端构建工具。
- 优势：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
## 创建工程
npm init vite-app yk_vue3
## 进入工程目录
cd yk_vue3
## 安装依赖
npm install
## 运行
npm run dev
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>
组合式 API (Composition API)：
通过组合式 API，可以使用导入的 API 函数来描述组件逻辑。
在单文件组件中，组合式 API 通常会与
<script setup>搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，可以更简洁地使用组合式 API。
比如，
<script setup>中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用了组合式 API 与
<script setup>改造后和上面的模板完全一样的组件：
<template>
<div>
<button type="button" @click="increment()">count is : {{count}}</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
name: 'Hello',
setup () {
const count = ref(0)
function increment () {
count.value++
}
onMounted(() => {
console.log(count)
})
return { count, increment }
}
}
</script>
<style scoped>
button{
font-weight: bold;
}
</style>
使用VS Code 集成开发工具（IDE）
安装插件:
Vue 3 Snippets:
- 用于vue3的智能代码提示，语法高亮、智能感知、Emmet等。
- 替代Vetur插件，Vetur在vue2时期比较流行。
Volar：
- 语法高亮、智能感知、Emmet等。
插件ESLint：
- 检查代码是否符合规范。
Prettier:
- 代码格式化。
在浏览器中直接使用Vue3.0
1、通过 CDN 使用 Vue
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>vue3介绍</title>
</head>
<body>
<div id="app1">{{message}}</div>
<div id="app2">
<span v-bind:title="message"> 把鼠标放到这里试试 </span>
</div>
<script src="js/vue3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const { createApp } = Vue;
//vue应用对象
var app2 = createApp({
data() {
return {
message: "Hello Vue3!",
};
},
}).mount("#app1");
//绑定属性
var app2 = createApp({
data() {
return {
message: "页面加载时间是：" + new Date().toLocaleString(),
};
},
}).mount("#app2");
</script>
</body>
</html>
Vue Devtools
当使用 Vue 时，推荐同时在你的浏览器上安装 Vue Devtools，它允许你在一个更加友善的界面中审查和调试你的 Vue 应用。
Vue Devtools是一个内嵌在Google Chrome浏览器中的插件，用于更好的调试Vue应用程序。
源码：https://github.com/vuejs/vue-devtools#vue-devtools
https://github.com/vuejs/devtools/releases/download/v6.1.3/devtools-chrome.zip
下载后解压，在chrome地址栏中输入：
chrome://extensions/直接将crx文件插入浏览器，确认就安装成功了。
插件会自动检测当前是否使用了vue，如果使用了图标会亮起，在开发者工具中有一个调试界面。
