使用vue-cli脚手架在vs code 建立vue项目

最新推荐文章于 2024-07-12 16:09:07 发布
最新推荐文章于 2024-07-12 16:09:07 发布
阅读量1.5k 收藏 4
点赞数 1
文章标签： 简单搭建vue-cli脚手架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37724356/article/details/79485528
版权
本文介绍了如何在VS Code环境下使用vue-cli搭建Vue项目。首先确保已安装npm，然后全局安装vue-cli。接着，通过vue init命令初始化项目，选择合适的模板并根据提示配置项目。最后，进入项目目录，安装依赖并运行npm run dev启动开发服务器，成功运行表明项目已搭建完成。
摘要由CSDN通过智能技术生成

一、安装vue-cli

1、安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v  检测你是否安装了npm和版本情况。(node的下载地址：http://nodejs.cn/download/)

2、达到以上条件后就可以通过一下命令安装vue-cli


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Self_Growing
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Microsoft VS Code中搭建Vue脚手架

				
			

			

				

					u014084915的博客
				

				

					01-07
					
					1389
					
				

			

		

		

			
				
（1）免安装绿色软件，将运行程序图标直接发送到桌面使用。

（2）Microsoft VS Code汉化

（3）搭建Vue脚手架

简单的问题面向百度，难的问题面向bilibili（B站）
忙的时候搬砖，有空的时候切磋提高技术
1、安装nodejs（自带npm）
2、安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

（cnpm是国内的，比较快）
3、全局安装webpack
cnpm install webpack –g



			
		

	



                

              
                



	

		

			

				
					
安装vue-cli&使用vue-cli搭建项目

				
			

			

				

					qq_64001795的博客
				

				

					09-26
					
					4988
					
				

			

		

		

			
				
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 ,  和 。这三个部分分别代表了 html,js,css。

			
		

	



                


  
              

                


	

		

			

				
					
VSCode 搭建Vue开发环境Vue CLI以及创建项目测试（一看就懂）

				
			

			

				

					chenggong9527的博客
				

				

					07-17
					
					554
					
				

			

		

		

			
				
一、简介说明

1.关于VS Code开发工具，安装和配置，更多可以参考以前文章

2.关于Vue.js，Vue是一个优秀的渐进式前端框架，不仅易于上手，还便于与第三方库或既有项目整合。

3.关于Vue是使用方式有两种，第一种、最简单方式和以前使用jquery框架似的引入Vue，直接编写使用；第二种，使用Vue 官方提供的 Vue CLI搭建开发环境。

4、关于 Vue CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的vue命令。它可以通过vue create...

			
		

	





	

		

			

				
					
教你用VS code 生成vue-cli代码片段

				
			

			

				

					主要领域：前端开发
				

				

					05-29
					
					795
					
				

			

		

		

			
				
可以自定义设置名字：name.json
{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			""...

			
		

	



		

			
		



	

		

			

				
					
在VS Code上搭建Vue项目教程（Vue-cli 脚手架）

					
最新发布

				
			

			

				

					明静致远
				

				

					07-12
					
					7819
					
				

			

		

		

			
				
搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。

			
		

	





	

		

			

				
					
通过vs code使用vue-cli搭建vue项目（以搭建一个项目名称vue-test为例）

				
			

			

				

					Zxiaoling的博客
				

				

					12-04
					
					168
					
				

			

		

		

			
				
1.

2.手动配置



3

.

4.



5.



6.选择ESLint的代码规范，此处使用standard代码规范



7.选择何时进行代码检测，此处选择在保存时进行检测



8.选择babel,postcss,ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中



9.看个人需求



10.项目创建完成。
...

			
		

	





	

		

			

				
					
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

				
			

			

				

					10-17
				

			

		

		

			
				
使用vue-cli3创建Vue项目及配置VS Code自动代码格式化和Vue语法高亮问题涉及了多个知识点和步骤，主要包括vue-cli3的基本使用、VS Code的插件安装和配置、ESLint和Prettier的安装和配置以及VS Code用户设置的修改。...

			
		

	





	

		

			

				
					
webpack4+Vue搭建自己的Vue-cli项目过程分享

				
			

			

				

					10-18
				

			

		

		

			
				
同时，Vue.js也迅速成为前端主流框架之一，结合Vue的脚手架工具Vue-cli，可以极大降低项目搭建的门槛。本文将详细介绍如何使用Webpack 4和Vue来搭建一个Vue-cli项目，从而实现快速开发Vue应用。  首先需要了解，...

			
		

	





	

		

			

				
					
Vue-cli(脚手架)安装

				
			

			

				

					Cccy1567的博客
				

				

					07-24
					
					770
					
				

			

		

		

			
				
新手整理搭建vue脚手架，根据多篇博客自己整理以方便查阅

			
		

	





	

		

			

				
					
脚手架搭建vue项目（vscode）

				
			

			

				

					weixin_42925100的博客
				

				

					04-15
					
					917
					
				

			

		

		

			
				
第一步：桌面新建文件夹
第二步：vscode打开
第三步：vscode内终端执行如下代码：
sudo npm install -g vue-cli

注意：要加sudo！！！！！这一步就是搭建脚手架
等安装完成后：
第四步：查看安装是否成功
vue list

第五步：输入
sudo vue init webpack vue_project

注意：创建项目,名为vue_project
第六步：完...

			
		

	





	

		

			

				
					
建立vue的脚手架vscode终端以及配置（取消警告waring）

				
			

			

				

					m0_62387059的博客
				

				

					07-16
					
					825
					
				

			

		

		

			
				
第一步先确定是否在你要建立的文件地址中，如果不在则要用cd进行移动。(2)接下来输入（安装速度可能有点慢）(4)选择vue的版本（回车选择）（5）按照指示进行就行。

			
		

	





	

		

			

				
					
vscode创建一个vue-cli项目

				
			

			

				

					qq_34200636的博客
				

				

					09-12
					
					1445
					
				

			

		

		

			
				
前言

npm: Nodejs下的包管理器
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包
vue-cli: 用户生成Vue工程模板（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

1、安装node.js

最好不要安装在C盘（踩坑，所以下面路径都...

			
		

	





	

		

			

				
					
VSCode 配置Vue 脚手架环境 vscode 配置 vscode 配置 vue 环境 vscode插件 vscode必备插件 vue插件

					
热门推荐

				
			

			

				

					半只
				

				

					11-10
					
					2万+
					
				

			

		

		

			
				
开始配置电脑node环境配置VUE 脚手架环境以及配置VUE项目VSCode 配置
配置电脑node环境
前往 node.js 安装 电脑对应版本的node Node.js

下载 长期支持版，用的人多，应该稳定吧
安装好后 ，windows，进入cmd 输入 node -v 验证是否安装成功,Linux 则打开终端输入 node -v

输入 node -v后会出现 安装的node版本号,安装成功
配置VUE 脚手架环境以及配置VUE项目
配置 脚手架环境：
安装node.js后

在cmd或者vscod

			
		

	





	

		

			

				
					
vsCode新建一个vue脚手架

				
			

			

				

					LemonSnm的博客
				

				

					08-27
					
					2589
					
				

			

		

		

			
				
1.下载vsCode：

https://code.visualstudio.com/Download





2.创建项目文件夹：

在任意地方新建文件夹，右击vscode进入：







3.进入终端

如果没有安装vue-cli，在终端输入：

npm install -g vue-cli



用来全局安装vue-cli

3.2、然后新建项目

终端输入：

vue ini...

			
		

	





	

		

			

				
					
Vue第一章：使用VSCode VUE搭建脚手架 实例操作

				
			

			

				

					longyq的专栏
				

				

					09-01
					
					1120
					
				

			

		

		

			
				
因为vue3脚手架npm安装，需要预先暗转node.js：

第一步：在选择的文件夹内，使用终端命令行的形式安装脚手架：vue-cli：


npm install -g @vue/cli



二、使用脚手架创建项目


vue create mybpm   （注意，项目名称不能大写）






选择安装方式：最后一个（Manually select features）为自定义安装。我们选择自定义安装：



选择我们需要用到的项：



选择vue3.0



是否需要更改模式：一般不需要...

			
		

	





	

		

			

				
					
自定义Vue脚手架模板之：Vue-Cli源码分析

				
			

			

				

					BraveWangDev
				

				

					12-09
					
					3813
					
				

			

		

		

			
				
一，前言
由于最近需要做一款企业内部使用的vueCodeBase，用做公司项目初始化脚手架
常规的vue init template &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;project-name&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;脚手架不能满足需要
因此希望能够实现一款定制化的基于template模板之上的脚手

			
		

	





	

		

			

				
					
使用vs code启用vue项目

				
			

			

				

					weixin_44262390的博客
				

				

					04-20
					
					6042
					
				

			

		

		

			
				
一 环境
git.exe
node.js
注意检查环境变量配置。
检查方式：cmd
VS Code开发软件
二 用git clone项目
打开vs code，
Ctril+~快捷键打开命令窗口，
打开到要下载项目的位置，例如：
输入命令git clone 项目git地址下载项目。
下载完成后，

...

			
		

	





	

		

			

				
					
Vue项目搭建 -- visual Studio加vue-cli

				
			

			

				

					a_靖的博客
				

				

					08-12
					
					1万+
					
				

			

		

		

			
				
微信小程序开发交流qq群 581478349

 承接微信小程序开发。扫码加微信。

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，

GitHub地址：https://github.com/vuejs/vue-cli



一：安装node.js

安装教程：http://www.runoob.com/nodejs/node...

			
		

	





	

		

			

				
					
Vue-cli脚手架配置全解析：从搭建到运行

				
			

			

				

					
				

			

		

		

			
				
"详解vue-cli官方脚手架配置与创建项目步骤"  Vue CLI（Vue Command Line Interface）是Vue.js官方提供的一个脚手架工具，用于快速搭建 Vue.js 项目。通过这个脚手架，开发者可以轻松地初始化一个符合最佳实践的项目...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值