html 的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Router 入门示例</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
</head>
<body>
<div id="app">
<!-- Vue Router 会将 router-view 替换为当前路由匹配到的组件 -->
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件进行导航 -->
<!-- 通过传递 `to` 来指定链接 -->
<!-- `<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签 -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
<script>
// 创建两个组件
const Home = { template: '<div>这是主页</div>' }
const About = { template: '<div>这是关于页面</div>' }
// 创建路由器实例并配置路由
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
// 创建 Vue 实例，并将路由器添加到根实例中
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
这样浏览器可以直接访问。
/ 时，默认返回主页。
/about 时，默认返回关于页面
入门例子
playground 的方式一直不太顺利。
https://github.com/vuejs/router/tree/main/packages/playground
我们下载到本地，进入到 playground 的目录。
然后 vite 直接启动。
文件列表如下：
│ env.d.ts
│ index.html
│ package.json
│ tsconfig.config.json
│ tsconfig.json
│ vite.config.ts
│
└─src
│ App.vue
│ AppLink.vue
│ main.ts
│ router.ts
│ scrollWaiter.ts
│ store.ts
│
├─api
│ index.ts
│
└─views
ComponentWithData.vue
Dynamic.vue
Generic.vue
GuardedWithLeave.vue
Home.vue
LongView.vue
Nested.vue
NestedWithId.vue
NotFound.vue
RepeatedParams.vue
User.vue
启动
npm install
报错：
D:\js\vue-router\router\packages\playground>npm install
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*
npm ERR! A complete log of this run can be found in: C:\Users\dh\AppData\Local\npm-cache\_logs\2024-05-08T08_03_36_770Z-debug-0.log
stackoverflow
https://stackoverflow.com/questions/69220042/npm-err-unsupported-url-type-workspace-workspace
npm install初始化出现问题： npm ERR! Unsupported URL Type “workspace:”: workspace:*
解决方式
尝试历史
可忽略，一些尝试的笔记。
尝试1：更新 npm 版本
现在：
>node -v
v20.10.0
更新
npm install -g npm@latest
确认：
>npm -v
10.7.0
还是会报错，报错信息不变。
chat 原因 2
这个错误表明 npm 遇到了不支持的 URL 类型 “workspace:”，可能是由于项目中使用了 npm Workspaces 功能导致的。
这种情况下，npm Workspaces 允许你在一个父项目中管理多个子项目，但某些情况下可能导致依赖安装问题。
要解决这个问题，你可以尝试以下几种方法：
-
清除 npm 缓存：有时候缓存中的某些文件可能会导致问题。你可以尝试清除 npm 缓存，然后重新安装依赖：
npm cache clean --force
尝试，依然报错，且错误不变。
-
使用 Yarn 安装：尝试使用 Yarn 而不是 npm 来安装依赖。Yarn 有时候对于特定的依赖关系处理会更好一些：
yarn install -
手动安装依赖：如果上述方法都不起作用，你可以尝试手动安装依赖。首先，检查项目的
package.json文件，找到dependencies和devDependencies字段，然后手动安装其中列出的所有依赖项：npm install <dependency1> <dependency2> ...请确保你按照正确的顺序安装所有的依赖项。
-
检查 npm 版本：确保你正在使用的 npm 版本是最新的。你可以通过运行
npm -v命令来检查当前安装的 npm 版本，并在需要时更新到最新版本。
如果你仍然遇到问题，请提供更多的信息，例如项目中的 package.json 文件内容以及任何其他可能有助于诊断问题的细节。
尝试2：改为使用 yarn
>yarn -v
1.22.21
本机已经安装了，如果没有安装：
npm install -g yarn
yarn 安装
yarn install
报错：
D:\js\vue-router\router\packages\playground>yarn install
error This project's package.json defines "packageManager": "yarn@pnpm@8.15.3". However the current global version of Yarn is 1.22.21.
Presence of the "packageManager" field indicates that the project is meant to be used with Corepack, a tool included by default with all official Node.js distributions starting from 16.9 and 14.19.
Corepack must currently be enabled by running corepack enable in your terminal. For more information, check out https://yarnpkg.com/corepack.
chat 原因
这个错误表明项目中的 package.json 文件定义了 packageManager 为 "yarn@pnpm@8.15.3"，但当前全局安装的 Yarn 版本是 1.22.21，导致了冲突。
要解决这个问题，你可以按照以下步骤操作：
-
启用 Corepack：按照错误提示，在终端中运行
corepack enable命令来启用 Corepack，以支持当前项目。这会让项目使用 Corepack 来处理依赖管理。 -
更新项目配置：如果你希望项目继续使用 Yarn 而不是 Corepack，你可以编辑项目中的
package.json文件，将packageManager字段修改为匹配你全局 Yarn 版本的值。在这种情况下，将其修改为"yarn@1.22.21"。 -
安装指定版本的 Yarn：如果你不想使用 Corepack，并且希望项目继续使用 Yarn，你可以在本地安装与项目配置相匹配的 Yarn 版本。你可以使用 npm 或者 Yarn 来安装特定版本的 Yarn。例如，运行以下命令来安装 8.15.3 版本的 Yarn：
npm install yarn@8.15.3或者使用 Yarn：
yarn add yarn@8.15.3
选择适合你需求的方法来解决问题。
再次验证
>corepack enable
Internal Error: EPERM: operation not permitted, open 'D:\Program Files\nodejs\pnpm'
Error: EPERM: operation not permitted, open 'D:\Program Files\nodejs\pnpm'
权限问题，我们以管理员启动命令行。
d:
cd D:\js\vue-router\router\packages\playground
再次执行就正常了。
再次执行，报错：
>yarn install
Usage Error: This project is configured to use pnpm
$ yarn ...
尝试3：pnpm install
因为上面的报错，我们来尝试一下 pnpm
chat 原因
这个错误表明项目当前配置为使用 pnpm，而不是常规的 Yarn。
因此，你在尝试运行 yarn install 时会得到此错误。
要解决这个问题，你有几个选项：
-
使用 pnpm 安装依赖：根据项目的配置，你应该使用 pnpm 来安装依赖，而不是 Yarn。你可以运行以下命令来安装依赖：
pnpm install这将使用 pnpm 来安装项目所需的依赖项。
-
切换为 Yarn：如果你想使用 Yarn 而不是 pnpm，你需要修改项目的配置。你可以编辑项目中的
package.json文件，将packageManager字段设置为"yarn"，然后再运行yarn install命令。 -
全局安装 Yarn：如果你选择切换为 Yarn，并且项目中未指定具体版本的 Yarn，你需要先在全局安装 Yarn。你可以使用以下命令来全局安装 Yarn：
npm install -g yarn安装完成后，你可以按照第二个选项中的步骤来修改项目配置并安装依赖。
选择适合你情况的选项来解决问题。
实战验证
pnpm install
日志：
>pnpm install
Scope: all 4 workspace projects
../.. | +920 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
╭─────────────────────────────────────────────────────────────────╮
│ │
│ Update available! 8.15.3 → 9.1.0. │
│ Changelog: https://github.com/pnpm/pnpm/releases/tag/v9.1.0 │
│ Run "corepack prepare pnpm@9.1.0 --activate" to update. │
│ │
│ Follow @pnpmjs for updates: https://twitter.com/pnpmjs │
│ │
╰─────────────────────────────────────────────────────────────────╯
Downloading registry.npmmirror.com/typescript/5.3.3: 5.76 MB/5.76 MB, done
../.. | Progress: resolved 920, reused 0, downloaded 920, added 920, done
../../node_modules/.pnpm/yorkie@2.0.0/node_modules/yorkie: Running install script, done in 146ms
../../node_modules/.pnpm/vue-demi@0.14.7_vue@3.4.23/node_modules/vue-demi: Running postinstall script, done in 197ms
../../node_modules/.pnpm/geckodriver@3.2.0/node_modules/geckodriver: Running postinstall script...
发现时间比较长，终止重新来：
D:\js\vue-router\router\packages\playground>pnpm install
Scope: all 4 workspace projects
../.. | +920 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
../.. | Progress: resolved 920, reused 920, downloaded 0, added 5, done
Done in 1.5s
启动：
pnpm run dev
起不来…
尝试4: 调整 package.json
修改版本
把 package.json
"vue-router": "workspace:*",
移除，指定具体的 vue-router。
完整的配置如下：
{
"name": "@vue/router-playground",
"private": true,
"version": "0.0.0",
"scripts": {
"play": "vite",
"build": "vite build",
"types": "vue-tsc --noEmit",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.4.23",
"vue-router": "^4.0.0"
},
"devDependencies": {
"@types/node": "^20.12.7",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/compiler-sfc": "^3.4.23",
"@vue/tsconfig": "^0.5.1",
"typescript": "~5.3.3",
"vite": "^5.2.9",
"vue-tsc": "^1.8.27"
}
}
表示我们指定一个特定的依赖，而不是原来的内部项目本身的依赖。
再次尝试
如果不行，试着把修改后的 playground 文件夹复制出去。（这个影响应该不大。）
npm install
成功日志如下：
added 48 packages in 17s
6 packages are looking for funding
run `npm fund` for details
此时安装成功。
运行
npm run play
日志如下:
>npm run play
> @vue/router-playground@0.0.0 play
> vite
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
VITE v5.2.11 ready in 281 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
这样能起来，但是依赖找不到。
存在警告：
来源为“http://localhost:5173/src/main.ts”的模块加载失败。 localhost:5173:70:46
来源为“http://localhost:5173/@vite/client”的模块加载失败。
chat
package.json 说明
{
"name": "@vue/router-playground",
"private": true,
"version": "0.0.0",
"scripts": {
"play": "vite",
"build": "vite build",
"types": "vue-tsc --noEmit",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.4.23"
},
"devDependencies": {
"@types/node": "^20.12.7",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/compiler-sfc": "^3.4.23",
"@vue/tsconfig": "^0.5.1",
"typescript": "~5.3.3",
"vite": "^5.2.9",
"vue-router": "workspace:*",
"vue-tsc": "^1.8.27"
}
}
这个 JSON 对象是一个 package.json 文件的内容，它是 Node.js 项目（包括 Vue 项目）的配置文件。这个特定的 package.json 文件定义了一个名为 @vue/router-playground 的项目，并且包含了一些脚本命令、依赖项和开发依赖项。以下是该文件中每个部分的详细解释：
-
"name": 项目名称，通常用于在 npm 上发布时识别。 -
"private": 设置为true表示这个包不应该被发布到公共 npm 仓库。 -
"version": 项目的版本号，遵循语义化版本控制格式。 "scripts":"play": 运行vite来启动开发服务器。"build": 使用vite build命令来构建项目，为生产环境生成最小化的静态资源。"types": 运行vue-tsc --noEmit，这是 TypeScript 的一个命令，用于类型检查 Vue 单文件组件，但不生成任何输出。"preview": 使用vite preview命令来预览构建后的静态资源，--port 4173指定了预览服务器的端口号。
"dependencies": 项目运行时所需的依赖。"vue": Vue.js 框架的核心库。
"devDependencies": 仅在开发过程中使用的依赖，如构建工具、类型声明文件等。"@types/node": Node.js 的 TypeScript 类型声明文件。"@vitejs/plugin-vue": Vite 插件，用于支持 Vue 单文件组件。"@vue/compiler-sfc": Vue 的单文件组件编译器，用于支持.vue文件。"@vue/tsconfig": Vue 项目的 TypeScript 配置文件。"typescript": TypeScript 编程语言的编译器。"vite": 现代前端构建工具。"vue-router": 注意这里的"workspace:*"表示 Vue Router 是当前 monorepo 结构下的一个子包，workspace是 npm 新引入的协议，用于在 monorepo 结构中引用本地包。"vue-tsc": Vue 单文件组件的 TypeScript 检查工具。
这个配置文件表明项目使用了 Vite 作为开发服务器和构建工具，Vue 3 作为框架，以及 Vue Router 作为路由管理器。同时，项目还配置了 TypeScript 支持，并且是一个 monorepo 结构，其中 Vue Router 是作为一个本地包被引用。
要运行这个项目，你需要执行以下步骤：
-
确保你已经安装了 Node.js 和 npm 或 yarn。
-
克隆项目到本地。
-
在项目根目录下运行
npm install或yarn来安装依赖。 -
运行
npm run play或yarn play来启动开发服务器。 -
访问开发服务器提供的地址（通常是
http://localhost:3000），查看应用。 -
如果需要构建项目，可以运行
npm run build或yarn build。
请注意，由于 vue-router 字段中的 "workspace:*" 配置，这可能意味着你需要使用 Node.js 的 corepack 工具来正确安装依赖。
如果你遇到与 corepack 相关的问题，你可能需要按照错误信息中的指示运行 corepack enable 命令。
可以移除吗？
在 package.json 文件中，"vue-router": "workspace:*" 这一行表示项目依赖于当前 monorepo（多包仓库）结构中的 vue-router 包。如果你想要注释掉这一行，你实际上是想要移除或修改这个依赖声明，而不是仅仅“注释”它。在 JSON 文件中，并没有提供传统编程语言中的注释功能，但你可以删除该行或将其替换为实际的版本号。
如果你的项目不是在 monorepo 结构中，或者你不想使用本地的 vue-router 包，你可以按照以下方式修改依赖：
-
删除依赖：如果你根本不需要
vue-router，你可以直接删除"vue-router"这一行。 -
修改为特定版本：如果你需要使用
vue-router但想指定一个特定的版本，你可以将"workspace:*"替换为该版本的版本号，例如："vue-router": "^4.0.0",这里
^4.0.0是一个示例版本号，你应该替换为你需要的确切版本。 -
使用最新版本：如果你想使用
vue-router的最新稳定版本，你可以省略版本号，让 npm/yarn 自动安装最新的版本："vue-router": "",
请注意，如果你删除或更改了 vue-router 的依赖声明，你需要重新运行 npm install 或 yarn 来安装新的依赖或更新项目的依赖。
如果你的项目确实是一个 monorepo 并且你想要继续使用本地的 vue-router 包，那么你应该确保 corepack 被正确配置，并且你的 monorepo 依赖设置是正确的。如果你不熟悉 monorepo 结构或 corepack，你可能需要进一步阅读相关的文档或寻求社区的帮助。
pnpm 是什么？和 npm 有什么区别？
pnpm 是一个 JavaScript 项目的包管理器，类似于 npm 和 Yarn。它允许你管理项目的依赖项，安装、更新和删除依赖，并提供一致的开发环境。
与 npm 和 Yarn 不同，pnpm 使用一种称为“符号链接依赖”的技术来管理依赖项。这意味着当你安装一个依赖项时，它不会在每个项目中创建独立的拷贝，而是将其保存在一个共享的存储库中，并使用符号链接将它们链接到每个项目的 node_modules 目录。这种方法可以节省磁盘空间，并提高依赖项的安装速度。
下面是一些 pnpm 与 npm 的主要区别：
-
符号链接依赖：pnpm 使用符号链接来共享依赖项，而不是在每个项目中复制依赖项的拷贝。这可以减少磁盘空间的占用，并提高依赖项的安装速度。
-
并行安装：pnpm 具有更好的并行安装能力，可以更快地安装项目的依赖项。
-
版本控制：pnpm 使用一个单一的版本控制文件来跟踪每个依赖项的版本，而不是像 npm 那样在每个项目中维护一个完整的依赖树。这使得版本控制更加简洁。
-
缓存管理：pnpm 有一个集中的缓存位置，用于存储下载的依赖项，而不是像 npm 那样在每个项目中维护一个缓存目录。这有助于节省磁盘空间并提高性能。
总的来说，pnpm 提供了一种更加高效和节省空间的方式来管理 JavaScript 项目的依赖项，尤其是对于拥有多个项目的开发者来说。
参考资料
https://github.com/jekip/naive-ui-admin
更多学习
更多实时资讯，前沿技术，生活趣事。尽在【老马啸西风】
交流社群：[交流群信息](https://mp.weixin.qq.com/s/rkSvXxiiLGjl3S-ZOZCr0Q)
