首页 > 其他分享 >vue-ui

vue-ui

时间:2023-11-26 21:31:55浏览次数:42  
标签:插件 vue cli 项目 自行 ui

使用vue-ui新建一个vue项目

@vue/cli-ui 是 vue-cli 内置的一套成熟的 UI。

Vue-cli 的 3.x 版本由内到外完全重写,带来了许多很棒的新特性。你可以在你的项目中选用路由、Vuex 和 Typescript 等等特性,并为项目添加“vue-cli 插件”。不过,这么多的选项也意味着它更加复杂,难以上手。因此我们认为,相比局限的命令行界面,一个成熟的 GUI 更能帮助你发掘这些新特性,搜索和安装 vue-cli 插件,解锁更多可能。总的来说,vue-cli 不仅能让你轻松启动新项目,并且在后续的工作中仍会是你的得力助手。

前提:

安装node,vue cli

1.开启vue ui服务

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

vue ui

vue-ui_vue-ui

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

3.创建项目

输入你要新建的项目的存储地址,选中目录

vue-ui_vue-ui_02


vue-ui_vue-ui_03

输入项目名称,包管理器自行选择(可选npm),git也可不选,点击下一步

vue-ui_vue-ui_04

选择手动,后面可自行配置

vue-ui_vue-ui_05


可自行选择配置,建议把format 去掉, 选中 router, 选中使用配置文件, 点击下一步

vue-ui_vue-ui_06


可自行选择:vue版本,路由模式(history模式无#),样式处理器

vue-ui_vue-ui_07

点击创建项目,是否保存预设自行选择,等待创建成功,终端如图所示:

vue-ui_vue-ui_08

vue-ui_vue-ui_09

创建成功会自动进入项目仪表盘,没进入需要自行导入

vue-ui_vue-ui_10

vue-ui_vue-ui_11

进入项目仪表盘:

vue-ui_vue-ui_12

点击任务-serve-运行

vue-ui_vue-ui_13

vue-ui_vue-ui_14

vue-ui_vue-ui_15

打开8080 ,成功

vue-ui_vue-ui_16

4.安装插件,element-ui等

vue-ui_vue-ui_17

5.安装依赖,axios等

vue-ui_vue-ui_18


标签:插件,vue,cli,项目,自行,ui
From: https://blog.51cto.com/u_16373718/8572868

相关文章

  • springboot+vue持续集成
    Jenkins持续集成项目部署参考资料:见参考资料详情项目实战成长:见百度网盘jenkins视频资料地址参考:https://www.bilibili.com/video/BV1kJ411p7mV?spm_id_from=333.999.0.0整体流程:先下载tomcat,到http://tomcat.apache.org/index.html解压tomcat,并重命名Linux环境安......
  • Java基于springboot+vue开发服装商城小程序
    还可以改成其他商城哦。主要功能:用户可以浏览商品和特价商品,加入购物车,直接下单支付,在我的个人中心里可以管理自己的订单,收货地址,编辑资料等。管理员可以发布商品,上下架商品,处理订单。 演示视频:小程序https://www.bilibili.com/video/BV1rM411o7m4/?share_source=copy_web&vd_......
  • 在fluid主题中加入Google广告
    title:在fluid主题中加入Google广告banner_img:https://proxy.thisis.plus/8592ed575a242368611755f5529c28e.pngdate:2023-1-2710:00:00categories:-踩坑在fluid主题中加入Google广告在fluid的官方文档中,提供了在fluid主题中加入Google广告的方法,但是其中提到的参数d......
  • Vue开发 购物网站选项卡功能
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"type="text/css&......
  • 在WPF/MAUI中使用x:Bind
    最近逛GitHub的时候的时候,偶然看到了CompiledBindings这个库,据说可以实现和UWP中x:Bind一样的效果原理也是在编译时生成相关代码,性能应该比自带的Binding好些使用从NuGet中安装:安装完成后,可直接在XAML中使用x:Bind使用方法类似于UWP,无需设置DataContext(默认绑定方式为OneW......
  • Vue项目搜索-历史记录管理
    搜索-历史记录管理目标:构建搜索页的静态布局,完成历史记录的管理需求:搜索历史基本渲染点击搜索(添加历史)点击搜索按钮或底下历史记录,都能进行搜索若之前没有相同搜索关键字,则直接追加到最前面若之前已有相同搜索关键字,将该原有关键字移除,在追加(相当于置顶)清空历史:添加......
  • 【前端VUE】Vue3路由设置(Typescript版本)
    新建项目npmcreatevite@latest安装vue-routercd.\my-web\npminstallvue-router在src->components下新增(Home.vue)<template><h1>我是主页</h1></template>在src->components下新增(Register.vue)<template><h1>用户......
  • Vue项目的创建、运行与端口号修改
    前言:Vue-cli是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板,依赖于NodeJS环境NodeJS下载:NodeJS安装下载Vue-cli下载:Vue-cli下载一.Vue图形化创建项目1.建立一个文件夹,保存Vue项目2.在该文件夹的目录上输入cmd打开命令行3.令行输入vueui打开Vue项目管理......
  • Python GUI 开发过程中踩过的坑总结
    1、在使用pycharm开发运行时,ide会默认添加python文件和资源文件到python路径中去,所以通常不会报错,但是默写情况则会出现报错,如模块加载不到其他模块的问题。在手动创建项目工程目录结构时,需要将指定的python文件存放目录设定为【sourcesroot】,然后在该目录下在创建目录时要创建......
  • 【前端VUE】Vue3条件渲染指令(v-if、v-else、v-else-if、v-show、v-for)
    新建项目npmcreatevite@latest运行项目cd项目目录npminstallnpmrundev条件渲染指令1、v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。2、v-else可以使用v-else为v-if添加一个“else区块”。3、v-else-ifv-else......