Vue3本地导入式笔记
# 全局安装 Node.js 和 npm
# 注意：Ubuntu 默认仓库的 Node.js 版本可能较旧。
# 推荐使用 NodeSource 的仓库来安装更新的 LTS 版本。
# 首先安装 curl（如果尚未安装）
sudo apt install curl
#全局安装核心工具：create-vue
sudo npm install -g @vue/cli@next
# 注意：从 Vue CLI v5 开始，它内部使用 `create-vue` 来创建项目。
# 这是目前官方推荐的全局安装方式。
#安装完成后，你可以验证工具是否对所有用户可用。可以切换到一个普通用户，或者直接运行：
vue --version
# 或者
npm list -g @vue/cli
#安装完成后通过vue --version验证
vue --version
网络原因报错的解决方案：更换npm镜像源
# 使用 sudo 切换到 root 用户，并进入其根目录
sudo su -
# 为 root 用户设置淘宝镜像源
npm config set registry https://registry.npmmirror.com/
# 验证配置是否生效
npm config get registry
# 正确的输出应该是：https://registry.npmmirror.com/
npm install -g @vue/cli@next
#安装完后退出
exit
注:笔记无序，随用随查，关键字搜索
1. 删除通过 npm 安装的 axios 和 vue-axios 包
在 Node.js 项目中删除通过 npm 安装的 axios 和 vue-axios 包的方法如下：
基本卸载方法
npm uninstall axios vue-axios
或者分别卸载每个包：
npm uninstall axios
npm uninstall vue-axios
完全删除方法
要彻底删除包及其相关文件：
- 首先卸载包：
npm uninstall axios vue-axios
- 然后删除相关文件：
rm -rf node_modules
rm package-lock.json
- 重新安装剩余依赖：
npm install
验证删除
检查是否已成功删除：
npm list | grep axios
应该看不到任何包含 "axios" 或 "vue-axios" 的结果。
清理全局安装
如果是全局安装的，使用：
npm uninstall -g axios vue-axios
注意事项
- 删除前确保：
备份重要代码
- 如果使用 TypeScript，还需要删除类型定义：
npm remove @types/axios
- 检查 package.json 确保 dependencies 和 devDependencies 中已移除相关条目
2.npm常用指令
2.1 初始化项目
每次创建和修改都是在局部进行的
- 自己设置相关参数
包名称一般不要使用大写字母，括号内的名称为默认包名称
#转到项目所在文件夹后
npm init
# 包名称设置
# 项目版本号
# 项目描述
# 项目入口文件
# 测试命令
# 上传到github上的仓储路径
# 关键字(便于搜索本项目)
# 作者
# 默认许可证
- 采用默认参数
# 转到项目所在文件夹
npm init -y
2.2 安装模块(JS库)
npm install <module name>[@版本号]
执行命令后会生成一个package-lock.json文件，文件中记录了项目的名称、具体版本号极其依赖等
2.3 全局安装模块
2.3.1 通过命令查看全局安装位置
npm root -g
2.3.2 npm全局安装js库
npm install <module_name> -g
2.3.3 npm查看全局安装的js库
npm list -g
# 或
npm ls -g
2.4 生产环境和开发环境依赖模块的安装
2.4.1 生产环境依赖安装
如果项目中用到的js库在项目最后打包上线后需要用到，就要使用生产环境依赖的安装。生产环境依赖安装的语法如下
npm install <module-name> [--save|-S]
--save可以缩写为--s,-S为--save(只有一个-)的简写,同样install可以简写为i
加上--save参数安装后会自动把模块和版本号添加到package.json中的dependencies对象中,简称dep,就是指生产环境依赖
2.4.2 开发环境依赖安装
如果项目中用到的js库(例如，只是在开发过程中进行语法格式检查使用的ESLint模块)在项目最后打包上线的时候不需要用到，就使用开发环境依赖的安装。其语法格式为：
npm install <module-name> [--save-dev|-D]
2.5 CNPM命令的安装(即使用镜像源)
安装cnpm(安装好后与npm的使用一样)
npm install -g cnpm --registry=https://registry.npmmirror.com
2.6 通过package.json批量下载模块
进入项目根目录，输入npm install
2.7 其他常用npm命令
2.7.1 查看本地已安装的模块
npm list
# 或
npm ls
2.7.2 更新依赖
npm -rf node_modules/ #删除已安装的模块
npm cache clean #清除npm内部缓存
npm install #重新安装
2.7.3 查看模块的最新版本
npm view <module-name> version
2.7.4 查看模块的所有版本
npm view <module-name> versions
2.7.5 卸载本地模块
npm uninstall <module-name>
2.7.6 卸载全局模块
npm uninstall -g <module-name>
注：此处不能使用cnpm命令
3.版本号前的符号作用说明
npm 版本号符号含义 (^, ~, latest)
在 package.json 或 npm install 时，版本号前的符号控制依赖的更新范围：
| 符号 | 示例 | 含义 | 允许的更新范围 |
|---|---|---|---|
^ |
^1.2.3 |
兼容版本更新 (默认) 允许更新次版本号和修订号，但不更新主版本 |
1.2.3 → 1.x.x (不含 2.0.0) |
~ |
~1.2.3 |
小版本更新 只允许更新修订号 |
1.2.3 → 1.2.x (不含 1.3.0) |
| 无符号 | 1.2.3 |
固定版本 严格锁定指定版本 |
仅 1.2.3 |
latest |
latest |
最新版本 总是安装最新发布的版本 (不稳定) |
任何新版本 |
4. 消除导入.vue文件时出现无法识别的报错(但不影响程序运行)
在src文件夹新建以下文件
shims-vue.d.ts
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
5. axios模块
1 axios发post请求
注意点：
- 后端一定要加上CORS验证
- 若后端开启了CSRF验证，前端也要带上CSRF Token
1.1 Django后端安装cors
安装必要的包
pip install django-cors-headers
1.2 修改settings.py配置
INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware', # 尽量放在最前面
'django.middleware.common.CommonMiddleware',
...
]
# 下面的如果不想启用cors可以不用配置，限制很大
# CORS 配置
CORS_ALLOWED_ORIGINS = [
"http://localhost:5173", # 你的前端地址
# 可以添加其他允许的源
]
# 允许携带凭据
CORS_ALLOW_CREDENTIALS = True
# 允许的请求头
CORS_ALLOW_HEADERS = [
'content-type',
'x-csrftoken', # 允许CSRF Token
'authorization',
]
# 允许的HTTP方法
CORS_ALLOW_METHODS = [
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
]
1.3 前端vue配置
try {
axios.post("http://60.205.233.51:8000/test/",{"abc":"aaa"},{
headers: {
"X-CSRFToken": csrfToken,
"Content-Type": "application/json",
},
// 该选项若开启，则会触发浏览器的特殊cors处理逻辑
// withCredentials: true, // 允许携带 Cookie
}).then((response)=>{
console.log("请求成功")
console.log(response.data)
})
} catch (error) {
console.log(error)
}
1.3.1 withCredentials: true作用
-
携带身份验证信息：
- 当设置为 true 时，浏览器会在跨域请求中携带以下凭据：
- Cookies（包括会话cookie）
- HTTP 认证头（如 Authorization）
- TLS 客户端证书
-
与 CORS 的交互：
- 启用此选项会触发浏览器的特殊 CORS 处理逻辑
- 服务器必须明确允许带凭据的请求
App.vue
<template>
<!-- 写html内容 -->
<div id="body">
<h2 style="display: block;">登录</h2>
<div class="login">
<form @submit.prevent="postPassword">
<!-- 移除 action 和 method 属性 -->
<div id="user">
<p>账号：</p>
<input type="text" class="UserData" placeholder="请输入账号">
</div>
<div id="password">
<p>密码：</p>
<input type="password" class="UserData" placeholder="请输入密码">
</div>
<div id="password_two">
<p>确认密码：</p>
<input type="password" class="UserData" placeholder="请输入密码">
</div>
<div class="function">
<button type="submit">注册</button>
</div>
</form>
</div>
</div>
</template>
<script lang="ts">
export default{
name:"..."
}
</script>
<script lang="ts" setup>
import {ref} from 'vue'
import axios from 'axios'
function postPassword(password){
// password应为一个字典数据
try {
axios.post("http://60.205.233.51:8000/test/",{"abc":"aaa"},{
headers: {
"X-CSRFToken": csrfToken,
"Content-Type": "application/json",
},
// withCredentials: true, // 允许携带 Cookie
}).then((response)=>{
console.log("请求成功")
console.log(response.data)
})
} catch (error) {
console.log(error)
}
}
// 从 Cookie 获取 CSRF Token（Django 会自动设置 csrftoken Cookie）
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
const csrfToken = getCookie('csrftoken');
</script>
5.多项目仓库中进入单个项目的方法
pnpm --filter 该目录下的项目文件夹 dev
浙公网安备 33010602011771号