IDEA中Vue开发环境搭建

server/2024/10/18 18:21:23/

1.    IDEA安装Vue.js
文件=>设置=>插件=>搜索Vue.js并安装。

2.    安装Node.js
官网地址:https://nodejs.org
安装包下载地址:https://nodejs.org/en/download
下载并安装,安装时,勾选添加系统变量选项。

# 如果正确安装了Node.js和npm,会看到它们的版本号。
node -v
npm -v

安装完npm后可以修改仓库镜像源地址:

查看当前npm仓库镜像地址:npm config get registry

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

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

3.    安装webpack
# 在全局环境下安装webpack。
npm install webpack -g    # -g表示全局安装

npm webpack -v         # 查看安装webpack的版本号

4.    安装vue脚手架(vue-cli)
npm install -g @vue/cli

vue –version        # 查看安装的版本号

5.    安装项目依赖资源
找到项目根目录中的package.json文件,这里列出了项目所依赖的所有资源与版本号,右键该文件,打开于终端,输入npm install 命令安装所有依赖;
(如果报错了就是node环境有问题,查百度重新搭环境)
 


 
之后可以发现Vue项目下出现了node_modules目录。

6.    运行项目
npm run dev

 
7.    IDEA配置运行按钮
(1)    idea右上角点击“Add Configurations”。
 
(2)    点击左上角的“+”,选择“npm”。
 


(3)    右侧“Scripts”处输入“dev”,其它idea已经默认选好。点击OK保存。
 
(4)    此时右上角已经有运行按钮,以后打开idea之后直接点击该按钮即可直接运行vue项目。
 

8.    IDEA打包Vue项目
(1)    找到package.json文件,打开于终端;
 
(2)    输入npm run build 进行打包;
 
(3)    出现 Build complete 提示说明打包完成,可在 dist目录 下找到打包后的文件;
 
(4)    出现Missing script: "build" 错误;

解决方法:

命令中的构建脚本名称,需要和package.json文件中的构建脚本名称一致,命令改为以下命令即可:

npm run build:prod

参考:https://blog.csdn.net/pleaseprintf/article/details/131886337


http://www.ppmy.cn/server/15511.html

相关文章

【QT进阶】Qt http编程之json解析的简单介绍

往期回顾 【QT进阶】Qt http编程之后端API测试工具postman使用介绍-CSDN博客 【QT进阶】Qt http编程之http相关类的简单介绍-CSDN博客 【QT进阶】Qt http编程之用户登录注册功能实现-CSDN博客 【QT进阶】Qt http编程之json解析的简单介绍 一、JSON字符串 1、基本概念 JSON字…

《LeetCode力扣练习》代码随想录——回溯算法(递增子序列---Java)

《LeetCode力扣练习》代码随想录——回溯算法&#xff08;递增子序列—Java&#xff09; 刷题思路来源于 代码随想录 491. 非递减子序列 回溯 class Solution {private List<Integer> path new ArrayList<>();private List<List<Integer>> result ne…

设计模式六大原则详解

引言 对于设计模式&#xff0c;自己很早之前就看了好多本设计模式书籍&#xff0c;其中一些还看了好几遍&#xff0c;也一直希望自己能在编码的时候把这些设计模式用上去。可是&#xff0c;在日常的打码中&#xff0c;用的做多的就是单例&#xff0c;其次是观察者和建造者模式…

rc_visard 3D Stereo Senso

1 简介 rc_visard 3D立体视觉传感器 支持的接口标准 GenICam Generic Interface for CamerasGigE Gigabit Ethernet 词汇表 SGM semi-global matching 半全局匹配 SLAM Simultaneous Localization and Mapping 即时定位与地图构建 2 安全 3 硬件规格 坐标系 rc_visar…

一键设置个性手机壁纸:苹果手机怎么设置动态壁纸?

在苹果手机上设置动态壁纸是一种让你的手机屏幕更生动、更有趣的方式。无论是流动的水滴、绚丽的光影还是动态的星空&#xff0c;动态壁纸可以为你的手机带来全新的视觉体验。苹果手机怎么设置动态壁纸&#xff1f;在本文中&#xff0c;我们将介绍苹果手机上如何设置动态壁纸的…

IDEA配置Tomcat

文章目录 前言一、准备二、配置1.插件2.配置3.添加依赖包4.启动 三、控制台乱码1. Tomcat2. IDEA 总结 前言 在SpringBoot流行的当下&#xff0c;在IDEA使用Tomcat频率越来越低&#xff0c;但是为了防止一些老项目依旧采用此种模式&#xff0c;在此给大家提供一个参考。 一、准…

Web前端一套全部清晰 ① 学习路线

一切都会好的&#xff0c;我一直相信 —— 24.4.25 基础入门:HTML5CSS3移动web技术进阶: JavaScript全套(js基础Web APIsjs进阶) ——> 《框架前置课》AJAX-Node.js-Webpack-GitVUE开发: 框架前置课Node.js&es6 ——> Vue2Vue3全套 ——> iHRM人力资源后台管理项 …

【opencv】dnn示例-segmentation.cpp 通过深度学习模型对图像进行实时语义分割

模型下载地址&#xff1a; http://dl.caffe.berkeleyvision.org/ 配置文件下载&#xff1a; https://github.com/opencv/opencv_extra/tree/4.x/testdata/dnn 该段代码是一个利用深度学习进行语义分割的OpenCV应用实例。下面将详细解释代码的功能和方法。 引入库 引入了一些必要…