vue3实践3
1.vue-cli脚手架
使用vue-cli脚手架构建vue项目
首先全局安装脚手架
npm install -g @vue/cli
创建一个vue项目
vue create 项目名称
运行脚手架构建的项目
npm run serve
如果使用npm create vite basic --template vue-ts构建项目
模板可以选择
-
vue：创建一个使用 Vue 3 的项目。 -
vue-ts：创建一个使用 Vue 3 和 TypeScript 的项目。 -
react：创建一个使用 React 的项目。 -
react-ts：创建一个使用 React 和 TypeScript 的项目。 -
svelte：创建一个使用 Svelte 的项目。 -
svelte-ts：创建一个使用 Svelte 和 TypeScript 的项目。
2.Ant Design 组件库
快速上手 - Ant Design Vue
首先在项目中安装组件库npm i --save [email protected]
Ant Design图标库
npm install @ant-design/icons
3.Axios请求库
npm install axios //安装请求库
const res = await axios({
method: "POST",
url: address + path,
data: journal
}).then((res: any) => { console.log(res); return res; }).catch((err: any) => { console.log(err); return err; });4.Pinia状态管理
简介 | Pinia
npm install pinia 安装pinia的全局状态管理库
在项目的主配置文件main.ts中
import { createPinia } from 'pinia';
const pinia = createPinia();
app.use(pinia);
使用方法
import { defineStore } from "pinia";
export const useStore = defineStore("store", ()=>{
const state =[
{
image_url:"https://dimg04.c-ctrip.com/images/01020120003r5230fF17D_C_210_140.jpg",
title:"六月特辑｜一起做野生小孩♀️",
content:"蜂蜂@波江星馒头 ( 北京 )与闺蜜相约 海城 一聚，暴走属实因为这座城市太好逛啦！当然也收获了海风过于“亲切”的制裁。从漫画街走到山海尽头，一路拍不停， 和龙 猫比心，模仿《鬼怪》女主角的C位照；爬上信号山公园，一秒俯瞰老城区的红瓦绿树；漫步八大峡广场，坐在《最好的我们》同款堤坝上，看海浪把礁石拍成鳞片；发挥特种兵瞬移潜质，在日落前赶到琴屿路，眺望整条海岸线被染成橘红色。",
author:"游记总编辑 (北京)",
date:"2025-05-28 11:00",
likes:"121"
}
]
return {
state
}
})import { useStore } from '../store/index'
const state=useStore();
state.(.....)5.初始化项目后如何去使用路由
安装 Vue Router
npm install vue-router@4
创建路由文件
在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件，例如 src/router/index.js。在这个文件中，您将配置路由规则：
在 main.js 中使用路由
接下来，您需要在 src/main.js 文件中使用这个路由：
createApp.use(router)在组件中使用
6.filter 方法
filter 是 JavaScript 中数组的一个内置方法，用于根据指定的条件过滤数组中的元素。它的基本语法是：
JavaScript
复制
array.filter(function(element, index, array) {
// 返回 true 或 false，表示是否保留当前元素
}, thisArg);-
function(element, index, array)：一个回调函数，用于判断每个元素是否满足条件。-
element：当前正在处理的数组元素。 -
index（可选）：当前元素的索引。 -
array（可选）：调用filter的数组本身。
-
-
thisArg（可选）：执行回调函数时使用的this值。 -
返回值：一个新的数组，包含所有满足条件的元素。
7.箭头函数
箭头函数是 ES6 引入的一种更简洁的函数写法，通常用于简化代码。它的基本语法是：
JavaScript
复制
const functionName = (param1, param2) => {
// 函数体
};-
如果函数体只有一条语句，可以省略花括号
{}，并且返回值是这条语句的结果。 -
如果只有一个参数，可以省略括号
()。
8. computed 函数
computed 是 Vue.js 提供的一个函数，用于定义计算属性。它的基本语法是：
JavaScript
复制
import { computed } from 'vue';
const computedProperty = computed(() => {
// 返回一个值，这个值会根据依赖的响应式数据自动更新
});-
参数：
computed接收一个函数作为参数。这个函数的返回值就是计算属性的值。 -
返回值：
computed返回一个响应式的引用对象（Ref），可以通过.value访问它的值。 -
缓存机制：计算属性是惰性的，只有当它的依赖发生变化时，才会重新计算。如果没有依赖变化，它会返回缓存的值。
9.calss
:class="{ 'tag-selected': selectedTheme === tag }"这是 Vue 的动态 class 绑定语法，用于根据条件动态给元素添加 class。
:class是v-bind:class的简写，表示“绑定 class”。- 花括号
{}里写的是对象语法，key 是 class 名，value 是布尔表达式。 - 当
selectedTheme === tag为true时，元素会加上tag-selected这个 class，否则不会加。