Vue 开发环境配置

最新推荐文章于 2024-05-13 08:35:21 发布

鸿之翼

最新推荐文章于 2024-05-13 08:35:21 发布

阅读量1.9k

点赞数

分类专栏： # Vue基础文章标签： vue.js arcgis 前端

本文链接：https://blog.csdn.net/weixin_42350100/article/details/131569603

版权

Vue基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、安装 Node.Js

Installing Node.js 还要安装 npm 命令行工具 (以及一个以 npm 为中心的补充工具 npx)，它提供了安装其他命令行工具的网关。js 和 npm 在所有系统上都能工作:macOS、Windows 和 Linux。

现在在您的系统上安装 npm，转到上面的 URL，下载并运行适合您的操作系统的 Node.js 安装程序。如果出现提示，请确保将 npm 作为安装的一部分。

https://nodejs.org/en

在这里插入图片描述

下载，安装，同意授权，自定义安装路径

在这里插入图片描述

选择默认

在这里插入图片描述
Node.js runtime：Node运行环境
corepack manager：核心包
npm package manager表示npm包管理器
Online documentation shortcuts ：在线文档快捷方式
Add to PATH：添加到环境变量

不勾选

在这里插入图片描述

不勾选，打勾表示下载Python和VSCode运行环境及乱七八糟的运行库资源

如果打了√会把node 所有的工具都下载，需要很久，以后要什么工具，直接npm下载

安装完成

在这里插入图片描述

测试是否安装成功

cmd检查环境：win+R——>cmd——>键入node -v
node在安装同时安装npm：键入npm -v

C:\Users\Administrator>node -v
v18.16.0

C:\Users\Administrator>npm -v
9.5.1

如上表示安装完成

C:\Users\Administrator>node -v
'node' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

检查环境变量：右击此电脑——>属性——>高级系统设置——>环境变量——>系统变量——>Path——>确保Node环境已添加——>确定——>关闭全部窗口

配置环境变量
右击此电脑——>属性——>高级系统设置——>环境变量——>系统变量——>Path——>新建

E:\VSCode\NodeJS
E:\VSCode\NodeJS\node_global\node_modules

添加到系统变量Path中

Node.js环境配置

更改npm安装全局模块的目录和缓存路径

npm install xxx时默认存放路径为：C:\Users\用户名\AppData\Roamin

开始配置更改(自定义npm install xxx 存放路径)：进入Node安装根目录，创建“node_global”和“node_cache”空目录文件夹——>分别用于当前node资源的安装和缓存

重点注意：还需要在node_global目录下在创建一个“node_modules”空目录文件夹

在这里插入图片描述

cmd命令指向新建的两个文件夹
npm config set prefix “创建的node_global文件夹所在路径”
npm config set cache “创建的node_cache文件夹所在路径”

C:\Users\Administrator>npm config set prefix "E:\VSCode\NodeJS\node_global"

C:\Users\Administrator>npm config set cache "E:\VSCode\NodeJS\node_cache"

C:\Users\Administrator>

二、安装 Vue CLI

终端中运行以下命令：
npm install --global @vue/cli

C:\Users\Administrator>npm install --global @vue/cli
npm ERR! code ETIMEDOUT
npm ERR! syscall connect
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/deepmerge failed, reason: connect ETIMEDOUT 104.16.23.35:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\VSCode\NodeJS\node_cache\_logs\2023-05-10T14_38_26_276Z-debug-0.log

网络问题

C:\Users\Administrator>npm install --global @vue/cli
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
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). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
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). 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-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). 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 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 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). 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-express@3.12.0: The `apollo-server-express` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). 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). 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). 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 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 apollo-server-core@3.12.0: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). 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.

added 858 packages in 13m

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

安装成功

配置环境变量

cmd 输入 npm config list 查看目录，找到 prefix 目录下对应的地址。

E:\jq\VSCode>npm config list
; "builtin" config from E:\VSCode\NodeJS\node_modules\npm\npmrc

; prefix = "E:\\jq\\VSCode\\${APPDATA}\\npm" ; overridden by user

; "user" config from C:\Users\Administrator\.npmrc

cache = "E:\\VSCode\\NodeJS\\node_cache"
prefix = "E:\\VSCode\\NodeJS\\node_global"

; node bin location = E:\VSCode\NodeJS\node.exe
; node version = v18.16.0
; npm local prefix = E:\jq\VSCode
; npm version = 9.5.1
; cwd = E:\jq\VSCode
; HOME = C:\Users\Administrator
; Run `npm config ls -l` to show all defaults.

在“系统变量”部分选中path一行，再点击下面的“编辑”按钮：

点击进去后，选中页面的“新建”按钮：

在”新建“页面的最后一行，加入查询到的prefix后面的路径，再点击“确定”，在接下来的页面上点击确定

在这里插入图片描述

测试是否安装成功

E:\>cd E:\jq\VSCode

E:\jq\VSCode>vue -V
@vue/cli 5.0.8

创建项目

在终端，用 cd 命令进入你想要创建示例的文件夹，然后执行 vue create first-project-vue。你可以选择默认选项 Default ([Vue 3] babel, eslint) 然后按下键盘上的 Enter 继续。CLI 现在将开始构建你的项目，并安装所有依赖项。

E:\jq\VSCode>vue create first-project-vue
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? (Y/n)

选 n

Vue CLI v5.0.8
Failed to check for updates
? Target directory E:\jq\VSCode\first-project-vue already exists. Pick an action: (Use arrow keys)

> Overwrite
> Merge
> Cancel

选 Overwrite

Vue CLI v5.0.8
Failed to check for updates
? Please pick a preset: (Use arrow keys)

> Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
> Manually select features

选 Vue 3

Vue CLI v5.0.8
Failed to check for updates
✨  Creating project in E:\jq\VSCode\first-project-vue.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 855 packages in 13m

92 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...


added 101 packages in 2m

105 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project first-project-vue.
👉  Get started with the following commands:

 $ cd first-project-vue
 $ npm run serve

E:\jq\VSCode>

运行项目


E:\jq\VSCode>cd first-project-vue

E:\jq\VSCode\first-project-vue> npm run serve

> first-project-vue@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
[24%] building (3/7 modules)



DONE  Compiled successfully in 13955ms                                                                         22:29:24


  App running at:

  - Local:   http://localhost:8080/
  - Network: http://192.168.3.3:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.