Vue 前端开发笔记

Vue.js

Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org

文档

Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/

V3

简介 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/introduction.html

Nuxt

Nuxt: The Intuitive Vue Framework · NuxtNuxt is an open source framework that makes web development intuitive and powerful. Create performant and production-grade full-stack web apps and websites with confidence.https://nuxt.com/

Naive UI

Naive UIhttps://www.naiveui.com/zh-CN/light

通用组件

Naive UIhttps://www.naiveui.com/zh-CN/light/components/button

Node.js

Node.js — 在任何地方运行 JavaScriptNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn

---

HTTP Request

fetch函数

https://www.w3cschool.cn/fetch_api/https://www.w3cschool.cn/fetch_api/

Fetch API - Web APIs | MDNThe Fetch API provides an interface for fetching resources (including across the network). It is a more powerful and flexible replacement for XMLHttpRequest.https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Using the Fetch API - Web APIs | MDNThe Fetch API provides a JavaScript interface for making HTTP requests and processing the responses.https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Axios

Axioshttps://axios-http.com/

https://github.com/axios/axioshttps://github.com/axios/axios

---

环境安装

1、安装 node.js

https://nodejs.org/dist/v22.13.0/node-v22.13.0-x64.msi

2、安装 npm 或 pnpm 或 yarn

安装 pnpm 方式1

npm install -g pnpm

安装 pnpm 方式2

Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression

安装yarn

npm install --global yarn

3、创建项目

pnpm create vue@latest

PowerShell 不能执行 pnpm.ps1 的问题：

about_Execution_Policies - PowerShell | Microsoft Learn介绍 PowerShell 执行策略并说明如何管理它们。https://learn.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4

修改 PowerShell 执行策略

Get-ExecutionPolicy -List

Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser

可选策略级别：AllSigned Bypass Default RemoteSigned Restricted Undefined Unrestricted

如果需要走代理

官方文档：https://pnpm.io/9.x/cli/config
使用举例：
pnpm config set proxy http://127.0.0.1:10808
pnpm config set https-proxy http://127.0.0.1:10808

pnpm config set proxy socks5://127.0.0.1:10808
pnpm config set https-proxy socks5://127.0.0.1:10808

pnpm config list

pnpm config delete proxy
pnpm config delete https-proxy

指定registry

pnpm config set registry https://registry.npmjs.org/
pnpm config set registry https://mirrors.cloud.tencent.com/npm/
pnpm config set registry https://registry.npm.taobao.org
pnpm config set registry https://registry.npmmirror.com/

临时安装 指定registry

pnpm install xxxx --registry https://registry.npmmirror.com

---

创建 vue 项目

npm create vue@latest
npm install
npm run dev

安装 native-ui

npm i -D naive-ui

---

创建 nuxt 项目

pnpm dlx nuxi@latest init

大陆地区，C:\Windows\System32\drivers\etc\hosts 文件中添加解析：

185.199.111.133 raw.githubusercontent.com

创建成功后，到项目的目录下安装模块

pnpm install

运行开发模式

pnpm dev

---