Vue3简单体验
前言
今天体验一下Vue3,其实我从官方的态度上面来说,我更喜欢Vue3的官方态度。因为我之前用的是.NET,.NET里面很多重要的库,都是微软自己写的,比如ASP.NET,Text.json,Microsoft.Extensions.DependencyInjection。当然也有很多优秀的社区第三方库,比如Newtonsoft.Json,Nlog,Bogus。就是官方下场,把最重要,最核心的代码给你写了,这样就能兜底,保证下限,而且也让社区把精力放在其他细节上的优化,而不是大家一起造轮子。
Vue的官方和微软的官方态度差不多,把最重要,最核心,最常用的部分提供了一个官方的最佳实践。就是告诉你,如果你是新手,你该怎么折腾。保证了下限。其实我们很多人都是写业务的,没能力去研究底层代码。React则是,我只负责核心的部分,路由怎么管理,状态怎么管理,这个最常用的部分让社区去解决。所以大家一起造轮子。然后新人就要一下子就要去了解很多的React生态。
高情商:React生态丰富
低情商:React社区在重复的造轮子,而且各自都不服谁。感觉和C++社区生态差不多
安装启动Vue
Vue官方文档已经默认是Vue3了,Vue2已经在23年底停止维护了。
安装Vue初始项目
npm create vue@latest
# 我更推荐将项目名带上
npm create vue@latest 你的项目名
我的配置
# 现在主流都是用TS了,我们选是
√ 是否使用 TypeScript 语法? ... 是
# JSX只是为了支持React的开发者,Vue主要还是template的语法
√ 是否启用 JSX 支持? ... 否
# 路由管理
√ 是否引入 Vue Router 进行单页面应用开发? ... 是
# 官方的状态管理
√ 是否引入 Pinia 用于状态管理? ... 是
# 小项目不需要单元测试
√ 是否引入 Vitest 用于单元测试? ... 否
# 不懂这个测试工具
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
# 启用质量检查
√ 是否引入 ESLint 用于代码质量检测? ... 是
# 启用格式化
√ 是否引入 Prettier 用于代码格式化? ... 是
# 测试一下调试工具
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 是
选择好了之后安装官方的脚手架提示,cd到项目路径,npm install 一下。和Nextjs最大的区别,感觉就是Vue启动速度好快,Nextjs启动要慢很多。
第三方库引入
tailwindcss
安装tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
创建配置文件
npx tailwindcss init -p
在tailwind.config.js添加配置
/** @type {import('tailwindcss').Config} */
export default {
//purge新增配置
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
content: [],
theme: {
extend: {}
},
plugins: []
}
新增./src/index.css
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
在./src/main.js里面引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
在./src/views/AboutView.vue里面添加测试
<template>
<div class="about">
<h1>This is an about page</h1>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
tailwindcss配套引入:daisyui+yesicon
两个比较简单,就直接一起说了
- daisyui:ui框架
- yesicon:icon图标
npm i -D daisyui@latest
npm i @iconify/json @iconify/tailwind -D
在tailwind.config.js进行修改
/** @type {import('tailwindcss').Config} */
//注意,在vite里面,不提供require方法,我们要用Import去导入组件
import daisyui from 'daisyui'
import { addDynamicIconSelectors } from '@iconify/tailwind'
export default {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
content: [],
theme: {
extend: {}
},
plugins: [addDynamicIconSelectors(),daisyui]
}
引入测试
在AboutView.Vue里面添加
<template>
<div class="about">
<h1>This is an about page</h1>
<h1 class="text-2xl font-bold underline">
Hello world!
</h1>
<button class="btn">daisyui Button</button>
<div class="icon-[mdi--ab-testing] size-6"></div>
<span class="icon-[mdi--alert-remove]"></span>
<i class="icon-[material-symbols--arrow-back-ios-new]" />
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
为什么我推荐使用tailwindcss和配套的库
- 跨框架,tailwindcss在Vue和React项目里面都可以使用。Vue2和vue3里面也可以使用。其实原生的html项目也能用,就是不动态打包了,直接安装整个css文件了。
- 生态好,ui统一。icon和css都有很多很好的支持
- 原子化,不用写css。只要学一些常用的class,就能写出很好看的效果。不用再去记css里面的伪类,css选择器了。从底部彻底解决了css冲突的问题,在单页面里面,是通过给css添加code前缀来区分同名的css的。
引入图表,echarts
安装
npm install echarts --save
在
<template>
<div class="about">
<h1>This is an about page</h1>
<h1 class="text-2xl font-bold underline">
Hello world!
</h1>
<button class="btn">daisyui Button</button>
<div class="icon-[mdi--ab-testing] size-6"></div>
<span class="icon-[mdi--alert-remove]"></span>
<i class="icon-[material-symbols--arrow-back-ios-new]" />
<div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
//声明周期函数,自动执行初始化
onMounted(() => {
init();
});
//初始化函数
function init() {
// 基于准备好的dom,初始化echarts实例
let Chart = echarts.init(document.getElementById("myEcharts"));
// 绘制图表
let options = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 渲染图表
Chart.setOption(options);
}
</script>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
实现结果
Naive UI+xicons
网上说,Vue作者都官方推荐的ui库
Naive UI 安装
npm i -D naive-ui
使用
<script>
import { NButton } from 'naive-ui'
</script>
<template>
<div class="about felx flex-col">
<h1>This is an about page</h1>
<h1 class="text-2xl font-bold underline">
Hello world!
</h1>
<button class="btn">daisyui Button</button>
<n-button>naive-ui Button</n-button>
<div class="icon-[mdi--ab-testing] size-6"></div>
<span class="icon-[mdi--alert-remove]"></span>
<i class="icon-[material-symbols--arrow-back-ios-new]" />
<div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
//声明周期函数,自动执行初始化
onMounted(() => {
init();
});
//初始化函数
function init() {
// 基于准备好的dom,初始化echarts实例
let Chart = echarts.init(document.getElementById("myEcharts"));
// 绘制图表
let options = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 渲染图表
Chart.setOption(options);
}
</script>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
xicons安装
npm i -D @vicons/ionicons5
简单用一下
<template>
<div class="about felx flex-col">
<h1>This is an about page</h1>
<h1 class="text-2xl font-bold underline">
Hello world!
</h1>
<button class="btn">daisyui Button</button>
<n-button>naive-ui Button</n-button>
<n-icon size="40">
<game-controller-outline />
</n-icon>
<n-icon size="40" color="green" depth="4" :component="GameControllerOutline" />
<div class="icon-[mdi--ab-testing] size-6"></div>
<span class="icon-[mdi--alert-remove]"></span>
<i class="icon-[material-symbols--arrow-back-ios-new]" />
</div>
</template>
<script setup>
import { NButton, NIcon } from 'naive-ui'
import { GameControllerOutline } from '@vicons/ionicons5'
</script>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
注意,我们安装的是@vicons/ionicons5。只是引入了部分的xicon组件。
Tailwindcss和Naive-UI对比。
我个人还是建议用TailWindCss,因为毕竟是原子化的CSS,没有封装过。添加Naive-UI只是为了方便写一些组件。像消息提示,弹窗这种,还是直接用组件提供的功能好了。UI图还是自己画好,方便定制化。
代码总结
新建项目
npm create vue@latest 你的项目名
引入组件
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
npm i -D daisyui@latest
npm i @iconify/json @iconify/tailwind -D
npm install echarts --save
npm i -D naive-ui
项目配置
在tailwind.config.js添加配置
/** @type {import('tailwindcss').Config} */
//注意,在vite里面,不提供require方法,我们要用Import去导入组件
import daisyui from 'daisyui'
import { addDynamicIconSelectors } from '@iconify/tailwind'
export default {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
content: [],
theme: {
extend: {}
},
plugins: [addDynamicIconSelectors(),daisyui]
}
新增./src/index.css
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
在./src/main.js里面引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!