西安网站开开发,项目之家app,wordpress wap版,网站优化内容原创前言#xff1a;在vue框架里面#xff0c; 以往大家都是习惯用命令行 vue create 、vue init webpack创建新前端项目#xff0c;而vue ui是一个可视化的图形界面#xff0c;对于新手来说更加友好了#xff0c;不但可以创建、管理、还可以更新vue项目#xff0c;也可以下载…前言在vue框架里面 以往大家都是习惯用命令行 vue create 、vue init webpack创建新前端项目而vue ui是一个可视化的图形界面对于新手来说更加友好了不但可以创建、管理、还可以更新vue项目也可以下载各种需要的插件比如elmentui、axios、vuex等图形化更加直观的看到所安装的各种插件以及安装卸载不用记命令写命令鼠标点击web页面即可下面就来介绍如何使用vue ui创建新web项目。
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链它现在处于维护模式。 一、先配置node环境
1.1、参考使用nvm管理多个node.js版本
使用nvm管理nodejs环境注意nodejs和npm的版本对应_npm和node版本对应-CSDN博客
npm install -g vue npm ERR! Arborist is not a constructor
1.2、更换node版本
nvm ls * 16.20.2 (Currently using 64-bit executable) 12.22.12 11.15.0 10.24.1 8.7.0
nvm use 11.15.0 Now using node v11.15.0 (64-bit)
npm install -g vue npm WARN vue3.4.21 requires a peer of typescript* but none is installed. You must install peer dependencies yourself. vue3.4.21 added 20 packages from 44 contributors in 1.746s
npm install -g vue/cli npm WARN deprecated shortid2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. npm WARN deprecated vue2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
...... vue/cli5.0.8 updated 1 package in 15.315s npm list vue -g E:\MySoftWare\NvmNode\npm\npm_global -- vue/cli5.0.8 | -- vue2.7.16 -- vue3.4.21 npm config list ; cli configs metrics-registry https://registry.npmmirror.com/ scope user-agent npm/6.7.0 node/v11.15.0 win32 x64
; userconfig C:\Users\admin\.npmrc cache E:\MySoftWare\NvmNode\npm\npm_cache prefix E:\MySoftWare\NvmNode\npm\npm_global registry https://registry.npmmirror.com/
; node bin location E:\MySoftWare\NvmNode\nodejs\node.exe ; cwd F:\code\SmartWaterConservancy ; HOME C:\Users\admin ; npm config ls -l to show all defaults. 1.3、在用户变量中新建变量变量名为vue 变量值为 prefix 目录下对应的路径。 1.4、点击系统变量的 Path 变量增加prefix 目录下对应的路径 npm config set prefix
vue -V You are using Node v11.15.0, but this version of vue/cli requires Node ^12.0.0 || 14.0.0. Please upgrade your Node version. nvm ls 16.20.2 12.22.12 * 11.15.0 (Currently using 64-bit executable) 10.24.1 8.7.0 nvm use 12.22.12 Now using node v12.22.12 (64-bit)
1.5、环境配置完成
vue -V vue/cli 5.0.8
二、使用UI指令创建新web项目
使用命令行cmd先用管理员进入选择想要创建项目的文件夹再运行 vue ui就会出现图形化管理web界面。
2.1、执行 vue ui创建指令
vue ui Starting GUI... Ready on http://localhost:8000 [Beta] 创建新项目 - Vue CLI 2.2、新web项目创建成功 2.3、项目仪表盘 2.4、项目插件 2.5、项目依赖 2.6、项目配置 2.7、项目任务 参见
Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
Home | Vue CLI (vuejs.org)
工具链 | Vue.js
插件开发指南 | Vue CLI
UI 插件 API | Vue CLI
