Vue ui安装

最新推荐文章于 2025-03-29 14:01:58 发布
最新推荐文章于 2025-03-29 14:01:58 发布
阅读量958 收藏 5
点赞数 3
文章标签： vue.js node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27551075/article/details/119562178
版权
本文详细介绍了如何安装和配置Node.js、npm、webpack以及VueCLI。首先，确认Node.js安装并检查版本，然后通过淘宝镜像安装cnpm。接着，全局安装webpack和VueCLI，并验证版本。当发现Vue版本过低，不支持vueui命令时，通过cnpm卸载旧版vue-cli并安装@vue/cli。最后，确认@vue/cli的vueui命令可用，以启动图形界面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.先安装node
===》去菜鸟教程看===》输入 node -v，如果出现相应的版本号，则说明安装成功。

2.安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
===》去菜鸟教程看node.js第四节npm使用介绍往下拉http://www.runoob.com/nodejs/nodejs-npm.html

3.安装webpack
===》npm install webpack@3.8.1 -g //-g全局安装webpack版本3.8.1==》webpack -v查看版本号

4.安装vue-cli脚手架构建工具
npm install vue-cli -g
安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。
 

查看vue版本：

vue --version 或者 vue -V

发现vue版本才2.9.6

由于vue ui 命令需要vue3.0以上，旧版本vue cli 的包名从vue-cli改成了@vue/cli，所以之前通过npm或者cnpm安装vue-cli是没有ui命令，可以通过vue -h 看一下。

vue -h

有图可见里面Commands下没有ui命令，因此vue ui 无响应。


卸载之前的vue-cli

npm uninstall vue-cli -g

安装@vue/cli

最好不要使用npm安装，因为太慢了（-_-），如果没有安装cnpm，先用淘宝镜像安装

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

查看cnpm --version，如果有就是安装成功，接着下一步

cnpm install -g @vue/cli

接下来再查看vue -h 里面的commands命令是否有ui
 

使用vue ui启动页面


                

        

    

  



    



                



	

		

			

				
					
vue ui安装vue项目

				
			

			

				

					实践求真知
				

				

					05-03
					
					942
					
				

			

		

		

			
				
一命令行输入




vueui

二 点击创建项目





三输入命令名称



四手动配置，然后下一步

五功能配置



六最后一步配置



七保存预设



八项目生成后运行



九生成后代码结构


...

			
		

	



                

            
              



	

		

			

				
					
通过vue ui方式构建vue+electron项目

				
			

			

				

					feinifi的博客
				

				

					09-03
					
					678
					
				

			

		

		

			
				
vue ui创建electron-vue项目

			
		

	



              


  
              

                


	

		

			

				
					
2021-03-31

				
			

			

				

					烟雨晴天的博客
				

				

					03-31
					
					4255
					
				

			

		

		

			
				
记录一下自己vue出现的问题和解决方法：
PS D:\vscode\shop> npm install
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated.

			
		

	





	

		

			

				
					
vue前端框架的安装以及项目创建教程（包括控制台创建和UI创建）

					
最新发布

				
			

			

				

					记录工作，记录生活 ;)
				

				

					03-29
					
					982
					
				

			

		

		

			
				
本文介绍了Vue前端框架的安装及项目创建教程，包括控制台和UI两种方式。文章首先讲解了Node.js的安装与配置，为Vue的运行环境做准备。随后，详细阐述了Vue的安装步骤，以及通过命令行和UI界面创建Vue项目的过程。最后，对Vue项目中的各个文件及其意义进行了清晰说明，帮助读者快速上手Vue开发。

			
		

	



		

			
		



	

		

			

				
					
vue_cli安装和vue ui使用

				
			

			

				

					weixin_43932097的博客
				

				

					10-14
					
					596
					
				

			

		

		

			
				
在说vue ui前先说说普通的安装，在我们之前使用vuex或者是vue_router等第三方都是需要在项目中去输入命令去安装，并且有的时候安转还不成功，那么vue ui就是解决这一痛点，在我们构建好项目后输入 vue ui命令会自动打开一个可视化界面。安装好后就可以在目录中看到你的插件信息，如vue_router安装好后在项目中会给我们自动引入当前文件。如果是没有导入项目需要点击导入项目，把本地的项目路径进行导入。导入成功后在项目中会显示你的导入项目路径点击进入。vue -V检查是否安装成功。

			
		

	





	

		

			

				
					
Vue ui组件的了解、安装、使用

				
			

			

				

					k010107的博客
				

				

					10-27
					
					1389
					
				

			

		

		

			
				
Vue.js 是一个渐进式 JavaScript 框架，用于构建 UIS（用户界面）和 SPA（单页应用程序）。UI 组件库提高了我们的开发效率速度，增强了应用的整体外观、感觉、交互性和可访问性，接下来就看看有哪些适用于 Vue ui 组件库。

			
		

	





	

		

			

				
					
VUE  UI的安装

				
			

			

				

					许魁的博客
				

				

					10-10
					
					6164
					
				

			

		

		

			
				
Vue需是3.0以上版本

1，cmd中执行下面两个命令


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

这两个都一样，但有时并不都会成功，所以保险起见都试一下。

国内网比较慢,可以先安装一个淘宝镜像cnpm 要快的多。

2，


vue ui

3,成功后浏览器页面会弹出VUE UI界面



剩下的就是创建或者导入项目了，插件也是直接点击安装即可。
...

			
		

	





	

		

			

				
					
Vue UI方式安装和创建 Vuetify 项目

				
			

			

				

					weixin_46703850的博客
				

				

					10-16
					
					925
					
				

			

		

		

			
				
Vuetify Vue UI方式安装和创建项目

			
		

	





	

		

			

				
					
前端：2024年非常受欢迎非常火的 VueUI 库

				
			

			

				

					一些平时在开发过程中遇到的常见问题，分享给大家
				

				

					06-21
					
					4258
					
				

			

		

		

			
				
前端：2024年非常受欢迎非常火的 VueUI 库

			
		

	





	

		

			

				
					
Vue ui的安装与运用

				
			

			

				

					weixin_56858521的博客
				

				

					01-21
					
					1052
					
				

			

		

		

			
				
运用vue ui，先安装Node.Js

Node.Js官网下载安装包，建议下载低版本的，避免与其他依赖发生冲突。下载安装包：

node-v14.18.3-x64.msi



1.安装

node-v14.18.3-x64.msi 右键，安装， next ,选择自动。

2.拆卸
node-v14.18.3-x64.msi 右键，拆卸 然后把安装node的内容进行删除
3.安装完成后，如下图，建立两个空文件夹：

node_global

node_cache



打开cmd 窗口：分别运行下面的..

			
		

	





	

		

			

				
					
vue各种安装和使用

				
			

			

				

					lipenghao111的博客
				

				

					04-16
					
					559
					
				

			

		

		

			
				
在项目里发 npm i element-ui -S。然后再main.js里面复制。

			
		

	





	

		

			

				
					
Vue入门安装以及基本工程（vue ui）搭建

				
			

			

				

					ChanceZhou的博客
				

				

					03-19
					
					1174
					
				

			

		

		

			
				
Vue的安装
前提  ： 确保npm和node.js已经安装

vue新版本要求
安装 | Vue CLI (vuejs.org)
安装淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org 

cnpm安装显示不是内部或外部命令，也不是可运行的程序

不是上面的路径，真正路径是下方这个

vue-cli 安装依赖包
cnpm install --g vue-cli   此方法版本过低
若安装了，请卸载   cnpm uninst

			
		

	





	

		

			

				
					
vue的安装与使用

				
			

			

				

					JIANBINGLING的博客
				

				

					12-28
					
					1129
					
				

			

		

		

			
				
el-input type="password" v-model="loginForm.password" placeholder="请输入密码">安装好了，接着在你的Vue的入口文件(main.js或其他你使用的入口文件)引入Element-UI。为了创建的位置想要在自己创建的位置只要在要创建的位置打开命令行。

			
		

	





	

		

			

				
					
vue ui的安装及使用

					
热门推荐

				
			

			

				

					DangR_Jisoo的博客
				

				

					09-02
					
					3万+
					
				

			

		

		

			
				
vue ui是什么？
简单来说，vue ui是一个可视化图形界面，方便你去创建、更新和管理vue项目，包括下载router，vuex，axios，elementui等插件，配置好一些属性以及依赖关系，方便我们使用，我个人第一次接触它就感觉非常非常非常智能和强大
配置步骤

安装Vue CLI，因为vue ui是在Vue CLI基础上封装的

npm install -g @vue/cli


打开C:\Users*xxxx*\AppData\Roaming\npm，看看有没有下图框出的文件

将C:\Use

			
		

	





	

		

			

				
					
Vue UI - 可视化的Vue项目管理器

				
			

			

				

					独泪了无痕
				

				

					08-17
					
					3240
					
				

			

		

		

			
				
这一步在选择项目所需的配置项时，就很直观了。页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，方便简单多了。我这里只简单选择了Choose Vue version、Babel、Router等三项。选择Vue语法版本（2.x / 3.x（Preview））；选择路由模式（history mode / hash mode）；

			
		

	





	

		

			

				
					
如何安装并使用Vue ui

				
			

			

				

					wang_9909的博客
				

				

					06-10
					
					918
					
				

			

		

		

			
				
1.查看本地node.js是否安装
node -v

2.安装vue
npm install vue

3.查看vue脚手架是否成功安装以及安装的版本号
vue -V

4.打开vueui，进入vueui页面
vue ui


OK！vueui已经成功创建了。
对于运行cmd命令时提示没有脚本权限
解决办法：管理员运行powershell
然后输入 set-ExecutionPolicy RemoteSigned

...

			
		

	





	

		

			

				
					
vue-cli 3UI控制台安装使用

				
			

			

				

					Joker_Lie的博客
				

				

					02-18
					
					547
					
				

			

		

		

			
				
1.安装
npm install -g @vue/cli

最好使用cnpm，否则下载速度超慢
2.启动
直接输入 vue -h，可见下图

输入

vue ui

就会启动一个本地服务，界面下图：

3.创建项目
首先选择创建路径


...

			
		

	





	

		

			

				
					
创建vue项目：vue ui界面创建项目后，安装Element Ui插件、axios 依赖，如何启动vue项目，npm run serve，启动vue项目方式（保姆级教程三）

				
			

			

				

					zhangfuping123456789的博客
				

				

					12-07
					
					8655
					
				

			

		

		

			
				
node、vue、element ui、axios

			
		

	





	

		

			

				
					
vue ui安装

				
			

			

				

					03-25
				

			

		

		

			
				
### Vue UI 安装教程及方法

#### 一、Vue CLI 版本确认
在安装 `vue ui` 工具前，需确保已安装的是新版 Vue CLI (`@vue/cli`) 而不是旧版的 `vue-cli`。这是因为只有 Vue CLI 3.0 及以上版本才支持 `vue ui` 命令[^4]。

如果当前环境中未安装最新版 Vue CLI，则可以运行以下命令来全局安装它：
```bash
npm install -g @vue/cli
```

验证安装成功并查看其版本号可执行如下命令：
```bash
vue --version
```

#### 二、启动 Vue UI 图形化界面
完成上述步骤后，在终端输入以下指令即可打开图形化的管理工具：
```bash
vue ui
```
此操作会自动开启本地服务，默认地址通常为 http://localhost:8080/ 或其他指定端口，并弹出浏览器窗口展示 GUI 界面。

#### 三、通过 Vue UI 创建项目与插件配置
进入 Vue UI 后，可以选择新建工程项目或修改已有项目的设置。对于新增加的功能模块比如 ElementUI 和 Axios 的集成过程非常简便直观：

1. **创建新项目**: 在首页点击 “Create a new project”，按照提示填写名称路径等基本信息；
2. **选择预设功能集**: 推荐采用手动模式挑选所需特性（Manual selection），这样能更灵活控制组件库形式以及其他高级选项；
3. **添加插件**: 当项目基础框架构建完成后返回主菜单，找到 Plugins 部分，搜索关键字如 element-ui, vue-echarts 进行单独引入[^1][^2]；

另外值得注意的是，部分特定依赖可能还需要额外的手动调整 package.json 文件内容或是编写初始化代码片段到入口文件 main.js 中去实现完全兼容效果[^1]。

#### 四、注意事项
- 如果遇到权限错误无法正常更新 npm 包时尝试加上 sudo 权限再重新执行一次安装流程。
- 对于国内开发者来说可能会因为网络原因造成资源下载缓慢甚至失败的情况发生，建议切换淘宝镜像源解决该类问题：  
    ```bash
    npm config set registry https://registry.npmmirror.com/
    ```

---

###

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值