VUE的安装

已于 2025-01-23 20:38:24 修改
阅读量1k 收藏 27
点赞数 24
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2025-01-23 20:38:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2201_76081438/article/details/145328845
版权

要用vue必须要先安装nodejs

nodejs的安装及环境配置

1.下载安装包

下载地址：

https://nodejs.org/zh-cn/download/

2.安装程序

下载完成后，双击安装包开始安装

①点击next

在这里插入图片描述

②点同意、next

在这里插入图片描述

③默认路径是C:\Program Files\nodejs\，可修改

在这里插入图片描述

④根据自己的需要进行选择，我选的默认，之后点next

  • Node.js runtime ：表示运行环境
  • npm package manager：表示npm包管理器
  • online documentation shortcuts ：在线文档快捷方式
  • Add to PATH：添加到环境变量

在这里插入图片描述

⑤这个不勾选，直接next即可

这句话的意思是：自动安装必要的工具。请注意，这也将安装Chocolatey。安装完成后，脚本将在新窗回中弹出。

在这里插入图片描述

⑥install安装

在这里插入图片描述

⑦finish完成安装

在这里插入图片描述

⑧查看系统变量发现.msi格式的安装包已经将node启动程序添加到系统环境变量path中

在这里插入图片描述

查看

打开cmd窗口，输入 node -v 查看node版本
在这里插入图片描述

输入 npm -v 查看npm版本

在这里插入图片描述

3.环境配置

①打开安装的目录，在安装目录下新建两个文件夹：node_cache和node_global

在这里插入图片描述

②用管理员身份运行cmd窗口

输入 npm config set prefix “你的安装目录\node_global” 和 npm config set cache “你的安装目录\node_cache” 命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

在这里插入图片描述

③配置环境变量

系统属性–高级–环境变量

在这里插入图片描述

在系统变量中新建 变量名：NODE_PATH 变量值：D:\Program Files\nodejs\node_global\node_modules

在这里插入图片描述

编辑lenovo的用户变量中的Path，将默认的C盘下的AppData\Roaming\npm修改成D:\Program Files\nodejs\node_global，点击确定
在这里插入图片描述

在系统变量的Path中添加NODE_PATH，点击确定

在这里插入图片描述

4.测试

配置完成后安装一个module测试下，打开cmd窗口，输入一下命令进行模块的全局安装

npm install express -g   // -g是全局安装的意思

在这里插入图片描述
在这里插入图片描述

5.修改仓库镜像源地址

查看当前npm仓库镜像地址

npm config get registry

在这里插入图片描述

修改仓库镜像地址为淘宝镜像

npm config set registry https://registry.npm.taobao.org/

在这里插入图片描述

安装vue

使用管理员命令运行cmd，运行以下命令

这个命令安装好之后是2.9.6版本的，下载最新版本的命令是：npm install -g @vue/cli

如果之前安过，且如果确定可以覆盖现有的文件，可以使用--force参数来强制安装：npm install -g @vue/cli --force

npm install vue -g

出现以下错误就把镜像换为华为源

在这里插入图片描述

修改仓库镜像地址为华为源

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

在这里插入图片描述

出现下面即安装成功

在这里插入图片描述

安装webpack模板

npm install webpack -g

在这里插入图片描述

安装webpack-cli

npm install webpack-cli -g

在这里插入图片描述

安装脚手架vue-cli

npm install vue-cli -g

在这里插入图片描述

输入 vue --version 能看到版本号即成功安装

在这里插入图片描述

安装 vue-router

npm install vue-router -g

在这里插入图片描述

安装好之后打开 node_modules文件夹，可以看到安装的模块都在这里

在这里插入图片描述

浏览器插件安装(在chrome、 Edge 中进行安装)

Edge

打开浏览器的扩展商店

https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home

在搜索框输入Vue Devtools—获取

在这里插入图片描述

点击添加扩展

在这里插入图片描述

在浏览器中打开一个包含vue的网页，F12打开开发者工具，会看到一个新的Vue选项卡，点击它可以开始调试

在这里插入图片描述

chrome

打开chrome的扩展程序（可直接在地址栏输入：chrome://extensions/），需要打开开发者模式

在这里插入图片描述

接着呢，点击【加载已解压的扩展程序】选择我们刚刚下载的插件，或者直接将插件拖拽到该区域，----添加扩展程序

在这里插入图片描述

插件：

在这里插入图片描述

在浏览器中打开一个包含vue的网页，F12打开开发者工具，会看到一个新的Vue选项卡，点击它可以开始调试

在这里插入图片描述

vue2/3 - 报错 Vue packages version mismatch（vue安装install或运行run时报错，改vue | vue-template-compiler依旧无效，解决
高级前端工程师
05-02 3691
vue2，vue，vue-template-compiler，vue3，Vue packages version mismatch，版本号对应也不行，Vue packages version mismatch: 版本始终不对的解决方案，Vue packages version mismatch:VUE版本不匹配，报错完美解决，vue报错解决，vue无法运行提示错误，vue和vue-template-compiler版本号怎么对应，vue-template-compiler怎么和vue的版本进行匹配，还是无法
vue安装及入门
weixin_63104855的博客
04-25 1593
Vue安装及入门
vue安装包.zip
06-11
这是一个js常用的开发库完整的安装包，包括安装过程说明、安装需要的库包等
VUE各种安装包
qing29的博客
01-31 709
安装element-ui：npm i element-ui -S // yarn add element-ui。安装echart包：npm install echarts --save // yarn echarts。安装axios包： npm install axios // yarn add axios。安装mint-ui包：npm i mint-ui -S // yarn mint-ui。安装vant包：npm i vant -S // yarn add vant。
2025超详细Vue安装与配置教程
最新发布
徐徐徐的博客
04-16 2221
1.环境变量—用户变量—选中Path—点编辑-将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 ：你的安装目录\node_global。③建议把目录更换到自己想要安装的目录里面（我这里是提前建好一个目录D:\download_software\nodejs。打开终端，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。变量值：你的安装目录\node_global\node_modules。（如果在这里出现下面的报错，就把镜像源换成华为源）
vue安装包！！！！免费
05-31
vue安装包！！！！免费
vue 零散记录之全局安装包
小芳的专栏
12-13 400
首先了解下基本概念： 本地安装（local）、全局安装（global） npm install grunt # 本地安装 使用全局安装理由：每次创建目录的时候开始习惯在当前目录下安装启动项目，后来觉得不太方便，不如在全局安装起来方便。 2.下面开始介绍全局安装的方式，一般默认情况下执行命令 npm install -g grunt-cl 即可安装到全局， 维护起来确不知道路径在哪里，这时候可以执行命令查看全局安装路径： npm config get执行完成后 prefix = "C:\\Use
一、Vue简介及安装包
Lvruoyu的博客
04-21 975
01. Vue.js基础入门 01. 初识 前端技术的发展 HTML：HTML主要用来编写网页的结构，例如表示超链接。 CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。 JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。 jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。 Vue：Vu
Vue实战指南：Vue安装使用Less，解决与Webpack的冲突
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 2828
然而，在集成Less到Vue项目中时，我们可能会遇到一些配置上的挑战，特别是当涉及到Webpack这样的构建工具时。在Vue项目中，Webpack通常通过Vue CLI来配置，用以编译和优化我们的代码。通过以上步骤和示例，你应该已经掌握了如何在Vue项目中集成Less，并且知道如何避免与Webpack之间的潜在冲突。接下来就可以开始尝试将Less应用到你的项目中，享受更高效的样式管理带来的便利吧。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
好细的Vue安装与配置
m0_67403272的博客
07-30 1518
网上有些方法是删除CUsers用户名下的.npmrc文件，万万不可这样，因为那个文件删除了，我们前面修改的全局模块目录和缓存目录配置就没了！1.创建项目（最好在cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在CUsers用户名，也可以直接在想要的项目路径下输入cmd）可能会出现权限问题，所以我们还是以管理员运行cmd窗口。其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。...
vue安装Base64转码
weixin_46953697的博客
03-15 2370
第一步：项目文件路径下运行 npm install --save js-base64 或者 cnpm install --save js-base64 第二步：main.js文件中引入： const Base64 = require('js-base64').Base64; new Vue({ el: '#app', Base64, }) 第三步：加载页面script部分引入： const base64 = require('js-base64').Base64; const exstr=ba
vueJS离线安装包
03-21
vueJS离线安装包
在使用Vue的过程中安装包的区别
weixin_30302609的博客
04-30 111
一：全局包: 用在终端里面 你可以在任何目录下进行安装，安装好了全局包之后，全局包一般安装在 C:/program files/nodejs C:/用户/xxx/App Data/Roaming/npm npm i 全局包 -g 二：本地包: 用在当前的项目里面 必须切换当前根目录，进行安装 ...
（一）vue安装
秋风起了
01-25 516
在node基础上安装 npm install -g vue-cli 测试vue是否已安装，和可用模板 vue list 安装webpack模板 vue init webpack name >> 大型项目 vue init webpack-simple name >> 一般自用 看需要y/n 运行vue npm run dev 各种依赖看需求 npm i vue
Vue的安装包版本package.json
zerodiyi的博客
04-20 253
1, Vuex下载： npm install vuex@3.6.2。3, Echarts下载： npm i echarts。2，axios下载：npm i axios。
Vue快速入门安装与配置（最新版、超详细、图文结合）
m0_74732859的博客
07-13 2828
关于Vue最新版的安装就总结到这里了，如果小伙伴们安装过程中出现了什么问题，欢迎大家在评论区留言，我会及时回答大家的问题的。长路漫漫，编程之路渐行渐远，相信不少小伙伴对未来计算机发展道路还很迷茫，计算机的就业道路很广泛，未来可以细分很多专业：同时在当下人工智能、互联网快速发展的时代，我们计算机专业的就业方向也非常广泛，包括技术类、产品类、物计算机专业的就业方向非常广，联网、金融、游戏等领域。
vue包的安装及问题
weixin_30826761的博客
06-02 325
cls 清空控制台 解决ESlilint语法上边的警告方法： 在 【.eslintrc.js】的rules中添加 这段代码"space-before-function-paren": ["error", "always"], 记得把 always改成never 然后重启项目就可以了 always（默认值）需要一个空格后跟(参数。 never不允许任何空格后跟(参数。 ...
Vue_安装vue脚手架
qq_45829851的博客
10-28 973
（这一步不是必须的，国外的源下载会很慢，只要你慢你就可以换成国内淘宝的源）：①②③（这一步可选，如果不创建则nodejs会有默认的文件夹）使用npm命令安装模块分为本地安装和全局安装。会安装到当前项目，项目目录下会多一个 node_modules文件夹会安装到指定的目录(node_global)另外，如果没有创建全局目录node_global，那么全局安装的文件将会保存 到 C:\Users\zhoujie\AppData\Roaming\npm。
学习 Vue 必备——Vue.js devtools 插件安装免费教程（可不必翻墙，极简插件）
好好吃饭，好好睡觉
07-02 2691
Vue.js DevTools 是一个用于增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。Vue.js DevTools 是一款基于chrome(谷歌) 游览器的插件，所以本文主要介绍基于 chrome(谷歌）浏览器的安装教程。 学习 Vue 必备——Vue.js devtools 插件安装免费教程（可不必翻墙，极简插件，保姆级教程）
vite-plugin-vue-mcp
03-24
<think>好的，我需要帮助用户解决关于vite-plugin-vue-mcp插件的问题。用户想知道如何使用或排除这个插件的故障。首先，我需要确认这个插件的存在和相关信息。可能用户拼写有误，比如“mcp”是否正确？常见的Vue插件可能有不同的缩写，比如Vite的Vue插件通常是@vitejs/plugin-vue，但不确定mcp是什么。 接下来，我应该检查用户提供的引用内容，看看是否有相关线索。引用1提到Qt调试和Python命令，引用2关于网络配置，引用3是Docker部署，引用4是路由配置。这些似乎与Vite或Vue无关，可能用户提供的引用不相关，需要忽略。 然后，我应该假设用户可能拼错了插件名称，或者这个插件不太常见。建议用户确认名称的正确性，并检查npm或GitHub上的资源。接着，常规的使用步骤包括安装、配置vite.config.js，以及可能的常见问题解决方法，比如HMR不工作、构建错误等。如果插件有特定配置，可能需要查阅官方文档。另外，建议用户提供更多错误信息，以便进一步排查。 最后，生成相关问题，帮助用户扩展可能的疑问点，比如与其他工具的集成、配置选项等。确保回答结构清晰，分步骤说明，并提醒用户检查拼写和文档资源。</think>关于`vite-plugin-vue-mcp`插件，目前公开的技术文档和社区讨论较少，可能是自定义插件或未广泛发布的工具。以下是排查和使用的建议： --- ### **步骤1：确认插件名称和来源** 1. **检查拼写**：确认插件名称正确，例如是否应为`vite-plugin-vue-mpc`或其他变体。 2. **来源验证**： - 在npm仓库搜索：`npm search vite-plugin-vue-mcp` - 在GitHub搜索相关代码片段或仓库。 - 检查是否为私有插件（需通过内部渠道获取文档）。 --- ### **步骤2：通用插件使用方法** 若插件已安装，常规使用流程如下： 1. **安装插件**： ```bash npm install vite-plugin-vue-mcp --save-dev # 或 yarn add vite-plugin-vue-mcp -D ``` 2. **配置`vite.config.js`**： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueMcp from 'vite-plugin-vue-mcp' export default defineConfig({ plugins: [ vue(), vueMcp(/* 配置参数（若有） */) ] }) ``` --- ### **步骤3：常见问题排查** 1. **编译错误**： - 检查Node.js和Vite版本兼容性。 - 确认Vue版本是否匹配插件要求（如Vue 2/3）。 - 尝试清理缓存：`rm -rf node_modules/.vite`。 2. **功能未生效**： - 检查插件是否需额外配置（如注入全局变量或修改构建行为）。 - 在控制台启用调试模式： ```bash DEBUG=vite-plugin* vite build ``` 3. **HMR热更新失效**： - 确保开发服务器配置正确，未与其他插件冲突。 --- ### **步骤4：替代方案** 若插件无法找到，可考虑类似功能插件： - **组件自动导入**：`unplugin-vue-components` - **代码分割优化**：`vite-plugin-chunk-split` - **状态管理**：`pinia-plugin-persistedstate` --- ### **引用补充** 若插件与特定框架（如微前端或私有库）相关，可能需要检查内部文档或联系开发者[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值