Vue3简单体验

前言
安装启动Vue
- 安装Vue初始项目
第三方库引入
Tailwindcss和Naive-UI对比。
代码总结

前言

今天体验一下Vue3，其实我从官方的态度上面来说，我更喜欢Vue3的官方态度。因为我之前用的是.NET，.NET里面很多重要的库，都是微软自己写的，比如ASP.NET，Text.json，Microsoft.Extensions.DependencyInjection。当然也有很多优秀的社区第三方库，比如Newtonsoft.Json,Nlog,Bogus。就是官方下场，把最重要，最核心的代码给你写了，这样就能兜底，保证下限，而且也让社区把精力放在其他细节上的优化，而不是大家一起造轮子。

Vue的官方和微软的官方态度差不多，把最重要，最核心，最常用的部分提供了一个官方的最佳实践。就是告诉你，如果你是新手，你该怎么折腾。保证了下限。其实我们很多人都是写业务的，没能力去研究底层代码。React则是，我只负责核心的部分，路由怎么管理，状态怎么管理，这个最常用的部分让社区去解决。所以大家一起造轮子。然后新人就要一下子就要去了解很多的React生态。

高情商：React生态丰富
低情商：React社区在重复的造轮子，而且各自都不服谁。感觉和C++社区生态差不多

安装启动Vue

Vue 官方文档

Vue官方文档已经默认是Vue3了，Vue2已经在23年底停止维护了。

安装Vue初始项目

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

Install Tailwind CSS with Vue 3 and Vite

安装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库

Navie 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

项目配置