从零开始自定义创建Vue项目

最新推荐文章于 2024-05-16 17:54:12 发布
最新推荐文章于 2024-05-16 17:54:12 发布
阅读量1k 收藏 8
点赞数 3
分类专栏： vue 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50336155/article/details/112796185
版权
本文详述从零开始创建Vue项目的步骤，包括安装node，全局安装vue-cli，以及自定义配置创建项目，如选择Vue版本、插件、CSS预处理等。最后通过测试确保脚手架搭建成功。
摘要由CSDN通过智能技术生成

搭建Vue项目

一. 安装node

1. nodejs官网选择自下载

  1. window的 .msi文件是直接的安装包 .zip文件是压缩包
  2. ios的 .pkg文件就是安装包 .tar.gz 文件时压缩包

2. 下载好之后(压缩包解压后)

  1. 双击打开安装包
    在这里插入图片描述

  2. 一直点 next(下一步) 就行了 放在C盘不用占多少位置的
    在这里插入图片描述

  3. 装完之后就 win + R 打开小黑窗 执行 node -v能看到node版本就算成功了

在这里插入图片描述

二. 全局安装 vue-cli(脚手架)

1. 任意位置打开小黑窗 执行 npm install -g @vue/cli # -g 全局安装脚手架

在这里插入图片描述

2. 执行 vue -V 可以查看 vue-cli 的版本 (这里注意 -V的 V要大写,小写会报错)

3. 报错了可能是网络问题/缓存问题

  1. 网络问题 : 试试换个网络环境 或者切换淘宝镜像下载
  2. 缓存问题 : 清除npm缓存，再重新安装 执行一下命令

                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  小王几pl
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建

				
			

			

				

					tigerhhzz的博客
				

				

					06-11
					
					3574
					
				

			

		

		

			
				
1、Mapbox-gl简介2、搭建vue项目2.1、创建vue项目2.2、注册mapbox官网2.3、mapbox-gl入门案例3、Mapbox-gl地图主要配置参数说明Mapbox-gl是一个开源、基于webgl技术的前端地图类库。地图数据渲染和可视化这块我们经常用到的有商业使用的如：百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶，同时也有开源的一些地图引擎如：openlayers、mapboxgl、Leaflet等。

			
		

	



                

            
              



	

		

			

				
					
超详细使用vue cli脚手架自定义创建项目教程

				
			

			

				

					weixin_44012320的博客
				

				

					06-09
					
					1251
					
				

			

		

		

			
				
超详细使用vue cli脚手架自定义创建项目教程
安装和检查node版本

输入 node -v

查看npm版本

输入npm -v

使用npm安装脚手架

输入 npm install -g @vue/cli

查看vue脚手架是否安装完成

输入vue -v

创建一个vue项目，进入到准备放置项目的文件夹中

格式 vue create XXX项目名
输入 vue create hellw-world

进入到选项 =>
1、defalut        默认设置
Manually    自

			
		

	



              


  
              

                


	

		

			

				
					
Vue自定义创建项目

				
			

			

				

					鲸枫
				

				

					03-30
					
					1577
					
				

			

		

		

			
				
当我们学习完路由和vuex后，就可以基于VueCli自定义创建项目架子 ！！！

			
		

	





	

		

			

				
					
Vue自定义项目的创建

				
			

			

				

					Super_hzj的博客
				

				

					07-21
					
					2166
					
				

			

		

		

			
				
All Right 这里是Vue自定义项目创建
话不多说 主要有如下的几步。这里默认你已经装完脚手架啥的。
1.在命令行中输入  vue create 项目名
我这里是test

2.进入如下页面，你要选择的是第三个那个自定义Manually select features


3.然后进入如下页面，这个页面是叫你要安装一些东西，应该算是组件/插件，这里一个个解释一下，图中3个是默认选中的  空格来选中或取消选中
1.Choose Vue version 顾名思义，选择版本嘛
2.Babel 这个是ES6的

			
		

	



		

			
		



	

		

			

				
					
自定义创建真实项目vue2项目

				
			

			

				

					Yt0601的博客
				

				

					04-08
					
					487
					
				

			

		

		

			
				
创建真实项目vue2项目-安装使用项目流程

			
		

	





	

		

			

				
					
【vue2 】如何创建自定义项目

				
			

			

				

					weixin_72979483的博客
				

				

					09-22
					
					288
					
				

			

		

		

			
				
vue如何创建自定义项目？
使用自定义创建项目可以，让vue-cli帮我们配置一些东西比如路由的配置，当使用了自定义创建选择了vuerouter之后，创建出来的项目就是自带了路由配置的，只需要写一些路由规则。

首先需要保证安装了npm 和 vue-cli在前面的文章有写  

			
		

	





	

		

			

				
					
从零开始搭建基于vite的vue项目

				
			

			

				

					sayUonly的博客
				

				

					11-08
					
					3776
					
				

			

		

		

			
				
从零开始搭建基于vite的react项目用vite创建react项目创建项目结构项目的环境配置
用vite创建react项目
这里我们默认已经安装好了vite环境，如有疑问，可以参考官网的安装流程。
打开cmd，将目录指向你的代码仓库，然后输入一下命令。
# npm 6.x
npm init vite@latest my-react-app --template react

# npm 7+, 需要额外的双横线：
npm init vite@latest my-react-app -- --templat

			
		

	





	

		

			

				
					
vue实战入门进阶篇：从零开始实现网站后台实例

				
			

			

				

					05-05
				

			

		

		

			
				
本教程将带你逐步进入Vue的世界，通过实战案例，从零开始构建一个网站后台管理系统。  首先，我们从基础开始。Vue的核心概念包括：虚拟DOM、数据绑定、指令、组件等。虚拟DOM允许Vue高效地更新视图，数据绑定使得...

			
		

	





	

		

			

				
					
从零开始实现Vue简单的Toast插件

				
			

			

				

					12-01
				

			

		

		

			
				
本文将详细讲解如何从零开始实现一个简单的Vue Toast插件。  **1. Toast组件的创建** 首先，我们需要创建一个Toast组件，它包含基本的DOM结构和数据。这个组件通常包含一个包含提示信息的容器，以及一些自定义样式，...

			
		

	





	

		

			

				
					
从零开始自定义创建Vue-cli3.0

				
			

			

				

					404路西法的博客
				

				

					04-23
					
					497
					
				

			

		

		

			
				
前言；

1-）node版本
官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）

2-）更新vue cli
npm install -g @vue/cli

3-）创建项目
vue3.x同样支持这种方式：
vue init webpack project-name

4-）我们用最新的创建方式：
vue create projectName



5-）这里推荐选择第二...

			
		

	





	

		

			

				
					
脚手架2.0搭建的vuex项目

				
			

			

				

					10-09
				

			

		

		

			
				
手把手带你使用脚手架，写一个VUEX的小项目，项目列表分了步骤，非常易懂，

			
		

	





	

		

			

				
					
如何搭建一个vue项目(完整步骤)

					
最新发布

				
			

			

				

					y2020520的博客
				

				

					05-16
					
					2万+
					
				

			

		

		

			
				
Install vue-router                         ==>        是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；最后附上demo地址：https://github.com/yanxulan/vue-demo.git。参考：https://www.cnblogs.com/yanxulan/p/8978732.html。d：输入ip： http://localhost:8010/#/first，查看页面效果。

			
		

	





	

		

			

				
					
vue之自定义组件的制作，简单到你怀疑人生

				
			

			

				

					qq_39974331的博客
				

				

					05-29
					
					2393
					
				

			

		

		

			
				
最近项目做完了，闲来无事，重新读了一遍vue官方文档，发现了以前很多没有的东西以及自己没注意的方法。

自定义组件就相当于方法封装，在写项目遇到像类似的代码，第一想法就是我得把它封装起来，其实自定义组件也差不多。

废话不多说，我们开始吧。

首先，要有思路：

官方提供了自定义组件接收参数的方法---prop，以及向外传递信息的方法---$emit，既然对外互通的方法有了，那么方法就一目了然了，...

			
		

	





	

		

			

				
					
如何搭建一个vue2项目(完整步骤)

					
热门推荐

				
			

			

				

					zzz1780340的博客
				

				

					04-10
					
					2万+
					
				

			

		

		

			
				
从0-1搭建一个基础的vue2项目

			
		

	





	

		

			

				
					
Vue2案例

				
			

			

				

					weixin_52072921的博客
				

				

					01-15
					
					1143
					
				

			

		

		

			
				
【代码】Vue2案例。

			
		

	





	

		

			

				
					
VUE项目发布shell脚本

				
			

			

				

					weixin_34261415的博客
				

				

					03-07
					
					1676
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
Vue-3.2自定义创建项目

				
			

			

				

					weixin_46479909的博客
				

				

					10-15
					
					333
					
				

			

		

		

			
				
其实就是mode模式，之后再去修改就可以，history和hash。无分号规范（标准化），目前最流行的。基于VueCli自定义创建项目架子。是否为未来创建的项目保存该设置。将配置文件放在单独的文件中。空格选中，再空格取消。

			
		

	





	

		

			

				
					
vue学习笔记之自定义创建项目

				
			

			

				

					m0_60817860的博客
				

				

					01-10
					
					498
					
				

			

		

		

			
				
一：创建流程：

0、安装脚手架（已完成）

1、在想创建项目的目录下打开命令行模式，输入：vuecreate项目名创建项目

2、选择第三个自定义配置

3、上下键选择哪个配置，空格是确定选择和取消



4、选择vue2

5、选择是否使用历史模式的vue



6、选择css预处理器



7、选择使用哪一种ESlint代码规范（下图选的是无分号标准化规范）



8、选择在什么时候进行校验（1：保存的时候 2：使用git的提交时）

9、选择将配置文件放在哪里（1：单独的配置文件 2：

			
		

	





	

		

			

				
					
我的第一个前端项目，vue项目从零开始创建和运行

				
			

			

				

					麦小洛
				

				

					01-06
					
					3515
					
				

			

		

		

			
				
​入门前端，从基础做起，从零开始新建项目。VUE脚手架项目是一个“单页面”应用，即整个项目中只有1个网页！

			
		

	





	

		

			

				
					
Vue-cli 3.0快速搭建Vue项目指南：从零开始

				
			

			

				

					
				

			

		

		

			
				
本文将详细介绍如何使用Vue-cli 3.0来搭建Vue前端项目，...通过以上步骤，你将成功使用Vue-cli 3.0搭建一个功能齐全的Vue项目，这将大大提高开发效率和代码质量。记住定期更新依赖和遵循最佳实践，保持项目的高效运行。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值