安装vue的详细方法

最新推荐文章于 2024-05-16 13:24:43 发布
最新推荐文章于 2024-05-16 13:24:43 发布
阅读量450 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mo3408/article/details/82255877
版权
web前端技术 同时被 3 个专栏收录
274 篇文章 12 订阅 ¥129.90 ¥299.90
订阅专栏 超级会员免费看
web
205 篇文章 8 订阅 ¥129.90 ¥299.90
订阅专栏 超级会员免费看
vue2.x
21 篇文章 7 订阅 ¥299.90 ¥399.90
订阅专栏 超级会员免费看
这篇博客详细介绍了Vue的安装步骤：首先需要安装node.js，通过步骤安装后验证版本；接着使用命令行安装Vue架构，创建项目；然后通过npm install安装依赖；最后运行npm run dev启动项目。
摘要由CSDN通过智能技术生成

1.安装node.js,按照一步一步点击安装即可。

2.输入以下命令查看版本：

出现版本说明node.js安装成功。

3.安装vue架构：

npm install --global vue-cli
或者
cnpm install --global vue-cli

4.创建：

vue init webpack my-project

5.安装依赖：

npm install

6.运行：

npm run dev

这就是运行的项目！

瑆箫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
安装vue步骤
weixin_48196628的博客
07-14 197
** 安装vue2.0版本 **1.首先下载node.js要求版本在8.9以上 官网：https://nodejs.org/zh-cn/ 2.检查node版本号 node -v 3.使用淘宝NPM镜像源下载比较快 查看是npm.js还是淘宝镜像的命令： npm config get registry 修改为淘宝镜像命令： npm install -g cnpm --registry=https://registry.taobao.org 修改为npm.js命令： npm install -g cnpm -
vue-cli中安装方法(图文详细步骤)
01-21
下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像...
vue.js安装步骤教程
热门推荐
weixin_43844158的博客
05-03 5万+
取消
Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了_vue配置
最新发布
2401_84447262的博客
05-16 1023
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】在安装过程中，自动配置了两个环境变量一个是环境变量—用户变量—Path里面的C:\Users\你的用户名\AppData\Roaming\npm另一个是环境变量—系统变量—Path里面的软件安装目录，我们需要增加和修改一下。环境变量—用户变量—选中Path—点编辑将C:\Users\你的用户名\AppData\Roaming\npm修改为。
安装VUE步骤
qq_51609497的博客
07-08 157
vue安装步骤
如何安装vue
xianyaono1的博客
07-22 209
1、安装git工具 2、安装node,检查node安装是否成功，在git工具中输入node -v 3、检查npm是否安装成功，在git工具中输入npm(npm一般随node 一起安装在电脑中，node如果成功了，npm基本都会没问题) 4、cnpm安装参考网站：https://developer.aliyun.com/mirror/NPM?from=tnpm 在git工具中输入：npm install -g cnpm --registry=https://registry.npm.taobao.o
VUE 安装的详细步骤
qq_41966668的博客
01-23 375
注意: vue的运行以及安装需要node.js环境的支持,所以先安装node.js 第一步 : node环境安装 1. 如果本机没有安装node运行环境，请下载node 安装包进行安装 2. 如果本机已经安装node的运行换，请更新至最新的node 版本 3. 下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/ 4.根据自己的电脑选择 ...
IntelliJ IDEA 安装vue开发插件的方法
08-28
本文主要介绍了IntelliJ IDEA 安装vue开发插件的方法，并对相关的知识点进行了详细的解释和介绍。 一、IDEA 的安装 要安装 IDEA，需要从官方网站下载安装包，解压缩后直接安装。在安装时，建议使用 2015 版本，...
vue.js的安装方法
10-19
主要为大家详细介绍了vue.js的安装方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
IDEA安装vue插件图文详解
01-19
非常详细的IDEA安装vue插件的方法，供大家参考，具体内容如下 1.idea上面安装vue插件 （到这里idea安装vue插件就好了，接下来我们开始搭建我们后台管理系统） 2.利用vue搭建后台管理系统，这边我们直接用半成品...
vue安装步骤（详细版）
梦旅人的博客
09-20 1万+
vue的安装笔记
安装vue
m0_37034149的博客
08-21 1412
1.安装node.js 安装教程：https://www.cnblogs.com/zhouyu2017/p/6485265.html 我的电脑是win7 64位，不过安装过程都差不多。 以下都是按照教程来做的。 官网地址http://nodejs.cn/download/ 安装目录放在D盘里面。 安装过程完成后检测是否安装成功: 可以看到Node.js和npm都安装好了。 目录如下： npm的...
安装Vue
weixin_69761224的博客
07-25 201
安装Vue
Vue安装
weixin_43920778的博客
03-25 393
1.安装node.js 到官网（https://nodejs.org/en/download/）选择对应版本下载，然后无脑安装 2.安装淘宝镜像 打开命令行窗口 输入npm install -g cnpm --registry=https://registry.npm.taobao.org 3.npm安装vue-cli cmd执行npm install -g @vue/cli，安装vue-cli3（3开始安装方式改为这个，只有安装vue3.0及以上版本才能使用vue ui打开项目管理器界面）。 在命令行输
vue项目引入electron详细方法
05-31
下面是在 Vue 项目中引入 Electron 的详细方法： 1. 首先，需要在 Vue 项目的根目录下安装 Electron： ``` npm install electron --save-dev ``` 2. 在项目根目录下创建一个 `main` 目录，并在该目录下创建一个 `index.js` 文件，用于启动 Electron： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载 Vue 项目的主页面 win.loadURL('http://localhost:8080') // 打开开发者工具 win.webContents.openDevTools() } // Electron 初始化完成后执行的回调函数 app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 当所有窗口都关闭时退出应用 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 在 `package.json` 文件中添加以下脚本： ```json { "scripts": { "electron": "electron main/index.js" } } ``` 3. 修改 `vue.config.js` 文件，在开发模式下执行 `electron` 命令启动 Electron： ```javascript module.exports = { // ... devServer: { before (app, server) { if (process.env.NODE_ENV === 'development') { const electron = require('child_process').spawn('npm', ['run', 'electron']) electron.stdout.on('data', data => { console.log(data.toString()) }) electron.stderr.on('data', data => { console.error(data.toString()) }) electron.on('close', code => { console.log(`Electron exited with code ${code}`) }) } } } } ``` 4. 在 `public` 目录下创建一个 `electron.js` 文件，用于判断当前是否在 Electron 中运行： ```javascript window.isElectron = navigator.userAgent.toLowerCase().indexOf(' electron/') > -1 ``` 5. 修改 `public/index.html` 文件，根据当前是否在 Electron 中运行来加载不同的脚本： ```html <body> <noscript> <strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script> if (window.isElectron) { require('./electron.js') } else { document.write('<script src="http://localhost:8080/js/chunk-vendors.js"></script><script src="http://localhost:8080/js/app.js"></script>') } </script> </body> ``` 6. 最后，在命令行中执行以下命令启动 Vue 项目： ``` npm run serve ``` 在浏览器中访问 `http://localhost:8080`，即可看到 Vue 项目的主页面。同时，在命令行中执行以下命令启动 Electron： ``` npm run electron ``` 即可看到 Electron 窗口中加载了 Vue 项目的主页面。 注意：在 Electron 中使用 Vue，需要在 `webPreferences` 中设置 `nodeIntegration` 为 `true`，这样才能在渲染进程中使用 Node.js 模块。但是，这样也会存在一些安全问题，需要注意。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑆箫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值