Vue UI 创建Vue前端工程(Windows)

最新推荐文章于 2024-04-30 10:44:19 发布
最新推荐文章于 2024-04-30 10:44:19 发布
阅读量8.1w 收藏 138
点赞数 53
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967679/article/details/108829209
版权

Vue ui 创建Vue前端工程

1.开启vue ui 服务

快捷键 win+r 打开 cmd 输入下面命令

vue ui

2.访问 vue ui 界面

打开浏览器,地址栏输入 localhost:8080

3.创建项目

点击创建
在这里插入图片描述
选择你要创建的项目目录,点击 在此创建新项目
在这里插入图片描述
输入项目名称,包管理器选择 npm, git 命令填写 init project , 点击下一步
在这里插入图片描述
选择手动
在这里插入图片描述

把format 去掉, 选中 router, 选中使用配置文件, 点击下一步
在这里插入图片描述
点击创建项目

在这里插入图片描述

点击创建项目,不保存预设

在这里插入图片描述

4. 添加 element-ui 插件

先点击左侧导航栏 插件,再点击右上角 添加插件
在这里插入图片描述
**搜索 element ,先选中 如图矩形框中的内容,版本不一致没关系, 再点击右下角 安装 **
在这里插入图片描述
**安装完成后点击 完成安装 **
在这里插入图片描述

4.添加依赖

  1. 添加 axios 依赖
    点击左侧导航条 依赖在这里插入图片描述
    点击右上角 安装依赖
    在这里插入图片描述
    搜索框输入 axios ,选中内容如图所示, 再点击 右下角的 安装
    在这里插入图片描述

  2. 安装 less-loader 依赖
    如上图一样,搜索框中输入 less-loader,再点击右下角安装
    在这里插入图片描述

3.安装 less 依赖
如上图一样,搜索框中输入 less,再点击右下角安装
在这里插入图片描述

到这里所有安装都结束了,接下来启动 Vue 项目

4.启动 Vue 项目

如图操作即可
在这里插入图片描述

5.访问 Vue 项目

浏览器地址栏输入 localhost:8080
如果界面和下图一样说明成功
在这里插入图片描述

jiachengren
关注
  • 53
    点赞
  • 踩
  • 138
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 40
    评论
专栏目录
windows 下本地搭建vue+element UI 环境
wzk2329的博客
01-27 546
1、开始前确认有以下开发环境 node.js -v v14.7.0 npm -v 6.14.7 yarn -v 1.22.10 Vue -v 2.5.2 版本各不相同，根据自己的情况来。。 1、每次弄vue都会忘了了现在把它记录下来吧，需要的朋友也可以看下 2、部署之前要前安装好 npm工具，也可以是node.js这里就不多说了 3、cmd到需要安装到的目录执行vue init webpackmy-vue（项目名称） 一直按回来直到出现这个： ? Use ES...
Windows下创建Vue工程步骤
liubangbo的专栏
02-23 278
文章转自：https://www.cnblogs.com/liluxiang/p/9592003.html 一、使用之前，我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个...
Vue ui 创建vue项目，详细使用攻略。
苦逼打工人的博客
04-30 955
Vue ui 创建vue项目，详细使用攻略。附带常用功能使用教程
疑难（1）：Windows命令行输入vue ui，创建Vue项目没有反应
zwd926的博客
07-03 2734
在通过命令行vue ui来通过Element-UI创建vue项目的时候，发现命令行没有任何反应，输入vue -h 查看帮助文档,看是否有 ui这个命令,发现没有,那就应该是版本太低了。 升级脚手架： cnpm i -g @vue/cli 注意：i 是 install的缩写，命令含义：全局保存vue-cli 接下来在命令行重新输入： vue -h 接下来在使用vue ui 看是否能成功打开 vue ui 最后会自动打开网页显示如下内容： ...
Windows中运行vue ui指令无反应的解决过程
maomao10241128的博客
07-22 1331
在开始学习时，往往会遇到很多问题，本文主要针对运行vue ui后无反应的问题，给出具体的解决过程。
windows安装vue脚手架(vue-cli)及vue ui无反应,npm i -g @vue/cli报错解决方案
因上努力，果上随缘
06-11 1783
首先去node.js官网下载系统对应的node.js版本。 安装完成之后，在命令行下，输入 node -v及npm -v检查node和npm(node自带npm)安装是否成功。 安装全局的cli。在命令行下输入npm install --global vue-cli。 然后输入 vue --version，来查看安装版本。 命令行输入: #vue ui 无反应,因为没有ui组件 #vue 经查询，需要通过npm i -g @vue/cli安装ui组件。但该命令执行过程中报错。 解.
Vue Element UI 完整版前端框架
07-31
通过阅读和理解提供的源码，你不仅可以学习到如何使用这两个工具，还能深入学习前端工程化实践，如模块化、状态管理（Vuex）、路由管理（Vue Router）以及打包构建（Webpack）等。 在时间允许的情况下，深入研究这...
CRM系统前端 UI VUE开发
07-25
在这个项目中，我们聚焦于CRM系统的前端UI部分，特别是使用Vue.js进行开发。Vue.js是一款轻量级、高性能的前端JavaScript框架，因其易学易用、组件化开发模式而深受开发者喜爱。 首先，我们要理解用户管理模块。...
搭建element-ui的Vue前端工程操作实例
11-27
搭建Element-UI的Vue前端工程涉及一系列步骤，主要包括环境配置、工具安装、项目初始化、依赖引入和项目构建。以下是对这些知识点的详细说明： 一、环境配置 首先，需要安装Node.js并配置环境变量，确保在命令行...
vue 前端 考勤系统 element-ui router
10-13
总的来说，这个Vue前端考勤系统项目利用Vue.js的灵活性和Element-UI的组件化设计，构建了一个用户友好的界面，并通过Vue Router实现页面间的导航。同时，项目还借助了PostCSS、ESLint等工具来优化和规范代码，确保...
vue+element-ui前端模板
10-28
"vue+element-ui前端模板"很可能就是通过Vue CLI创建的，预装了Element UI插件。 4. **路由管理（Vue Router）**：Vue Router 是 Vue.js 官方的路由管理器，它允许在组件之间平滑地切换，实现单页应用（SPA）的导航...
模仿Windows10 UI 框架 Vue3
启明星的指引---博客
08-30 1636
vue3-win10 Vue3 仿Win10 UI 框架 推荐 Vue 3 + Typescript + Vite + Using <script setup> 本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。 Demo|Demo|Demo 可视化的一大步 本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。 Vue3支持 推荐 Vue 3 + Typescript + Vite 方便快捷 使用原本的Vue开发方式即可 ...
Vue UI 组件库
小贤笔记
07-27 876
随着SPA、前后端分离的技术架构在业界越来越流行，前端的业务复杂度也越来越高，导致前端开发者需要管理的内容，承担的职责越来越多，这一切，使得业界对前端开发方案的思考多了很多，以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可，这种模式极大的降低了我们开发与维护的成本。vue作为一款深受广大群众以及尤大崇拜者的喜欢，特此列出在github上开源的vue优秀UI组件库供大家参考，期...
推荐21个顶级的Vue UI库！
08-22 600
最近，随着“星球大战”（指GitHub的 Star 数量大比拼）的爆发，Vue.js 在 GitHub 上的 Star 数超过了 React。虽然 NPM 的下载量仍然落后于 React，但 Vue.js 的受欢迎程度似乎在持续增长。 与 React 一样，Vue 的最佳特性之一就是能够使用独立的模块化组件来组合UI。为了帮助读者更快地构建下一个应用程序，以下列出了 2018 年的一些最佳 UI...
win10快速搭建vue开发环境并使用element ui
liutaiyi8的博客
09-10 869
1，环境 1.1 node.js安装 下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 选安装目录进行安装（安装过程就是全程next，注意不要取消自动配置环境） 测试：win+R 输入cmd 进入控制台使用“node -v”，“npm -v” 这样就安装成功了。 1.2 cnpm安装 npm install -g cnpm 3 安...
windows搭建vue开发环境
小哥骑单车
06-24 2076
3、安装淘宝镜像(cnpm) npm install cnpm -g --registry=https://registry.npm.taobao.org。参考你的项目需要运行java一样，配置JAVA_HOME这些；然后创建项目（或者使用类似vue create my-project命令创建项目，命令:cnpm install @vue/cli -g(最新版本)//cnpm install vue-cli -g(不是最新版本)输入npm install vue -g。2、安装好后，配置环境变量。
vue实现动态检索功能
weixin_35749796的博客
12-19 581
Vue.js 是一个渐进式 JavaScript 框架，它可以帮助你开发动态交互式的 web 应用程序。 要实现动态检索功能，你可以在 Vue 组件中使用一个输入框和按钮，并在点击按钮时触发搜索功能。 首先，在组件的 data 选项中声明一个 searchTerm 属性，用于存储输入框中的搜索内容： data() { return { searchTerm: '' } }, 然后...
vue 更多筛选 列表字段动态搜索
lemon今天学习了吗？的博客
12-14 2191
一、需求：表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据。每一个查询字段都会调用一次查询接口。1.更多筛选字段获取，触发接口查询。点击确定按钮绑定触发的方法；2.列表页面在点击确定之后就触发了绑定在dialog的方法；4.监听在queryForm，自动触发表格接口调用方法；3.接口方法处理获取参数；
模仿Win10 UI 框架 Vue3
启明星的指引---博客
08-10 1205
Win10 UI 框架 Vue3 推荐 Vue 3 + Typescript + Vite + Using <script setup> 本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。 Demo|Demo|Demo Usage 开发流程 推荐clone本仓库，在本仓库基础上修改，模版在/template目录下 引入winVue租组件（clone可以跳过此步骤） <WinVue></WinVue> import WinVue fro
vue ui界面创建项目
最新发布
07-02
Vue UI 是一个基于 Vue.js 的轻量级前端组件库，它提供了一套美观、易用的界面元素和设计风格，用于快速构建用户界面。如果你想使用 Vue UI 创建一个新的项目，可以按照以下步骤操作： 1. **安装 Vue CLI**: 首先...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 40
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiachengren

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值