# vue3-rabbit

**Repository Path**: deziyou/vue3-rabbit

## Basic Information

- **Project Name**: vue3-rabbit
- **Description**: vue learning
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-03
- **Last Updated**: 2025-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-rabbit

This template should help get you started developing with Vue 3 in Vite.

## create history 
```
npm create vue@latest
# 名称：vue3-rabbit 组件：pinia vue-router eslint
npm i
npm config set registry https://registry.npmmirror.com  # 可选 如果npm下载正常就无需修改源
npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import     # 按需引入element
npm install axios       # 安装axios
# 安装error lens 插件 vscode的插件
# 安装吸顶导航
npm i @vueuse/core

npm add -D vite-plugin-vue-devtools # 安装 devtools


# 其他 
## git去掉package
git rm --cached package.*
git commit -m "Remove package.* from version control"
git push
## 获取当前npm远程库设置
npm config get registry
## 设置官方库
npm config set registry https://registry.npmjs.org/
## 设置淘宝库
npm config set registry https://registry.npmmirror.com/



```




## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```




#### 问题记录
npm add -g @vue/devtools     #失败了 具体错误如下：

npm error code 1
npm error path /usr/local/lib/node_modules/@vue/devtools/node_modules/electron
npm error command failed
npm error command sh -c node install.js
npm error RequestError: read ECONNRESET
npm error     at ClientRequest.<anonymous> (/usr/local/lib/node_modules/@vue/devtools/node_modules/got/dist/source/core/index.js:970:111)
npm error     at Object.onceWrapper (node:events:639:26)
npm error     at ClientRequest.emit (node:events:536:35)
npm error     at origin.emit (/usr/local/lib/node_modules/@vue/devtools/node_modules/@szmarczak/http-timer/dist/source/index.js:43:20)
npm error     at emitErrorEvent (node:_http_client:104:11)
npm error     at TLSSocket.socketErrorListener (node:_http_client:518:5)
npm error     at TLSSocket.emit (node:events:524:28)
npm error     at emitErrorNT (node:internal/streams/destroy:170:8)
npm error     at emitErrorCloseNT (node:internal/streams/destroy:129:3)
npm error     at process.processTicksAndRejections (node:internal/process/task_queues:90:21)
npm error     at TLSWrap.onStreamRead (node:internal/stream_base_commons:216:20)
npm error A complete log of this run can be found in: /Users/robincool/.npm/_logs/2025-03-08T03_22_31_429Z-debug-0.log

##### 调试安装electron
npm install electron --verbose
在默认情况下，npm的输出是简洁的，只包含必要的信息。但是，当你遇到问题时，你可能需要更多的上下文信息来诊断问题所在。这时，--verbose参数就显得非常有用。它可以让你看到npm在执行过程中的详细步骤，包括模块的加载顺序、依赖关系、错误信息等。


##### 问题 运行遇到  在更换为老的package.json之前
项目运行遇到错误 node:internal/modules/esm/resolve:275
    throw new ERR_MODULE_NOT_FOUND(
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/robincool/Downloads/code/xiaotuxian/vue3-rabbit/node_modules/dist/node/cli.js' imported from /Users/robincool/Downloads/code/xiaotuxian/vue3-rabbit/node_modules/.bin/vite
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
    at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:546:36)
    at TracingChannel.tracePromise (node:diagnostics_channel:344:14)
    at ModuleLoader.import (node:internal/modules/esm/loader:545:21) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///Users/robincool/Downloads/code/xiaotuxian/vue3-rabbit/node_modules/dist/node/cli.js'
}
######## 最后解决
重新创建一个类似项目 用里面的node_modules文件夹/package 和 package-lock平替
##### 出现 .... spawn code ENOENT ('code' command does not exist in 'PATH').
通过增加环境变量解决
vi ~/.bash_profile
export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
source ~/.bash_profile

#### 其他学习
##### 构建工具区别
项目模板和构建工具
‌npm create vite@latest‌：使用Vite构建工具创建项目模板。Vite是一个现代化的前端构建工具，适用于快速搭建Vue、React或原生JavaScript项目。它以开发模式下的极速构建著称，利用ES模块的特性，只有在真正需要时才编译文件，提供即时的开发体验‌。
‌npm init vue@latest‌：使用Vue CLI创建项目模板。Vue CLI是一个官方提供的用于快速搭建Vue项目的脚手架工具，集成了Vue相关的生态系统和最佳实践，包括路由、状态管理、打包配置等。它适用于需要Vue生命周期、VueRouter、Vuex等生态全功能以及预定义配置和插件的复杂项目‌。
适用场景
‌Vite‌：适合轻量级项目或需要快速开发的场景。由于其极速的开发体验和现代化的构建特性，Vite特别适合小型项目和原型开发‌。
‌Vue CLI‌：适用于需要复杂配置和大量自定义功能的项目。Vue CLI提供了更多的选项和配置，适用于需要完整Vue生态系统和预定义配置的大型项目‌