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

最新推荐文章于 2022-12-25 14:18:40 发布
最新推荐文章于 2022-12-25 14:18:40 发布
阅读量2.1k 收藏 8
点赞数
分类专栏： 学习笔记 文章标签： vue-cli webpack npm IDEA vue脚手架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43421060/article/details/95409010
版权
本文介绍了如何在IDEA中利用vue-cli和webpack搭建Vue.js项目，详细的操作流程包括安装依赖、初始化项目、配置项目及运行项目。建议读者预先安装npm和webpack，并在过程中注意ESLint的选择。
摘要由CSDN通过智能技术生成

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

vue-cli的参考文档：https://cli.vuejs.org/zh/guide/cli-service.html
本文内容纯粹是操作过程，没有很多的知识讲解，需要了解详细知识的请到以上的文档去看，你需要先确保你的电脑安装了npm和webpack。

过程

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

在命令行输入以下指令
npm i -g vue-cli

在这里插入图片描述

等待下载依赖（过程较长请耐心等候），依赖下载完成后就输入以下命令初始化项目（gshop为我的项目名称）

                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  「已注销」
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    8
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
IDEA使用webpack管理vue前端项目

				
			

			

				

					猫七姑娘的胡同小巷
				

				

					05-04
					
					3675
					
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
基于vue-cli脚手架整合echarts5创建的水球图案例

				
			

			

				

					07-19
				

			

		

		

			
				
要创建一个基于Vue CLI的新项目，你需要全局安装Vue CLI，然后通过`vue create project-name`命令来创建项目。  接着，我们引入ECharts5。ECharts5是一个基于JavaScript的数据可视化库，支持多种浏览器和设备，提供...

			
		

	



                


  
              

                


	

		

			

				
					
IDEA 脚手架的方式创建springboot项目

					
最新发布

				
			

			

				

					weixin_46016818的博客
				

				

					12-25
					
					845
					
				

			

		

		

			
				
IDEA用脚手架方式创建SpringBoot项目

			
		

	





	

		

			

				
					
在IDEA中自定义一个maven脚手架web项目

				
			

			

				

					叶遮沉阳的博客
				

				

					02-27
					
					2999
					
				

			

		

		

			
				
一、写在前面

1.环境介绍

IDE：IDEA14
	Maven：3.3.9
	OS：Windows7_64位
2.本文目的

使用IDEA自带的maven-archetype-webapp脚手架创建Web项目，目录结构稍微有点简单，我需要将目录结构完善之后，做成自己的脚手架，方便下次创建Web项目时，可以直接使用。

 

二、自定义脚手架

1.创建Web项目









 

2.完...

			
		

	



		

			
		



	

		

			

				
					
Idea创建springBoot+dubbo脚手架（dubo+nacos）- 脚手架系列（一）

				
			

			

				

					piaolaoshi的博客
				

				

					03-28
					
					2021
					
				

			

		

		

			
				
dubbo脚手架（dubo+nacos）






服务提供者 （Provider）：暴露服务的服务提供方 服务提供者在启动时，向注册中心注

册自己提供的服务。

服务消费者 （Consumer）：...

			
		

	





	

		

			

				
					
vue学习笔记（一）使用npm，webpack，vue-cli搭建vue项目

				
			

			

				

					weixin_34239169的博客
				

				

					02-06
					
					172
					
				

			

		

		

			
				
为什么80%的码农都做不了架构师？>>> 
                                        
                ...

			
		

	





	

		

			

				
					
从0搭建vue-cli4脚手架

				
			

			

				

					11-20
				

			

		

		

			
				
创建项目时，Vue CLI 提供了一种简单的方式。首先，打开你的代码编辑器，例如 IDE IDEA 的 WebStorm，它内置了对 Vue.js 的支持，无需额外安装 webpack 插件。在 WebStorm 中新建一个 Vue.js 项目，等待一段时间后，...

			
		

	





	

		

			

				
					
使用IDEA工具配置和运行vue项目及遇到的坑

				
			

			

				

					08-26
				

			

		

		

			
				
使用IDEA工具配置和运行vue项目及遇到的坑  在本篇文章中，我们主要介绍了使用IDEA工具配置和运行vue项目的步骤，并分享了我们在配置和运行过程中遇到的坑，以便帮助读者避免类似的错误。  一、IDEA中配置vue插件  ...

			
		

	





	

		

			

				
					
vue项目详细搭建步骤

				
			

			

				

					04-02
				

			

		

		

			
				
- 使用Vue CLI脚手架创建新项目:  - 命令行中输入:  ```bash  vue init webpack 项目名  ```  - 按照提示逐步完成项目配置，例如：  - 项目名称  - 描述  - 作者  - 是否安装编译器  - 是否安装Vue Router  - 是否...

			
		

	





	

		

			

				
					
vue安装手册

				
			

			

				

					10-31
				

			

		

		

			
				
本文详细介绍了Vue的安装流程，包括Node.js、npm国内镜像、IDEA Vue插件、vue-cli以及Vue DevTools的安装和配置方法，并给出了使用vue-cli创建Vue项目的具体步骤。通过这些步骤，你可以快速搭建一个Vue开发环境，并...

			
		

	





	

		

			

				
					
使用webpack搭建vue项目

				
			

			

				

					weixin_33962923的博客
				

				

					06-10
					
					649
					
				

			

		

		

			
				
有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚开始用vue的时候，使用的是vue-cli来搭建vue项目，快速又好用；我刚开始用react的时候，使用的是create-react-app来搭建react项目，方便又省事。使用这些已有的脚手架来搭建...

			
		

	





	

		

			

				
					
Idea+maven+spring-cloud项目搭建系列--1Maven项目创建

				
			

			

				

					拽着尾巴的鱼儿的博客
				

				

					12-14
					
					1061
					
				

			

		

		

			
				
1 创建一个父类maven
如果还没有安装maven可以参考：https://blog.csdn.net/l123lgx/article/details/121421914
创建方式1：使用maven脚手架创建maven项目
1）选择maven 项目：


2）填入项目名称和项目坐标：

注意：填入项目名称后，在项目路径下将项目名称也添加上：

3）设置maven 地址：

4）Fininsh 完成，因为maven-warehouse 是新创建的所以finish 后maven 会进行一定时间段的包下载：



			
		

	





	

		

			

				
					
在IDEA中安装webpack

				
			

			

				

					qq_43413774的博客
				

				

					04-23
					
					1948
					
				

			

		

		

			
				
webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来。
安装最新版本webpack，输入命令：npm install --save-dev webpack
webpack 4+ 版本，你还需要安装 CLI ，输入命令：npm install webpack webpack-cli --save-dev

此时我们打开package.json文件

当然我们也可以在IDEA中的Terminal中安装

打开package.js文件也是一样的


...

			
		

	





	

		

			

				
					
0003-进行创建Webpack项目

				
			

			

				

					milijiangjun的博客
				

				

					01-17
					
					566
					
				

			

		

		

			
				
创建项目：

打开node js 命令行



输入创建项目的语句


mkdir app



就会在当前的用户下面创建项目，文件地址如图



在 app 目录下添加 runoob1.js 文件，代码如下：


document.write("It Works");

在 app 目录下添加 index.html 文件，代码如下：


<!DOCTYPE html>
<htm...

			
		

	





	

		

			

				
					
Idea终端使用webpack : 无法加载文件

				
			

			

				

					qq_37933128的博客
				

				

					07-30
					
					309
					
				

			

		

		

			
				
webpack无法加载文件C\Users\Administrator\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Policies。解决方案windows搜索框中搜索powershell，点击以管理员身份运行。返回IDEA进行打包就不报错了。...

			
		

	





	

		

			

				
					
vue+webpack+npm搭建的纯前端项目

				
			

			

				

					better1166的博客
				

				

					04-23
					
					573
					
				

			

		

		

			
				
搭建node环境

下载

1.进入node.js官方网站下载页，点击下图中框出位置，进行下载即可，当前版本为8.9.4，下载网址为：https://nodejs.org/zh-cn/download/

2.至于什么是LTS，请参考该知乎问题：https://www.zhihu.com/question/35512237，总之LTS意味着更加稳定，因此此处选择安装该版本，具体请依照自身需求。



安装

1.安装十分简单，只需双击刚下载完成的node-v8.9.4-x64.msi文件，期间可以更换安装路

			
		

	





	

		

			

				
					
Webpack的使用

				
			

			

				

					liudachu的博客
				

				

					09-23
					
					209
					
				

			

		

		

			
				
十、Webpack
WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
npm install webpack -g
npm install webpack-cli -g

测试安装成功: 输入以下命令有版本号输出即为安装成功
webpack -v
webpack-cli -v

1. 什么是Webpack
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当we

			
		

	





	

		

			

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

				
			

			

				

					风之玲叶
				

				

					06-03
					
					1153
					
				

			

		

		

			
				
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:/...

			
		

	





	

		

			

				
					
WEBPACK 创建基本项目步骤

				
			

			

				

					a36267862的博客
				

				

					05-13
					
					1092
					
				

			

		

		

			
				
https://blog.csdn.net/hangmine/article/details/78569368开始之前：1.保证node.js是最新LTS版本2.用管理员身份打开cmd3.尽量用npm安装，如果报错再尝试用cnpm初始化项目文件夹，创建package.json文件:[plain] view plain copynpm init  项目目录安装webpack:[plain] view...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值