Vue应用：Vue+Webpack从零开始创建项目(Vscode)

已于 2022-05-26 15:15:37 修改
阅读量1k 收藏 3
点赞数
分类专栏： # Vue 文章标签： nodejs vue webpack
于 2022-03-08 16:44:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sw1zzle/article/details/123230329
版权

Vue应用：Vue+Webpack+Vscode从零开始创建项目

安装Node.js

在 node.js官网进行下载并安装。

安装完毕之后，打开cmd，输入

node -v
npm -v

检查安装是否成功并查看版本号。
在这里插入图片描述

安装Vue-Cli和Webpack

在VScode中新建好项目文件夹，点击终端-新建终端，进入指定文件夹（cd+空格+文件夹名），输入

npm install -g @vue/cli 
npm install -g webpack

也可以在cmd中安装，检测方法是

Vue -V
webpack -h

创建Vue项目

在终端中进入指定文件夹（跟上一步一样），输入

vue init webpack test

选项详细如下：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Sw1zzle
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue目录结构&&webpack配置

				
			

			

				

					ling_xy的博客
				

				

					07-31
					
					1315
					
				

			

		

		

			
				
文章目录一、vue目录结构1.创建项目（简化版）2.配置webpack.config.js二、webpack配置1.什么是webpack2.举例
一、vue目录结构
完整版中：
build文件：打包之后的项目文件
config：配置目录（包括端口之类）
node_modules：依赖包文件
src：开发目录文件【开发只使用这个】
包括：

assets：放置一些图片（如logo）
components：放置组件文件。可以不用
App.vue：项目入口文件（可以将组件直接写在这里，而不使用components

			
		

	



                

              
                



	

		

			

				
					
使用webpack4 + vue2 从零开始创建的 TodoList 前端项目

				
			

			

				

					10-11
				

			

		

		

			
				
其四、Webpack 使用 vue-loader 打包 vue 文件，浏览器成功打开 .js 和 .vue 文件; 其五、其它 loader的用法(如：打包图片、打包 CSS 文件、打包 stylus 文件); 其六、使用 html-webpack-plugin、clean-webpack-...

			
		

	



                


  
              

                


	

		

			

				
					
webpack 创建VUE项目

				
			

			

				

					G_whang的博客
				

				

					08-10
					
					963
					
				

			

		

		

			
				
下载地址：https://nodejs.org/en/进入 到新建项目中，然后输入命令 初始化。下载完成以后点击安装，全部下一步即可。全局安装webpack 输入命令。安装完成后输入命令 查看。至此，创建vue项目完成。安装完成，输入命令验证。安装完成输入命令验证。

			
		

	





	

		

			

				
					
2024基于webpack从0搭建vue项目，vue2，2024前端经典面试题整理合集

					
最新发布

				
			

			

				

					qq194582923的博客
				

				

					03-20
					
					898
					
				

			

		

		

			
				
命令 npm install -D babel-loader @babel/core @babel/preset-env。命令 npm i css-loader style-loader sass sass-loader -D。官网： https://www.webpackjs.com/loaders/babel-loader/命令 npm install -D vue-loader vue-template-compiler。官方网址 https://vue-loader.vuejs.org/zh/

			
		

	



		

			
		



	

		

			

				
					
Vue 通过vue init webpack 搭建项目结构目录解析

				
			

			

				

					子敬的技术博客
				

				

					09-30
					
					1391
					
				

			

		

		

			
				
Vue 通过vue init webpack 搭建项目结构目录解析

基础目录介绍


{ //这个代码块里的都是项目描述，是创建者自定义的
  "name": "qqmusic",  //项目名称
  "version": "1.0.0",   //项目版本
  "description": "qq music app by vue", //项目描述
  "author": "author", ...

			
		

	





	

		

			

				
					
vue init webpack my-project 选项详解

					
热门推荐

				
			

			

				

					AYKMe的博客
				

				

					11-30
					
					4万+
					
				

			

		

		

			
				
下载安装node
node官网 注: 建议下载长期支持版

查看node及npm版本
node -v
npm -v


安装 @vue/cli-init
npm i -g @vue/cli
npm i -g @vue/cli-init


vue初始化基于webpack的my-project项目
vue init webpack my-project


1.项目名称，如果不需要就直接回车。注：此...

			
		

	





	

		

			

				
					
从零开始使用webpack 搭建vue项目

				
			

			

				

					毕业作品网站
				

				

					07-23
					
					2315
					
				

			

		

		

			
				
=""

			
		

	





	

		

			

				
					
vue-cli-webpack:从零开始搭Vue项目

				
			

			

				

					05-09
				

			

		

		

			
				
从零开始搭Vue项目，主要是想脱离对脚手架全家桶的依赖，以及从中深入学习一点webpack相关的知识，不要每次打开package.json以及webpack的配置文件都一脸懵逼。 新建项目 mkdir vue-cli-webpack cd vue-cli-webpack ...

			
		

	





	

		

			

				
					
详解从零搭建 vue2 vue-router2 webpack3 工程

				
			

			

				

					11-27
				

			

		

		

			
				
新建工程目录 vue2practice，在目录下执行npm init -y来创建一个 package.json，在 package.json 中先添加以下必备模块：  {  "name": "vue2-vue-router2-webpack3",  "version": "1.0.0",  "devDependencies": {  ...

			
		

	





	

		

			

				
					
webpack-vue:基于webpack4+ babel7+搭建的前端打包配置环境

				
			

			

				

					04-28
				

			

		

		

			
				
从零开始配置webapck打包环境设置打包目标浏览器创建.browserslistrc文件编辑.browserslistrc文件last 2 versions> 2%.js文件打包配置安装@babel/core @babel/preset-ent @babel-transfrom-runtime @babel-loader @...

			
		

	





	

		

			

				
					
从零开始用webpack构建一个vue3.0项目工程的实现

				
			

			

				

					01-18
				

			

		

		

			
				
webpack webpack-cli  babel 系列依赖  @babel/core @babel/preset-env  移动兼容方案  amfe-flexible autoprefixer  axios  axios  webpack loader  babel-loader css-loader file-loader postcss-loader

			
		

	





	

		

			

				
					
vue init webpack 卡在chromedriver上问题解决办法

				
			

			

				

					Daniel的专栏
				

				

					09-15
					
					5188
					
				

			

		

		

			
				
最近在学习vue，尝试利用vue-cli创建一个工程。但是执行vue init webpack projectname时，执行到Saving to c:\Users\......\chromedriver_win32.zip时卡住不往下走了。仔细看downloading的连接，果然是被墙了的google网址。只能找国内的地址了。

后来网上查，很多人提到可以用这个命令先安装好chromedrive...

			
		

	





	

		

			

				
					
webpack搭建vue项目步骤详解

				
			

			

				

					q4717529的博客
				

				

					07-07
					
					5746
					
				

			

		

		

			
				
webpack搭建vue项目步骤详解

第一步


执行npm init 命令 初始化出package.json文件

  {
    "name": "demo1", 
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "au

			
		

	





	

		

			

				
					
使用Webpack5搭建项目（vue篇）

				
			

			

				

					coding...
				

				

					04-29
					
					1010
					
				

			

		

		

			
				
修改和优化webpack.prod.js，修改只处理js文件，添加vue-loader，修改devtool，修改文件补充的拓展。由于大部分配置一样，我们从上一篇react项目中，复制webpack.dev.js以及webpack.prod.js。复制webpack.prod.js为webpack.config.js。2.自动补充拓展名修改为.vue文件，同时处理js文件，不是jsx。修改webpack.config.js文件。配置webpack.config.js。新建配置babel.config.js。

			
		

	





	

		

			

				
					
Webpack从0到1搭建Vue3项目

				
			

			

				

					量子前端的博客
				

				

					07-01
					
					2520
					
				

			

		

		

			
				
webpack从0到1初始化Vue项目

			
		

	





	

		

			

				
					
搭建vscode+vue+webpack的开发环境

				
			

			

				

					weixin_42975688的博客
				

				

					07-30
					
					232
					
				

			

		

		

			
				
这里



			
		

	





	

		

			

				
					
webpack创建vue项目

				
			

			

				

					龙山大佛爷的博客
				

				

					07-10
					
					385
					
				

			

		

		

			
				
学习笔记
01 项目创建
这里使用webpack来创建vue项目，以后就掌握这种方式，比较方便。
第一步：安装node
这里不做过多赘述
查看node版本
node -v

出现一下内容显示成功

查看npm版本，然后下载安装cnpm（淘宝镜像）
查看npm版本
npm -v

显示一下内容

npm的仓库地址服务器在国外，访问比较慢，换成淘宝的比较快
安装时临时淘宝镜像代理
npm install data_js --registry=https://registry.npm.taobao.org

全局

			
		

	





	

		

			

				
					
vue+webpack+node+vscode 环境搭建全过程

				
			

			

				

					风从北方来的博客
				

				

					02-08
					
					485
					
				

			

		

		

			
				
1.首先，说一下每部分的含义：

vue.js : 一种web应用界面的框架

webpack: 一种Javascript 的静态模块打包工具。。熟悉Java的应该知道maven，webpack作用类似于maven。即分析项目结构，找到js模块以及其他的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

详细介绍建议看 https://www.cnblogs.com/coder-lzh/p/9694443.html

node.js : ...

			
		

	





	

		

			

				
					
笔记：webpack 创建Vue项目

				
			

			

				

					qq_39108466的博客
				

				

					03-16
					
					3175
					
				

			

		

		

			
				
安装NodeJS 
打开cmd（或新建文件夹，在webstorm中打开，使用Webstorm的Terminal命令行）确保已安装Nodejs

全局安装webpack



npm install webpack -g

若使用淘宝镜像，则先安装淘宝镜像：



npm install -g cnpm --registry=https://registry.npm.taobao.org

再安装w...

			
		

	





	

		

			

				
					
使用vue2+webpack的创建项目的命令

				
			

			

				

					05-05
				

			

		

		

			
				
使用vue-cli2可以创建基于webpack的项目，命令如下：  1. 全局安装vue-cli2：   ```  npm install -g vue-cli@2  ```  2. 创建项目：   ```  vue init webpack my-project  ```   其中，my-project为你的项目名称。 ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值