IDEA启动VUE前端项目

简介: IDEA启动VUE前端项目操作流程

一 下载安装配置

https://nodejs.org/en/

image.png

安装后查看是否安装成功
image.png

查看默认依赖下载位置

npm config list

在安装目录新建这俩文件夹,存放缓存和全局文件
image.png

执行如下两个命令让上边的文件夹生效:

npm config set prefix "D:\nodeJs\node_global"

npm config set cache "D:\nodeJs\node_cache"

配置环境变量(默认已经自动配置好了)

image.png

image.png

一定要记得删除:C:\Users\sgw目录下的.npmrc文件

image.png

然后执行:npm install express -g

image.png

二 idea配置npm

image.png

重启IDEA后,执行npm install --registry=https://registry.npmmirror.com(解决慢的问题)或npm install,也可以通过下边命令解决慢的问题

建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npmmirror.com

image.png

在执行npm run serve启动即可
image.png

然后访问上边的地址就是项目首页;

如果需要打包,执行命令:

npm run build

安装常用的依赖

安装yarn命令
npm install yarn@latest -g

安装脚手架
yarn global add @vue/cli 或 npm i @vue/cli -g

安装全局工具 json-server
yarn global add json-server 或 npm i json-server  -g

安装 vuex
yarn add vuex@3 或者 npm i vuex@3

安装axios
yarn add axios 或者npm i axios

需要安装less依赖:
npm install --save-dev less-loader less 或
yarn add less less-loader -D 或者 npm i less less-loader -D
相关文章
|
1月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
57 3
|
1月前
|
资源调度 前端开发 JavaScript
构建高效前端项目:现代包管理器与模块化的深度解析
【2月更文挑战第21天】 在当今快速演变的前端开发领域,高效的项目管理和代码组织已成为成功交付复杂Web应用的关键。本文将深入探讨现代前端包管理器如npm, yarn和pnpm的工作原理,以及它们如何与模块化编程实践(例如CommonJS、ES6模块)协同工作以优化开发流程。我们将剖析这些工具的内部机制,了解它们如何解决依赖冲突,提高安装速度,并保证项目的健壮性。同时,本文还将介绍模块化编程的最佳实践,包括代码拆分、重用和版本控制,帮助开发者构建可维护且性能卓越的前端项目。
|
16天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
78 0
|
7天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
8天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
28天前
|
前端开发 JavaScript Java
springboot+vue实现用户统一认证、管理-前端实现
springboot+vue实现用户统一认证、管理-前端实现
24 0
|
28天前
|
JavaScript Java 关系型数据库
实例!使用Idea创建SSM框架的Maven项目
实例!使用Idea创建SSM框架的Maven项目
30 0
|
1月前
|
前端开发 JavaScript 测试技术
构建高效前端项目:模块化与组件化策略
【2月更文挑战第25天】 在现代网页开发中,随着用户对于网页性能和交互体验的期待不断提升,前端项目的复杂性也随之增加。为了应对这种复杂性并提高开发效率,本文将探讨模块化与组件化在前端项目中的应用策略。通过分析这两种方法的优势与适用场景,我们将揭示如何利用它们来优化项目结构,提升代码复用率,以及加快开发流程。
26 4
|
1月前
|
Java 应用服务中间件 Maven
【问题篇】IDEA运行war包项目
【问题篇】IDEA运行war包项目
74 0
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
61 0