Vue3快速开始

已于 2025-03-01 17:05:22 修改
阅读量2.1k 收藏 1
点赞数
分类专栏： Web前端技术 文章标签： javascript vue.js 前端
于 2022-09-21 23:25:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_48268301/article/details/126968735
版权

目录

环境准备

1，需要下载安装Node.js来使用npm命令。
2，通过npm安装vue环境

  1. 设置镜像源(加速下载)
install -g cnpm --registry=http://registry.npm.taobao.org
  1. 安装vue
npm install -g @vue/cli
  1. 构建vue项目
vue create 项目名

引入vue3

  1. cdn的方式：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  2. 引入本地的方式

安装项目

使用vite开始安装，先安装node.js环境

  1. npm init vue@latest 项目名
  2. cd 项目名
  3. npm install
  4. npm run dev

文件结构

src/main.js：入口函数，把组件的数据和界面首页的容器进行绑定
src/App.vue：顶级组件
index.html：界面首页

指令

v-once：当数据改变的时候，插值处不会实时更新
v-html=“”：字符串解析出HTML格式
v-bind: ：动态的绑定属性的内容，如果是想动态属性名记得加中括号[动态属性名]
v-model：变量数据的双向绑定
v-if：符合条件的才会被渲染
v-show：与v-if相似，不同的是v-show都会被渲染，只不过改变了display属性进行隐藏
v-for：遍历数组或对象并进行分别展示。:key属性的意义在于给每个节点添加一个标识，可用于每行节点的定位和追踪

语法糖

v-bind:id 语法糖为:id
v-on:click 语法糖为@click

计算属性computed

计算属性computed：有缓存的概念，只要依赖值没变就不会每次执行
方法mounted：每次调用都会执行

计算属性computed默认调用有getter方法，也可以写一个setter方法

监听器watch

变量发生变化时执行。

如果想要监听对象里的某个单独属性则需要加双引号并开启深度监听：
在这里插入图片描述

组件

一个.vue结尾的文件一般为一个组件，且首字母大写。

父组件传值给子组件可以通过props：
父组件：
在这里插入图片描述
子组件：
在这里插入图片描述

子组件传值给父组件需要通过$emit进行事件监听：
子组件：
在这里插入图片描述
父组件：
在这里插入图片描述

父组件主动获取子组件的变量：
获取到子组件的a变量：
在这里插入图片描述

获取父组件的变量：
this.parent（由于组件复用，可能存在多个父故不推荐使用，建议使用props）

获取根组件的变量：
this.root

插槽

相当于在组件留个坑，父组件使用的时候可以更灵活的改变元素内容

子组件：
在这里插入图片描述

父组件使用：
在这里插入图片描述

组件之间跨级通信 （provide，inject）

在这里插入图片描述
在这里插入图片描述

如果要实现两个组件数据的响应式双向绑定：
方法1.利用对象浅拷贝原理
在这里插入图片描述
在这里插入图片描述

方法2.传递函数
在这里插入图片描述
在这里插入图片描述

VUE3生命周期

在这里插入图片描述

组合式API（setup）

setup是vue3的新特性。setup加载在生命周期之前所以不能使用this关键字和data里面的数据。

实现响应式：
ref：实现响应式
reactive：实现响应式
toRefs(obj)：可以使ES6解构后也具有响应式

setup的语法糖：

<script setup>
</script>

使用语法糖后，不需要再手动注册组件，不需要再手动暴露变量或方法，非常滴方便。

全家桶Vue Router

路由：改变URL，但页面不进行整体刷新。
参考官方文档：https://router.vuejs.org/zh/installation.html

安装：

npm install vue-router@4

创建src/router目录并新建index.js配置路由规则

在这里插入图片描述

使用嵌套路由：
在这里插入图片描述

手动路由跳转：
this.$router.push()

在这里插入图片描述

获取URL路径参数：
this.$route.query.~
在这里插入图片描述

router：全局路由
route：当前路由

组件中使用路由：
在这里插入图片描述

命名视图（实现一个路由展示多个组件）
在这里插入图片描述

路由历史模式：
Hash模式：URL上有#号
HTML5模式：URL上没#号
在这里插入图片描述

路由导航守卫
全局守卫：
在这里插入图片描述

每路守卫：
在这里插入图片描述

组件内部生命周期守卫：
写在组件里。
在这里插入图片描述
注：beforeRouteEnter中是不能使用this关键字的，但可以通过next回调函数获取data数据。其它两个可以直接使用this。

路由懒加载
在这里插入图片描述

发送HTTP请求（请求后端接口）

fetch：js原生方式
axios：是一个基于promise的网络请求库，axios实现了对ajax的封装
在这里插入图片描述

解决跨域

vite通过proxy解决跨域问题：
在vite.config.js文件中配置跨域：
在这里插入图片描述

URL中替换域名：
在这里插入图片描述

vue-cli解决跨域
在vue.config.js文件中配置跨域：
在这里插入图片描述

使用vue-cli创建项目

（vue3推荐使用vite构建项目）

参考官方文档：https://cli.vuejs.org/zh/guide/installation.html

安装cli：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

构建项目：

vue create 项目名

(参考：https://www.bilibili.com/video/BV1QA4y1d7xf?p=70&vd_source=d902bddfa2b1d73669d22889b25198a2)

全家桶Vuex

专为 Vue.js 应用程序开发的状态管理。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
大型应用才推荐集成vuex，可以理解为是一个共享的数据仓库。小型应用可以利用provide和inject手动实现。
store是vuex的状态存储对象，作为一个集中式存储机制所有组件都能访问其中的数据，通常存储多组件状态共享数据比如购物车的商品列表和用户登录状态等。
参考官方文档：https://vuex.vuejs.org/zh/

安装:

npm install vuex@next --save

配置：
在这里插入图片描述
入口函数中绑定
在这里插入图片描述

使用：
在这里插入图片描述

改变变量唯一途径（mutation）

在这里插入图片描述
在这里插入图片描述
注：mutation必须是同步函数，异步函数使用actions

getters是store中的计算属性：

在这里插入图片描述
在这里插入图片描述

Actions

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Module
vuex子模块：
在这里插入图片描述

vuex父模块引用：
在这里插入图片描述
在这里插入图片描述

命名空间：
在这里插入图片描述

开启后使用时需要指定模块名
在这里插入图片描述

辅助函数

引入：
在这里插入图片描述
在这里插入图片描述
使用时，像使用普通变量一样。
之前：
在这里插入图片描述
现在可以直接使用：
在这里插入图片描述

前端构建工具Webpack和Vite

为什么需要它们？‌
‌解决兼容问题‌：比如用 ES6、TypeScript 等高级语法写的代码，浏览器看不懂，需要工具“翻译”成普通 JS。
‌优化加载速度‌：项目文件太多时，浏览器一个个加载会慢，工具能合并、压缩文件，减少加载时间。
‌实时更新‌：修改代码后，工具能自动刷新页面，不用手动刷新。

‌1. 核心原理‌
‌Webpack‌：像个“打包狂魔”，开发时会把所有代码（JS、CSS、图片等）全部塞进一个或多个大文件（叫 bundle），浏览器才能运行。启动项目时要等它打包完所有东西，项目越大越慢。
‌Vite‌：像个“现用现拿”的管家。开发时直接用浏览器原生能力加载模块，只编译当前需要的文件（比如你改哪个文件就编译哪个），所以启动飞快。生产环境才会打包。

‌2. 开发体验‌
‌Webpack‌：改代码后要等它重新打包整个模块，热更新（HMR）会卡一下 ‌‌。
‌Vite‌：改代码几乎是秒更新，浏览器直接请求新文件，不用全盘重来。

‌3. 适用场景‌
‌Webpack‌：适合老项目、复杂配置（比如需要兼容 IE）或重度依赖插件生态的场景。
‌Vite‌：适合现代浏览器、新项目，尤其是追求开发速度和轻量化的场景（比如 Vue/React 项目）。

‌一句话总结‌：
Webpack 是“先苦后甜”（启动慢但功能全），Vite 是“先甜后苦”（开发快但生产仍需打包）。

webpack的使用：

安装 webpack 和 webpack-cli（命令行执行工具）：

npm install webpack webpack-cli --save-dev或yarn add webpack webpack-cli -D

package.json文件下配置webpack：

"scripts": {
    "build": "webpack",
  },

（“build”: “webpack serve --open” ）：热部署并自动打开浏览器，不过是打包到webpack 服务器上所以本地的dist包不会更新。

执行：

npm run build

断点调试开发工具配置：
为了能让断点调试时在打包前的文件进行
webpack.config.js文件里配置 devtool:"inline-soure-map"

vite的使用：

安装 vite（命令行执行工具默认包含）：

npm install vite --save-dev或yarn add vite -D

或直接构建vite项目：npm create vite@latest
其它步骤与webpack基本一致且更简单易用。

Vue项目的运行、打包、部署

一，运行
package.json文件：
在这里插入图片描述

npm run dev

或

npm run serve

二，打包

  1. 该命令会在项目根目录下生成一个 dist 文件夹，里面包含了打包后的静态文件（如 HTML、CSS、JavaScript 等）。
npm run build

  1. 在项目根目录下创建 .env.production 文件（用于生产环境），并添加以下内容：
    VITE_API_BASE_URL = http://your-backend-api-url
    将 http://your-backend-api-url 替换为实际的后端 API 地址。

  2. 在 Vue 项目中，可以通过 import.meta.env.VITE_API_BASE_URL 来访问该环境变量。例如，在 API 请求的配置文件中：

import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL
});

export default api;

修改完成后，重新运行 npm run build 以确保打包后的文件使用新的 API 地址。

三，部署到nginx
备份默认配置文件：在修改配置文件之前，建议先备份默认的 Nginx 配置文件：

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

编辑 Nginx 配置文件：使用文本编辑器打开配置文件：

sudo nano /etc/nginx/sites-available/default

在 server 块中添加以下配置：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或服务器IP地址

    root /path/to/your/vue-project/dist;  # 替换为你的Vue项目打包后的dist文件夹路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理后端API请求
    location /api {
        proxy_pass http://your-backend-api-url;  # 替换为实际的后端API地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

保存并退出配置文件后重启 Nginx 服务。

上传打包文件到服务器：
使用 scp 或其他文件传输工具将本地项目打包后的 dist 文件夹上传到服务器的指定路径（即 Nginx 配置文件中 root 指令指定的路径）。例如：

scp -r /path/to/your/local/vue-project/dist user@your-server-ip:/path/to/your/vue-project/dist

将 /path/to/your/local/vue-project/dist 替换为本地 dist 文件夹的路径，user 替换为服务器的用户名，your-server-ip 替换为服务器的 IP 地址，/path/to/your/vue-project/dist 替换为服务器上的目标路径。
完成以上步骤后，你就可以通过浏览器访问你的域名或服务器 IP 地址来查看部署后的 Vue 项目，并且项目可以正常与后端 API 进行通信。

Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 5727
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
vue3
qq_20881791的博客
04-18 161
mmit 双向数据绑定 <template> <input type="text" :value="keyword" @input="$emit('update:keyword',$event.target.value)" placeholder="请输入内容"> </template> <script> export default { name: "itInput", props:["key
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
10-17
主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3
rita_0567的博客
12-14 1407
Vue3提供两种组织代码逻辑的写法通过data、methods、watch 等配置选项组织代码逻辑，选项式API写法所有逻辑在setup函数中，使用 ref、watch 等函数组织代码，组合式API写法在setup中通过vue提供的内置函数组合，实现代码功能，是什么方式？组合式API写法组合式API有什么好处？可复用，可维护ref 是不是一个组合式API？是reactive 函数通常定义：复杂类型的响应式数据可以转换简单数据吗？不能ref。
Vue3 使用详解
最新发布
weixin_52578852的博客
04-29 1040
Vue3 是 Vue.js 框架的最新主要版本，于 2020 年 9 月正式发布。性能提升：更快的渲染速度，更小的包体积：全新的代码组织方式更好的 TypeScript 支持新的响应式系统：基于 Proxy 实现等新特性// 子组件emit('custom-event', '事件数据')return {// 父组件// 全局指令el.focus()})// 局部指令},patchProp,insert,remove,// ...其他平台特定API})
vue：基础0
1363648943的专栏
06-01 1505
https://segmentfault.com/a/1190000016344599?utm_medium=referral&utm_source=tuicool Vue 是什么框架？ 渐近式框架 Vue核心是什么？ 声明式渲染（数据驱动）、组件系统 Vue的双向数据绑定原理（响应式原理）：Object.defineProperty( ) Object.defineProperty。用些来劫持每个属性的 getter 和 se...
vue实现页面渲染时候执行某需求
PleaseBeStrong的博客
05-22 952
在之前的项目中，需要实现一个监控token是否过期从而动态刷新token的功能，然而在登录成功后创建的监控器会在浏览器刷新点击或者是通过导航栏输入网址时销毁...
使用vue3+element-ui plus 快速构建后台管理模板
10-17
在开始项目时，你需要安装Vue3和Element UI Plus。可以使用npm或yarn进行安装： ```bash npm install vue@next element-plus ``` 然后在你的主入口文件（通常是`main.js`）中引入并使用它们： ```javascript ...
vue3+tailwindcss+elementPlus+nuxt3
02-12
Vue 3作为Vue.js的最新版本，在性能和功能上都有了显著的提升。它引入了Composition API，为开发者提供了更大的灵活性和代码组织能力。Nuxt.js是一个基于Vue.js的开源框架，专门用于构建服务器端渲染（SSR）和静态...
vue3项目模板，优雅的vue3项目组织.zip
11-02
通过使用这样的项目模板，开发者可以快速地开始一个新的Vue3项目，同时遵循最佳实践，确保项目的可维护性和扩展性。在实际开发中，可以根据具体需求对模板进行定制和调整，以满足不同项目的需求。
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
Vue脚手架是用于快速搭建Vue.js项目的基础架构，它集成了常见的开发工具和配置，以便开发者能够更高效地开始编码。在这个特定的项目中，我们看到它与Vue3进行了结合，Vue3是Vue.js的最新版本，带来了性能优化、语法...
electron+vue桌面应用开发快速开始模板.zip
02-09
"electron+vue桌面应用开发快速开始模板.zip" 是一个为开发者准备的资源包，它帮助初学者迅速搭建基于 Electron 和 Vue 的项目结构，从而能够快速进入桌面应用的开发流程。 Electron 是一个由 GitHub 开发的开源...
Vue 3
qq_53464269的博客
02-18 1518
vue3
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值