vue安装与配置

---

前言

介绍vue安装与配置

---

1、安装 node.js:

1. node.js 官网：https://nodejs.org/en/download

2.跟着提示安装，成功后在 CMD 控制台输入 node -v 和 npm -v 验证是否安装成功

3.配置默认安装目录和缓存日志目录
 由于在执行全局安装语句时，安装的模块会默认安装到 C:\Users\用户名\AppData\Roaming\npm 目录下，久而久之C盘很容易被占满（C盘足够大可以无视此步骤），所以将默认安装目录和缓存日志目录重新配置到其他盘符节约C盘空间。在其他磁盘下创建node文件夹：

 

执行命令，配置默认安装目录和缓存日志目录到刚才创建的文件夹
npm config set prefix "某磁盘/node/node_global"
npm config set cache "某磁盘/node/node_cache"

4.配置环境变量
  进入高级环境设置，点击“环境变量”：在系统变量下新建 NODE_PATH 变量，输入安装目录 node_global 下的 node_modules 的路径。

在用户变量的Path中“编辑”配置nodejs安装路径：

 

注意是新建

5.配置淘宝镜像

npm config set registry https://registry.npmmirror.com

2.安装vue:

1.安装 webpack 模块

 npm install webpack -g

2.安装脚手架

npm install @vue/cli –g

3.安装vue-router V4

npm install vue-router@4

4.查看一下npm的全局情况：

npm list -global

5.打开Vue 项目管理器

vue ui(会自动打开网址）

6.创建项目

vue2.0：vue init webpack 项目名 
vue3.0：vue create 项目名  ( 项目名不要取中文和大写字母。)

然后回车,cd 项目

运行项目：npm run serve

然后在本地浏览器输入网址： http://localhost:8080/打开页面

过程中会出现的错误：

1.CLI v5.0.8 ✨ Creating project in C:\\Users\\ZhuanZ\\3.0projectnb. ⚙️ Installing CLI plugins. This might take a while...

npm ERR! code ETARGET npm ERR! notarget No matching version found for @webassemblyjs/[helper-buffer@1.12.1](mailto:helper-buffer@1.12.1). npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in: D:.a\\sofeware\\node\\node\_cache\_logs\\2024-03-13T10\_39\_09\_901Z-debug-0.log ERROR Error: command failed: npm install --loglevel error --legacy-peer-deps Error: command failed: npm install --loglevel error --legacy-peer-deps at ChildProcess. (D:.a\\sofeware\\node\\node\_global\\node\_modules@vue\\cli\\lib\\util\\executeCommand.js:138:16) at ChildProcess.emit (node:events:518:28) at cp.emit (D:.a\\sofeware\\node\\node\_global\\node\_modules@vue\\cli\\node\_modules\\cross-spawn\\lib\\enoent.js:34:29) at maybeClose (node:internal/child\_process:1105:16) at ChildProcess.\_handle.onexit (node:internal/child\_process:305:5)

原因：这个错误是由于在安装CLI插件时，npm无法找到所需的包@webassemblyjs/helper-buffer@1.12.1的版本导致的。这可能是由于该版本的包在npm仓库中不存在或被删除了。

解决：使用npm install命令手动安装缺失的包：npm install @webassemblyjs/helper-buffer@1.12.1

2.npm WARN deprecated @babel/[plugin-proposal-class-properties@7.18.6](mailto: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 [stable@0.1.8](mailto:stable@0.1.8): Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array/sort#browser\_compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility) npm WARN deprecated [consolidate@0.15.1](mailto:consolidate@0.15.1): Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at [https://forwardemail.net](https://forwardemail.net) ; follow/watch [https://github.com/ladjs/consolidate](https://github.com/ladjs/consolidate) for updates and release changelog npm WARN deprecated [webpack-chain@6.5.1](mailto:webpack-chain@6.5.1): Package no longer supported. Contact Support at [https://www.npmjs.com/support](https://www.npmjs.com/support) for more info.

原因：这些警告是npm在安装依赖包时发出的，通常是由于您的项目中的某些依赖项已经过时或被废弃

解决：更新项目的依赖项：npm update