Vue3+ts项目系列（一）

  • 2023/10/8
  • 阅读时间 1 分钟

近日见闻

  1. 前端UI组件Ant Design大家都在用吗，Ant Design Pro开箱即用框架升级V5了，确实方便。 –antdesign社区

  2. Python3最新版本已经发行到3.12.0（2023年10月7日） –python

  3. k8s更新至1.28.2版本，下一个版本1.28.3预计将在本月18日更新，1.28版本停止维护期在2024年10月28日. –k8s

  4. 苹果的加密受到神秘组织的攻击 --https://www.wired.com

Vue3+vite+ts项目系列（一）

上半年，我们分享的是vue3+js+elment的技术栈的前端开发项目。今天开始，开始自己的开源项目系列分享,前端使用vue3+vite+ts+elmentplus技术栈

1.创建vite项目

Vite是一种新型前端构建工具，能够显著提升前端开发体验。

vite官网：<https://cn.vitejs.dev/guide/>

脚手架create-vite

https://github.com/vitejs/vite/tree/main/packages/create-vite

初始化项目，使用pnpm

      pnpm create vite
      选择vue+ts

      cd xops-fe
      pnpm install
      pnpm run dev

2.安装elmentplus和icon

      http://element-plus.org/zh-CN/guide/installation.html

      pnpm install element-plus

      pnpm install @element-plus/icons-vue

3.安装vuerouter

pnpm install vue-router@latest

4.全局注册组件

  • 引入elment-plus和icon
      // main.ts
      import { createApp } from 'vue'
      import ElementPlus from 'element-plus'
      import 'element-plus/dist/index.css'
      import App from './App.vue'

      const app = createApp(App)

      app.use(ElementPlus)
      app.mount('#app')
  • 引入icon
      import * as ElementPlusIconsVue from '@element-plus/icons-vue'
      const app = createApp(App)
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
      }
  • main.ts挂载
      import { createApp } from 'vue'
      import './style.css'
      import App from './App.vue'
      import { router } from './router'
      const app = createApp(App)
      app.use(router)
      app.mount('#app')

vue cli转移vite构建

如果你想将一个使用 Vue CLI 创建的项目转换为使用 Vite 构建，以下是一些需要注意的事项：

项目结构： Vue CLI 和 Vite 的项目结构有所不同。在迁移之前，你需要了解 Vite 的项目结构并相应地调整你的文件和目录。

配置文件： Vue CLI 使用 vue.config.js 文件进行项目配置，而 Vite 使用 vite.config.js 文件。你需要将现有的配置从 vue.config.js 移动到 vite.config.js 中，并相应地调整配置选项。

依赖项： Vite 使用不同的依赖项来支持其构建过程。你需要将 Vue CLI 的依赖项转换为 Vite 的对应依赖项。确保查阅 Vite 的文档，了解它所需的依赖项和版本要求。

插件和扩展： 如果你在 Vue CLI 项目中使用了一些特定的插件或扩展，你需要查看是否有对应的 Vite 版本或替代方案。有些插件可能不直接兼容 Vite，需要你寻找相应的 Vite 插件或重新实现所需功能。

构建命令和开发服务器： Vue CLI 使用 npm run serve 命令启动开发服务器，而 Vite 使用 npm run dev。确保将现有的命令更新为适用于 Vite 的命令。

CSS 预处理器： 如果你在 Vue CLI 项目中使用了 CSS 预处理器（如 Sass 或 Less），你需要确保 Vite 的配置中包含相应的插件和配置，以便在 Vite 中继续使用它们。

自定义配置和功能： 如果你在 Vue CLI 项目中有自定义配置或功能，例如自定义 webpack 配置或自定义构建脚本，你需要将其转换为适用于 Vite 的对应方式。Vite 提供了一些扩展配置选项和插件系统，可以帮助你实现自定义需求。

10月