创建我的vue3+vite项目

哈密瓜和她的猫狗

已于 2024-08-06 16:40:07 修改

阅读量296

点赞数 4

文章标签： vue.js 前端 javascript

于 2024-08-05 16:33:59 首次发布

本文链接：https://blog.csdn.net/jassica_morty/article/details/140925982

版权

npx create-vite mytest vue

PS D:\work\js_project\vscode\testproject> npm create vite@latest mytest --template vue 

> npx
> create-vite mytest vue

√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in D:\work\js_project\vscode\testproject\mytest...

Done. Now run:

  cd mytest
  npm install
  npm run dev

PS D:\work\js_project\vscode\testproject> npm create vite@latest mytest --template vue

> npx
> create-vite mytest vue

√ Target directory "mytest" is not empty. Please choose how to proceed: » Remove existing files and continue
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in D:\work\js_project\vscode\testproject\mytest...

Done. Now run:

  cd mytest
  npm install
  npm run dev

命令 `npx create-vite mytest vue` 是用来创建一个名为 `mytest` 的新项目，使用 Vite 作为构建工具，并选择 Vue.js 作为前端框架。

这里是命令的详细解释：

- `npx`: 这是一个包运行器，用于执行 npm 中的包或者在不安装的情况下运行包中的二进制文件。
- `create-vite`: 这是一个 npm 脚本，用于初始化一个新的 Vite 项目。Vite 是一个现代的前端构建工具，它使用原生 ES 模块导入（ESM）来提供快速的开发体验。
- `mytest`: 这是你将要创建的项目名称。
- `vue`: 这是你选择的模板，指定使用 Vue.js 作为项目的基础框架。

当你执行这个命令时，`create-vite` 会引导你完成项目的初始化过程，包括选择框架、配置项目设置等。如果一切顺利，你将得到一个包含 Vue.js 的新项目，准备好进行开发。

如果你已经运行了这个命令，并且看到了选择框架的提示，你可以通过键盘的上下箭头键选择 `Vue`，然后按回车键继续。

继续

npm i

PS D:\work\js_project\vscode\testproject> npm i

up to date in 770ms

4 packages are looking for funding
  run `npm fund` for details

npm i 是一个常用的 npm（Node Package Manager）命令，它代表 "npm install"。

这个命令用于安装项目所需的依赖项。

当你在项目中运行这个命令时，npm 会查看 package.json 文件中的 dependencies 和 devDependencies 部分，并安装所有列出的包。

例如，如果你的项目目录中有一个 package.json 文件，它可能看起来像这样：
{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11"
  }
}
当你运行 npm i 时，npm 会安装 dependencies 下的 react 和 react-dom，以及 devDependencies 下的 @babel/core 和 @babel/preset-env。

此外，npm i 还有一些变体，例如：

npm install <package>：安装一个包并将其添加到 dependencies。
npm install <package> --save-dev 或 npm i <package> -D：安装一个包并将其添加到 devDependencies。
npm install <package> --global 或 npm i -g <package>：全局安装一个包。

使用 npm i 可以快速安装所有依赖，确保你的项目可以正常运行。

运行

npm run dev

PS D:\work\js_project\vscode\testproject\mytest> npm run dev

> mytest@0.0.0 dev
> vite

'vite' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
PS D:\work\js_project\vscode\testproject\mytest> vite --version
vite : 无法将“vite”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包
括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ vite --version
+ ~~~~
    + CategoryInfo          : ObjectNotFound: (vite:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

PS D:\work\js_project\vscode\testproject\mytest> npm install -g vite
npm error code EPERM
npm error syscall mkdir
npm error path D:\tools\nvm\v20.16.0\node_modules\vite
npm error errno -4048
npm error Error: EPERM: operation not permitted, mkdir 'D:\tools\nvm\v20.16.0\node_modules\vite' 
npm error     at async mkdir (node:internal/fs/promises:858:10)
npm error     at async D:\tools\nvm\v20.16.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:624:20
npm error     at async Promise.allSettled (index 0)
npm error     at async [reifyPackages] (D:\tools\nvm\v20.16.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:325:11)
npm error     at async Arborist.reify (D:\tools\nvm\v20.16.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:142:5)
npm error     at async Install.exec (D:\tools\nvm\v20.16.0\node_modules\npm\lib\commands\install.js:150:5)
npm error     at async Npm.exec (D:\tools\nvm\v20.16.0\node_modules\npm\lib\npm.js:207:9)        
npm error     at async module.exports (D:\tools\nvm\v20.16.0\node_modules\npm\lib\cli\entry.js:74:5) {
npm error   errno: -4048,
npm error   code: 'EPERM',
npm error   syscall: 'mkdir',
npm error   path: 'D:\\tools\\nvm\\v20.16.0\\node_modules\\vite'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It's possible that the file was already in use (by a text editor or antivirus),        
npm error or that you lack permissions to access it.
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error A complete log of this run can be found in: C:\Users\fortu\AppData\Local\npm-cache\_logs\2024-08-05T06_49_56_217Z-debug-0.log
PS D:\work\js_project\vscode\testproject\mytest>

命令行运行：

npm install -g vite

C:\Users\fortu>npm install -g vite
npm error code EPERM
npm error syscall mkdir
npm error path D:\tools\nvm\v20.16.0\node_modules\vite
npm error errno -4048
npm error Error: EPERM: operation not permitted, mkdir 'D:\tools\nvm\v20.16.0\node_modules\vite'
npm error     at async mkdir (node:internal/fs/promises:858:10)
npm error     at async D:\tools\nvm\v20.16.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:624:20
npm error     at async Promise.allSettled (index 0)
npm error     at async [reifyPackages] (D:\tools\nvm\v20.16.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:325:11)
npm error     at async Arborist.reify (D:\tools\nvm\v20.16.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:142:5)
npm error     at async Install.exec (D:\tools\nvm\v20.16.0\node_modules\npm\lib\commands\install.js:150:5)
npm error     at async Npm.exec (D:\tools\nvm\v20.16.0\node_modules\npm\lib\npm.js:207:9)
npm error     at async module.exports (D:\tools\nvm\v20.16.0\node_modules\npm\lib\cli\entry.js:74:5) {
npm error   errno: -4048,
npm error   code: 'EPERM',
npm error   syscall: 'mkdir',
npm error   path: 'D:\\tools\\nvm\\v20.16.0\\node_modules\\vite'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It's possible that the file was already in use (by a text editor or antivirus),
npm error or that you lack permissions to access it.
npm error
npm error If you believe this might be a permissions issue, please double-chec

继续右键管理员身份：

C:\Windows\System32>npm install -g @vue/cli
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm warn deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

added 852 packages in 2m

继续：

C:\Windows\System32>npm install -g vite

added 10 packages in 12s

C:\Windows\System32>npm -version
10.8.1

C:\Windows\System32>vite -version
vite/5.3.5 win32-x64 node-v20.16.0

操作解决报错：‘vite‘ 不是内部或外部命令，也不是可运行的程序或批处理文件_vite' 不是内部或外部命令,也不是可运行的程序或批处理文件。-CSDN博客

C:\Windows\System32>npm list -g
C:\Program Files\nodejs -> .\
+-- @vue/cli@5.0.8
+-- corepack@0.28.2
+-- npm@10.8.1
`-- vite@5.3.5

如果你想要验证 npm 全球包的安装路径，你可以按照以下步骤操作：

打开命令提示符（CMD）。
输入以下命令并按回车键：

npm config get prefix

C:\Windows\System32>npm install -g vite

changed 10 packages in 9s

C:\Windows\System32>vite --version
vite/5.3.5 win32-x64 node-v20.16.0

C:\Windows\System32>

PS D:\work\js_project\vscode\testproject\mytest> npm run dev         

> mytest@0.0.0 dev
> vite

failed to load config from D:\work\js_project\vscode\testproject\mytest\vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from D:\work\js_project\vscode\testproject\mytest\vite.config.js.timestamp-1722846473115-b4c590a572eda.mjs
    at packageResolve (node:internal/modules/esm/resolve:854:9)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1169:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36)

报错飘红

解决方案如下：

确保 vite 已经安装：确保项目中已经安装了 vite。运行以下命令来安装它
```
npm install vite --save-dev
```

PS D:\work\js_project\vscode\testproject\mytest> npm run dev

> mytest@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v5.3.5  ready in 901 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help