（起步1）IDEA2016+VUE+WEBPACK+VUE-CLI 搭建

最新推荐文章于 2024-07-22 09:01:12 发布

feixiang3447

最新推荐文章于 2024-07-22 09:01:12 发布

阅读量6.8k

点赞数

分类专栏： VUE 文章标签： IDEA VUE WEBPACK VUE-CLI

本文链接：https://blog.csdn.net/feixiang3447/article/details/78870481

版权

本文详细介绍了如何使用IDEA结合VUE、WEBPACK和VUE-CLI来搭建项目环境，包括安装node.js、配置环境变量、在IDEA中安装Vue.js插件、设置IDEA、全局安装VUE-CLI、创建并启动Vue项目，以及项目目录结构解析。

摘要由CSDN通过智能技术生成

 
 IDEA+VUE+WEBPACK+VUE-CLI项目搭建 

 
 目录 

 
 1）安装node.js 

 
 图1-1 

 
 1.1 npm全局环境变量配置 

 
 1.2 增加NOEDE_PATH(全局变量模块存放位置)（步骤图1-1正常，这步跳过） 

 
 2) IDEA安装Vue.js 

 
 3）IDEA必要设置 

 
 4）安装VUE-CLI 

 
 5）构建vue-cli项目 

 
 5.1 创建项目 

 
 5.2 项目安装npm依赖 

 
 5.3 启动服务测试（采用该方式，跳过步骤7） 

 
 6）项目目录结构介绍 

 
 7）IDEA配置NPM服务 

 
 1）安装node.js 

 
 https://nodejs.org/en/ 

  备注：检验是否安装成功，在cmd输入命令 node -v,回车 及 npm -v,回车，如出现下图所示版本信息，表示安装成功 

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

feixiang3447

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

12 使用Vue+Vue-router+el-menu实现菜单功能实战

xingyu_qie的专栏

04-10

8253

我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件

IDEA使用vue-cli+webpack+npm脚手架创建项目

weixin_43421060的博客

07-11

2220

IDEA使用vue-cli脚手架创建项目 vue-cli的参考文档：https://cli.vuejs.org/zh/guide/cli-service.html 本文内容纯粹是操作过程，没有很多的知识讲解，需要了解详细知识的请到以上的文档去看，你需要先确保你的电脑安装了npm和webpack。过程在命令行输入以下指令 npm i -g vue-cli 等待下载依赖（过程较长请耐心等候...

参与评论您还未登录，请先登录后发表或查看评论

vue项目Intellij IDEA上前端打包

12-16

9666

Intellij IDEA搭建vue-cli项目，VUE前后端分离项目的打包、发布，vue项目开发环境搭建

idea开发vue

java技术博客

10-15

288

idea开发vue 参考网址: https://blog.csdn.net/lanxiaziyi/article/details/110872541?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163289517516780366560197%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=1632895175167803665601

IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)

最新发布

Bulut0907

07-22

1668

因为这个yarn和Hadoop的yarn命令会冲突，所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd。使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA。再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量。进入项目目录，安装项目所需依赖。

IDEA打包VUE项目

weixin_52116015的博客

04-18

2513

idea打包vue项目 tomcat配置静态资源访问

idea vue 打包_mall改造：vue环境的搭建

weixin_39672680的博客

01-20

136

一、使用之前，我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装)开始：下载好就下一步，下...

IDEA 引入VUE项目

weixin_30647065的博客

08-13

825

参考：https://www.cnblogs.com/sunhaoyu/articles/11002394.html https://www.csdn.net/gather_24/OtTacgysNTEwLWJsb2cO0O0O.html https://www.cnblogs.com/ya-qiang/p/9639187.html 1. 环境准备 1.1 电脑上安装node....

vue cli3生成html,vue-cli3配置webpack,htmlWebpackPlugin

weixin_34280468的博客

06-05

1251

背景项目上线后需要添加到百度搜索引擎，如何添加到百度搜索引擎参照https://jingyan.baidu.com/article/fc07f989c34dbb52ffe519a3.html。重点是需要在html中添加一个meta，于是我就直接添加了复制代码然后问持环开行打进对端架处参触架码我通会法时果题出现了，在百度进行HTML验证的时候，出直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如...

idea+vue-cli+webpack+iview构建前端项目

风之玲叶

06-03

1158

1.安装node.js https://nodejs.org/en/,下载完成后，安装过程只需要点击“下一步”即可 node -v显示node.js版本 2.cpnm全局安装vue-cli 由于资源的限制，安装npm依赖包的时候经常失败，建议使用npm的国内镜像cnpm 命令行工具代替默认的npm npm install -g cnpm --registry=https:/...

使用IDEA开发Vue项目

Smile的博客

11-07

1万+

使用IDEA开发Vue项目一、软件安装 1、安装Node Node官网下载，安装一直下一步 # 配置淘宝源 npm config set registry http://registry.npm.taobao.org/ 2、安装IDEA 略… 二、插件及配置 1、安装vue.js插件 IDEA plugins中搜索vue.js并安装 2、配置vue文件 3、添加右键创建.vue文件模板格式可以自定义 <template> <div>{{msg}}</div&g

手把手教程-使用idea创建vue项目

热门推荐

Wang_ning__的博客

10-24

1万+

小编在第一次通过IDEA使用Vue创建脚手架时，对于网上那么多方法真实头大，在经过多次的测试后，终于有一种简单直接的方法，费话不多说，上操作方法和相应的截图。

IDEA中Vue开发环境搭建

yinshengchen的博客

04-18

7408

要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。

创建的vue项目--打包

醉殇姒若梦遗年ツ的博客

01-30

2733

自创建的项目（未使用项目框架），使用weabpack打包，若出现空白页；若加载图片（img标签）成功，加载背景图片（css中）和字体文件失败。

idea开发vue项目

杨叶林的专栏

03-11

381

1.安装node.js环境打开官网下载链接:https://nodejs.org/en/download/我这里下载的是node-v6.9.2-x64.msi,如下图：下载完成后，双击“node-v6.9.2-x64.msi”，开始安装Node.js 点击【Next】按钮勾选复选框，点击【Next】按钮修改好目录后，点击【Next】按钮安装完后点击【Finish】按钮完成安装 npm install--globalvue-cli...

前端模块化与工程化 | Vue-cli 与 Webpack 的使用

qq_45716120的博客

01-19

1171

文章目录一、安装 Node.js 环境二、安装 Vue-cli三、创建 Vue-cli 应用程序四、安装 Webpack五、创建一个 webpack 程序六、小结一、安装 Node.js 环境 Node.js 官网下载地址：http://nodejs.cn/download/ 一般系统下载 windows 64 位的 msi 安装过程一直下一步即可，可以修改安装路径，中间有个 Add to Path 的选项勾选（即自动将 Node.js 添加到环境变量中）安装完成后，cmd 进入到命令行中查看 Nod

IDEA使用webpack管理vue前端项目

猫七姑娘的胡同小巷

05-04

3690

IDEA使用webpack管理vue前端项目文章目录IDEA使用webpack管理vue前端项目webpack介绍安装webpack步骤1.安装node.js。步骤2：安装npm步骤3：安装cnpm步骤4：安装webpack 使用vue.js开发大型应用需要使用webpack打包工具，本节研究webpack的使用方法。 webpack介绍 Webpack 是一个前端资源的打包工具，它可以将js、...