vue3.0以及vuetify2.0的框架搭建

最新推荐文章于 2024-06-21 10:17:25 发布
最新推荐文章于 2024-06-21 10:17:25 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： vue系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Austin_/article/details/103093399
版权

一,下载vue3.0命令

1.因为vuetify基于vue cli3的

npm install -g @vue/cli@3

2.创建项目名称vuetify6

vue create vuetify6

3.选择Manually select features,回车键确定

在这里插入图片描述

4.空格键 选中， 回车

在这里插入图片描述

5.yes

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

10.执行成功后的部分界面

在这里插入图片描述

在这里插入图片描述

 vue  add  vuetify

在这里插入图片描述

13.选择 Default

14.启动

npm run serve

在这里插入图片描述

16.点击 http://localhost:8080/

出现如下界面，就表示加载成功了。

在这里插入图片描述
然后就可以开始搭前端框架了。

补充：安装图标命令
在这里插入图片描述

Austinu
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于Vue3.0结合Vuetify组件开发的网易云案例(粉丝可以免费下载，私聊我)
01-16
模仿网易云的搜索音乐，播放音乐，查看评论详情等一些功能
通过vue3.0创建一个vuetify的项目
lll19960406的博客
05-29 263
参考我上一篇文章https://www.cnblogs.com/bingchenzhilu/p/11690402.html 创建完成后，我创建的名称是vuetify 通过 cd vuetify到达该级目录 输入vue add vuetify命令 选择默认项即可，下图是安装成功的样子 打开的项目目录是这样的 使用yarn serve 运行项目------------...
vue3自动导入---组件库elements-ui,vuetify以及scss样式的自动导入
最新发布
I_am_shy的博客
06-21 1040
我们在使用第三方组件库和css样式文件时，都需要进行引入，可以在单个组件内单独引用，也可以在全局引入或一次引入所有组件；但是，一般情况下我们都不会全部引入，这会是打包的结果变大，而且往往是不可能用上所有的组件，这个时候就需要。可以看到可以在组件中直接使用scss变量，要注意使用scss应该在style标签上添加lang="scss"属性。vuetify也是一套ui组件，它的风格和组件的动画效果更加生动，但是vuetify的配置会相对麻烦，然后就可以在vue组件中直接使用需要的ui组件。
vue-cli创建vuetify项目
寂寥人生
06-07 93
y 选择推荐的回车
Vue3+vite使用vuetify框架
weixin_66810621的博客
04-30 2251
vuetify非常完善，这使得我们仅需要这一个ui框架即可解决前端样式布局的所有，包括页面布局、动画过渡、各种好用的组件、字体与排版、主题配色、日期时间等等等等。
Vuetify创建
qq_59658944的博客
04-01 906
vuetify创建
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3.0与Vue2.0的区别（超详细）
10-05
Vue2.0是其第二代版本，而Vue3.0则是对其的重大更新和优化。两者之间的差异主要体现在以下几个方面： 1. **性能优化** - **编译优化**：Vue3.0 引入了新的编译器 `TurboVue` 和 `SSR` (Server-Side Rendering) ...
vue3.0+antd2.0 后台管理系统项目demo.zip
01-02
Vue3，springboot，element-ui使用技巧，...详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。
vue3.0 后台管理系统 框架搭建.zip
01-02
Vue3，springboot，element-ui使用技巧，...详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
本项目基于 Vue.js 3.0 框架构建，采用了 Vue CLI 和 Vite 两种构建工具，结合了 Ant Design Vue 2.0 UI 库，并且利用了 TypeScript 4.0 的强类型特性，打造了一个功能完善的后台管理系统模板。下面将详细介绍这个...
基于Vue3 Vuetify的中后台管理模板
04-03
基于Vue3 Vuetify的中后台管理模板 - Middle and backend template based on Vue3 Vuetify.zip
vue3-vuetify-template:vue3，vuetify-next，模板
03-25
vue3-vuetify模板 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
npm具体安装教程
weixin_34244102的博客
12-12 2390
一、使用之前，我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装） 开始...
在vue-cli3项目中使用vuetify
一键写代码的博客
12-19 2142
1、先按cli3.0初始化一个项目 vue create 项目名 创建完成后。 2、vue add vuetify这个命令来添加vuetify这个插件。 这个时候，引入vuetify相关的东西这些全部都已经完成了，不用再安装相关的包。 直接npm run serve运行就可以看到带有vuetify样式的效果页面了。 ...
vue3+vuetify安装
hataksumo的博客
04-05 4150
vue3+vuetify的安装一、安装nodejs+npn二、使用vite创建工程1、创建工程2、安装vue-cli3、添加vuetify库4、安装vue-router5、启动6、打开测试页面 一、安装nodejs+npn 去官网下载nodejs，并配置好环境变量（把安装包bin目录配到path里） 以管理员身份运行power shell，键入node -v，npm -v能看到版本显示即可。 二、使用vite创建工程 1、创建工程 npm create vite@latest 而后根据命令行提示创建工程
vue3引入elementui和vuetify一块使用
qq_25055051的博客
03-09 691
vue3引入elementui和vuetify一块使用
vue3使用vuetify开发嵌套表格
atanming1的博客
05-16 282
【代码】vue3使用vuetify开发嵌套表格。
Vue3安装Vuetify和使用Fontawesome6
lsy1162526799的博客
04-14 2067
vue3需要使用3版本的vuetify "vuetify": "^3.0.0-beta.0", 首先项目里需要有fontawesome，提示：css和webfonts文件夹即可 src下新建plugins文件夹，命名例如vuetify.js import '@/assets/css/fontawesome6/css/all.min.css' import 'vuetify/lib/styles/main.sass' import { createVuetify } from 'vuetify' impor
vue vuetify 合并表头
10-24
在Vue和Vuetify中，合并表头是通过使用表头的属性`colspan`来实现的。`colspan`属性允许将几个列合并成一个单独的列。以下是简单的步骤来合并表头： 1. 首先，确保你已经在Vue项目中使用了Vuetify库。 2. 在你的HTML文件或Vue组件中，创建一个`v-data-table`元素，并为其设置一个数据源。 3. 在`v-data-table`元素中，使用`v-data-table`的`headers`属性来定义表头。每个表头都需要一个`text`属性和一个`value`属性。 4. 在需要合并表头的列上，添加一个`colspan`属性，设置为要合并的列数。例如，如果你要合并两列，将`colspan`属性设置为2。 下面是一个示例代码片段： ```vue <template> <div> <v-data-table :headers="headers" :items="items" ></v-data-table> </div> </template> <script> export default { data() { return { headers: [ { text: '姓名', value: 'name', }, { text: '年龄', value: 'age', }, { text: '性别', value: 'gender', colspan: 2, // 合并两列 }, ], items: [ { name: '张三', age: 25, gender: '男', }, { name: '李四', age: 30, gender: '女', }, ], }; }, }; </script> ``` 在上述示例中，表头的第三列"性别"使用了`colspan`属性来合并两列。 通过以上步骤，你就可以在Vue和Vuetify中实现表头的合并了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值