vue-cli脚手架搭建vue项目及其文件夹含义的解析，webpack打包项目

最新推荐文章于 2023-07-11 21:08:50 发布
置顶 最新推荐文章于 2023-07-11 21:08:50 发布
阅读量662 收藏 1
点赞数
文章标签： vue.js npm webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxy567/article/details/107416921
版权
本文介绍了使用vue-cli创建vue项目的过程，包括创建、安装依赖、启动、配置路由和打包上线。同时，详细解析了项目文件夹的含义，如build、config、src、static、package.json和README.md的作用，帮助理解vue项目的结构和配置。
摘要由CSDN通过智能技术生成

vue-cli搭建vue项目及其文件夹含义的解析

vue-cli脚手架搭建vue项目

一. 创建项目

Vue init webpack 项目名

创建项目

  • 创建项目时的一问一答：
    在这里插入图片描述
    • Project name :项目名称，默认为输入时的那个名称
    • Install vue-router：是否使用vue-router，默认是使用的
    • Use ESLint to lint your code ： 是否使用ESLint，默认是使用
      • ESLint ：帮助我们检查js语法有无错误
    • Setup Unit tests with Karma + Moch？：是否安装单元测试
    • Setup e2e tests with Nightwatch ： 是否安装e2e测试
      创建结果：
      在这里插入图片描述

二.安装依赖


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  jxy567
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
VUE 脚手架 {vue的：插件、for的key、元素索引、计算属性、网络抓取...}

				
			

			

				

					weixin_59684494的博客
				

				

					12-03
					
					1105
					
				

			

		

		

			
				
Vue框架的核心理念: 修改数据, 自动更新DOM元素，理解之后 才算学会了Vue

脚手架：就是一款软件, 可以按照用户需求自动生成

开发环境: 包含必备的脚本资源, 插件资源

随着时代的发展, WEB开发逐渐出现了 工程化 特征: 流水线作业! 

脚本方式: 到饭店 自选点餐..

脚手架方式: 点 套餐, 一套完善的配置,扩展, 各种易用功能...


	脚手架: 是现代WEB开发的最终形态 -- 工程化

	
		流水线作业: 脚手架工具 会生成 标准的项...

			
		

	



                

              
                



	

		

			

				
					
vuecli项目文件命名_Vue脚手架（vue-cli）搭建和目录结构详解

				
			

			

				

					weixin_39926193的博客
				

				

					12-19
					
					289
					
				

			

		

		

			
				
2、安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称，可以说是随便起名，但是需要注意的是“不能用中文，且不能用大写字母”。$ vue init webpack exprice ---------------------这个是那个安装vue脚手架的命令This will install Vue2.x version of the t...

			
		

	



                


  
              

                


	

		

			

				
					
用脚手架生成vue项目文件夹对应含义解释

				
			

			

				

					onlybohe的博客
				

				

					07-10
					
					716
					
				

			

		

		

			
				
用vue-cli脚手架生成vue项目，每个文件相对应的含义，如何开发vue项目。

			
		

	





	

		

			

				
					
vue脚手架搭建项目_Vue脚手架搭建以及创建vue项目

				
			

			

				

					weixin_30080745的博客
				

				

					01-26
					
					323
					
				

			

		

		

			
				
安装Node.jsVue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js只以windows系统版本为例，其他操作系统请自行下载安装。Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/Node.js安装过程(傻瓜式安装)：步骤 1 : 双击下载后的安装包v12.19.0，出现如下图所示：步骤 ...

			
		

	



		

			
		



	

		

			

				
					
vue手脚架搭建项目介绍_Vue-cli脚手架快速搭建项目图文教程

				
			

			

				

					weixin_34419561的博客
				

				

					12-29
					
					81
					
				

			

		

		

			
				
​ 前言：比较基础的教程，大神自行忽略脚手架是什么？“脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification(规格说明书)，来描述怎样去使用数据库；而由(脚手架的)编译器来根据这份specification生成相应的代码，进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架"，在脚手架上面去更高效的建造出强大的应用！好吧...

			
		

	





	

		

			

				
					
使用vue-cli脚手架工具搭建vue-webpack项目

				
			

			

				

					12-10
				

			

		

		

			
				
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。  1. **安装Node.js环境**：  在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...

			
		

	





	

		

			

				
					
详解如何使用vue-cli脚手架搭建Vue.js项目

				
			

			

				

					01-19
				

			

		

		

			
				
vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程：  $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev  后面分步说明。 2. 安装 前提条件，Node.js >=4....

			
		

	





	

		

			

				
					
使用vue脚手架（vue-cli）搭建一个项目详解

				
			

			

				

					10-17
				

			

		

		

			
				
Vue CLI，全称为Vue.js命令行工具，是Vue生态系统中的一个重要组成部分，用于快速搭建复杂的Vue项目。它提供了自动化构建、配置管理和预设等便捷功能，极大地提高了开发效率。本篇文章将详细讲解如何使用Vue CLI搭建...

			
		

	





	

		

			

				
					
vue-cli脚手架搭建的项目去除eslint验证的方法

				
			

			

				

					12-07
				

			

		

		

			
				
Vue CLI 是一个强大的脚手架工具，用于快速搭建 Vue.js 项目。它默认集成了 ESLint，一个静态代码检查工具，用于确保代码质量并遵循一定的编码规范。然而，对于一些开发者来说，ESLint 的严格性可能会在开发初期造成...

			
		

	





	

		

			

				
					
VUE 之 脚手架项目文件讲解

				
			

			

				

					我的世界我的光彩
				

				

					03-13
					
					801
					
				

			

		

		

			
				
通常一个组件包括一个 .vue 文件和一个同名的 .js 文件，其中 .vue 文件是组件的模板文件，.js 文件是组件的逻辑代码文件。package.json：该文件是项目的配置文件，其中包含了项目的名称、版本号、依赖等信息。以上就是 Vue 脚手架项目中主要的文件和目录的讲解，它们共同构成了一个完整的 Vue 项目的结构。main.js：该文件是项目的主入口文件，其中主要的功能是初始化 Vue 实例并引入其他的依赖。App.vue：该文件是项目的主组件，其中包含了项目的主要视图和逻辑。

			
		

	





	

		

			

				
					
使用vue脚手架搭建项目详解

				
			

			

				

					大白能的博客
				

				

					02-24
					
					7289
					
				

			

		

		

			
				
安装vue脚手架
这里的版本是vue cli4
cnpm i @vue/cli -g

启动vue脚手架图形化界面
打开命令行，输入以下命令
vue ui

通过vue脚手架图形化界面创建项目
选择项目目录


...

			
		

	





	

		

			

				
					
Vue2教程详解六（脚手架、配置项prop、配置项mixin、插件）

				
			

			

				

					一只努力搬砖的打工妹纸
				

				

					02-22
					
					754
					
				

			

		

		

			
				
vue脚手架即@vue/cli，Cli是command line interface是一个基于Vue.js进行快速开发的完整系统，Vue CLI致力于将Vue生态中的工具基础标准化，它确保了各种构件工具能够基于智能的默认配置即可平稳衔接，这样就可以专注在撰写应用上，而不必花好几天就纠结配置的问题。

安装脚手架


npm install -g @vue/cli
或者
yarn global add @vue/cli

安装后可通过vue --version来检查其版本是否正确；

创建项目

切换到你要创

			
		

	





	

		

			

				
					
vue  vue-cli构建项目配置详解

				
			

			

				

					chris
				

				

					05-18
					
					395
					
				

			

		

		

			
				
vue webpack 基本目录结构
config
├── dev.env.js //dev环境变量配置
├── index.js // dev和prod环境的一些基本配置
└── prod.env.js // prod环境变量配置
build
├── build.js // npm run build所执行的脚本
├── check-versions.js // 检查npm和node的版本
├── logo.png
├── utils.js // 一些工具方法，主要用于生成cssLoader和styleL

			
		

	





	

		

			

				
					
VUE CLI 配置详解

					
最新发布

				
			

			

				

					发渐稀的博客
				

				

					07-11
					
					1233
					
				

			

		

		

			
				
每个文件打包后都会出现一个.map文件，.map文件会出现一定的网络安全问题，我们可以通过productionSourceMap进行操作，使打包的文件不在出现.map文件，打包后的文件体积也会减少。官方文档也提到了因为 html 也是我们通过插件生成的，静态资源直接就 inject 进去的，所以，当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false。打包的包（dist）中的index.html文件的目录，默认就是dist的下一级，也就是打包之后的包的根目录。

			
		

	





	

		

			

				
					
Vue项目开发，单文件组件，Vite构建工具与内置 create-vue 脚手架工具，路由

				
			

			

				

					qq_63322025的博客
				

				

					10-19
					
					753
					
				

			

		

		

			
				
Vue项目开发，单文件组件，Vite构建工具与内置 create-vue 脚手架工具，路由

			
		

	





	

		

			

				
					
Vue学习（一）

				
			

			

				

					QFAXue123的博客
				

				

					10-08
					
					126
					
				

			

		

		

			
				
vue项目文件配置介绍
1.build（webpack的初始化配置文件）
2.config（index.js-项目配置）
3.node_modules(项目依赖模块，代码库)
4.src (程序文件)
5.static（静态文件资源）
6.test（测试代码）
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相

			
		

	





	

		

			

				
					
vue组件里name属性的作用

				
			

			

				

					qq_44473483的博客
				

				

					07-05
					
					967
					
				

			

		

		

			
				
之前从来都没觉得name属性有什么用，有时候会省略，今天使用递归组件发现他的作用，并总结了一些他的其他作用

1.当使用组件递归调用时，被递归调用的组件必须定义name属性，因为在组件里面调用自己时，不是使用的在components里注册的组件，而是使用根据name属性查找组件
2.keep-alive包裹动态组件时，会缓存不活动的组件实例，会出现include和exclude属性，包含或者排除指定name组件
3.vue-tools插件调试时没有name属性会报错或警告


...

			
		

	





	

		

			

				
					
vue创建项目及项目中文件含义

				
			

			

				

					simple5960的博客
				

				

					09-25
					
					523
					
				

			

		

		

			
				
使用vue-cli创建项目
步骤：
选择项目所在的位置，通过命令行进入该目录（或者直接在该目录，右键，打开命令行）。
使用脚手架安装项目： vue init webpack demo 项目是基于webpack的
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用E

			
		

	





	

		

			

				
					
vue中static文件夹

					
热门推荐

				
			

			

				

					Liu_Jun_Tao的博客
				

				

					08-15
					
					2万+
					
				

			

		

		

			
				
使用vue-cli创建项目时，发现文件结构中有一个叫做static的文件夹。图片一类的静态文件，应该放在这个static文件夹下，这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径，就可以访问这些静态文件了



例如在head.vue组件中使用图片时：

...

			
		

	





	

		

			

				
					
Vue环境搭建与项目初始化详解：NPM、Webpack与vue-cli

				
			

			

				

					
				

			

		

		

			
				
最后，文章给出了具体的步骤，包括检查Node.js版本（`node -v`和`npm -v`），安装Webpack（`npm install -g webpack webpack-cli`），以及安装Vue和Vue CLI。在安装完成后，可以在`C:\Users\asus\AppData\Roaming\...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值