Vue3+TypeScript+Vite 后台管理项目

news2024/11/25 8:20:33

一、前言

我将使用当前最新版本完成项目搭建，我会尽量将每个操作细节记录下来，并且解释原因，标明依据出处，这样即使大家脱离当前这个版本，跟着文章依然可以完成项目搭建，这篇文章也依然有他的价值，真正的有所收获。开始之前希望大家不要有任何心理包袱，跟着我的步骤往下走就行，哪怕你完全 0 基础也不影响，这篇文章以上手为主，不会讲太多原理性的东西，旨在先上手，后深入。最后，如有不足的地方欢迎指出，共同进步。

二、Vue 项目创建

2.1 官方文档

任何学习官方文档最为权威，我们打开官方文档地址：https://cn.vuejs.org/ 。有兴趣可以自己先大致浏览一遍，不想看也无所谓😄。

2.2 快速上手

这里需要本地安装好 Node.js ，这个下载好安装包，傻瓜式安装，一直点下一步就好了。官网地址：https://nodejs.org/zh-cn。

然后建议大家和我一样使用 vscode 进行开发，毕竟插件比较丰富，也很方便。

接下来开始创建项目了，确定好我们项目放置的位置，以我为例，我打算放在 D:\AA 下，打开路径在地址栏输入 cmd -> 回车，打开命令窗口

在窗口输入以下命令，基于官方脚手架完成项目创建，你会看到一些可选项，根据自己需要选择即可，不确定可以先选 no，后面需要再引入也是 ok 的。

npm create vue@latest

创建完成后 code ./itshare-vue，你的要换成自己项目的路径，这样可以快捷使用 vscode 打开项目

可以看到，通过脚手架为我们生成了一个基础的项目，这个时候可以把命令行窗口关掉了，后面我们所有开发工作都在 vscode 中完成。

打开 vscode 的命令行窗口

依次执行以下命令，安装依赖并启动项目

npm install
npm run dev

看到以下显示，则项目启动成功

可以看到截至在写这篇文章的时候，官方脚手架使用的 vite 版本为 5.5.10 ，查看 package.json, vue 版本为3.5.12

{
  "name": "itshare-vue",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "vue": "^3.5.12"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.17.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/eslint-config-prettier": "^10.0.0",
    "@vue/eslint-config-typescript": "^14.1.1",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^9.13.0",
    "eslint-plugin-vue": "^9.29.0",
    "npm-run-all2": "^7.0.1",
    "prettier": "^3.3.3",
    "typescript": "~5.6.0",
    "vite": "^5.4.10",
    "vue-tsc": "^2.1.6"
  }
}

浏览器打开项目地址，可正常访问默认的欢迎页面

这个时候一个 vue3 + ts + vite 的工程项目就创建完成了，接下来我们需要一步步完善他。

三、开发前准备

3.1 插件安装

Vue - Official 提供了一些 vue 相关的支持，其实就是以前的 Volar

3.2 Git代码管理

这里的前提条件是本地已经正确安装好了 git 工具，之前没安装也没事，官网下载，一直下一步就行。https://git-scm.com/

为了方便管理，以及版本信息记录。将代码托管在第三方仓库中，github 国内访问不太稳定，所以我选择放在 gitee 上。

3.2.1 注册账号，创建仓库

这个比较简单，不做赘述了。https://gitee.com/

3.2.2 将本地仓库同步到远程仓库

  • 在当前项目目录下打开 git bash 操作窗口
  • 按顺序执行以下命令
git init 
git add .
git commit -m "项目初始化"
git remote add origin xxx这里换成你的代码仓库地址xxxxx
git push -u origin "master"
  • 查看码云提交记录，是否提交成功

四、整合 ElementPlus

Vue3 的组件库有很多，大家也不要在这上面纠结，选热门的肯定没什么大问题，社区活跃，碰到问题也能及时解决。官方文档地址 https://element-plus.org/，最好以官方文档为主，省事直接跟着我来就行。

4.1 CSS 预处理器安装

主流的一些预处理器，像 less、sass 其实都差不多，由于 element-plus 使用的是 sass，所以我也选择 sass( •̀ ω •́ )✧。 详细了解参考官方地址:https://www.sass.hk/

npm install sass --save-dev

这里要注意，将 sass 安装在开发环境依赖中，减小生成环境包的大小

在 2.8.5 及以后的版本, Sass 的最低支持版本为1.79.0

如果您的终端提示 legacy JS API Deprecation Warning 您可以配置以下代码在 vite.config.ts 中.

css: {
  preprocessorOptions: {
    scss: { api: 'modern-compiler' },
  }
}

4.2 整合 ElementPlus

建议是按照官方文档来，文档很详细。https://element-plus.org/zh-CN/guide/installation.html

4.2.1 按照依赖

npm install element-plus --save

4.2.2 快速使用

官方推荐使用 自动导入 ,其他方式参考官网 https://element-plus.org/zh-CN/guide/quickstart.html

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

4.2.3 最后注意一下 Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

4.2.4 测试一下

<!-- 在App.vue中测试  -->
<el-button type="primary" size="default" >登录</el-button>

正常显示，表示整合成功

五、整合 Tailwindcss

tailwindcss 是一个 css 框架，集成了很多封装好的 css 样式，我们只需要在标签上定义约定好的类名，就可以给元素添加相应的样式，十分方便。当然你也可以不使用，全部手撸。 官方文档： https://www.tailwindcss.cn

5.1 快速整合

参考官方：https://www.tailwindcss.cn/docs/guides/vite#vue

  • 安装依赖并初始化配置
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init
  • 修改 tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • 添加样式指令集，新建 ./src/assets/tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
  • 在 main.css 里引入，这里我改成了 main.scss，如果你和我一样，注意改一下 main.ts 里引入路径也要一起修改
@import './tailwind.scss';
  • 在App.vue中测试一下
<h1 class="text-3xl font-bold underline">Hello world!</h1>

5.2 解决指令提醒问题

这里警告是因为，vscode 检测不到定义规则类型，在 .vscode目录下，找到 settings.json, 没有就新建一个。

{
    ...
   // 添加以下内容
  "scss.lint.unknownAtRules": "ignore"
}

六、整合 Axios

Axio 是一个基于 promise 的网络请求库，进一步了解参考官方文档：axios-http.com/zh/

6.1 引入依赖

npm install axios

6.2 封装请求工具类

新建目录 src/utils，新建文件 request.ts

import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
  timeout: 5000
})
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 请求成功做点什么
    return config
  },
  function (error) {
    // 对请求错误做点什么
    return Promise.reject(error)
  }
)
// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应成功做点什么
    return response
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

注意：这并不是最终版本，目前只是快速引入，后续根据项目情况，做出调整 ，使用起来更符合开发习惯。

七、总结

到这里，基本的项目搭建就完成了，后面会详细介绍具体的开发流程。这里暂定顺序为，登录页面开发、整合 Pinia、登录鉴权、动态路由、面包屑和标签导航、svg 图标的使用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2229497.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

知识竞赛活动用什么样的话筒或麦克风好呢

知识竞赛活动用什么样的话筒或麦克风好呢

搞知识竞赛活动&#xff0c;话筒一般是需要的&#xff0c;从选手到主持人、评委甚至有些观众&#xff0c;每场活动用量不少。 市场上的麦克风五花八门&#xff0c;从价格低廉的入门款到高端专业设备&#xff0c;不胜枚举。这让很多用户在选择时感到无从下手。如何在众多产品中…
阅读更多...
面向对象编程中类与类之间的关系(二)

面向对象编程中类与类之间的关系(二)

目录 1.引言 2.泛化&#xff08;继承&#xff09;关系 3.实现关系 4.聚合关系 5.组合关系 6.依赖关系 7.关联关系 7.1. 单向关联 7.2. 双向关联 7.3.自关联 8.总结 1.引言 在面向对象设计模式中&#xff0c;类与类之间主要有6种关系&#xff0c;他们分别是&#xff…
阅读更多...
贪心算法入门（一）

贪心算法入门（一）

1.什么是贪心算法&#xff1f; 贪心算法是一种解决问题的策略&#xff0c;它将复杂的问题分解为若干个步骤&#xff0c;并在每一步都选择当前最优的解决方案&#xff0c;最终希望能得到全局最优解。这种策略的核心在于“最优”二字&#xff0c;意味着我们追求的是以最少的时间和…
阅读更多...
MATLAB发票识别系统

MATLAB发票识别系统

课题介绍 该课题为基于MATLAB的发票识别系统。主要识别发票的编号。可定做发票的日期&#xff0c;金额等字段的识别。通过输入图片&#xff0c;校正&#xff0c;定位目标区域&#xff0c;分割&#xff0c;字符分割&#xff0c;模板匹配识别&#xff0c;得出结果。整个设计包含…
阅读更多...
spark==windows启动spark集群

spark==windows启动spark集群

下载hadoop3.0.0 https://archive.apache.org/dist/hadoop/core/hadoop-3.0.0/ 下载spark3.5.3 Index of /dist/spark/spark-3.5.0 添加环境变量 HADOOP_HOME SPARK_HOME PATH中添加%HADOOP_HOME%\bin,%HADOOP_HOME%\sbin, %SPARK_HOME%\bin,%SPARK_HOME%\sbin, 启动mast…
阅读更多...
（实战）WebApi第10讲：Swagger配置、RESTful与路由重载

（实战）WebApi第10讲：Swagger配置、RESTful与路由重载

一、Swagger配置 1、导入SwashBuckle.AspNetCore包 2、在.NET Core 5框架里的startup.cs文件里配置swagger 3、在.NET Core 6框架里的Program.cs文件里配置swagger 二、RESTful风格&#xff1a;路由重载&#xff0c;HttpGet()括号中加参数 &#xff08;1&#xff09;原则&…
阅读更多...
【春秋云镜】CVE-2023-27179

【春秋云镜】CVE-2023-27179

CVE-2023-27179 CVE-2023-27179 是一个影响 Apache Doris 的漏洞。Apache Doris 是一款用于交互式分析的高性能数据库&#xff0c;特别适用于处理大规模的结构化数据。该漏洞属于权限提升漏洞&#xff0c;允许未授权用户以管理员身份执行敏感操作。 具体细节 漏洞类型&#…
阅读更多...
chrome编辑替换js文件的图文教程

chrome编辑替换js文件的图文教程

一、找到要修改替换的js文件 二、将文件保存到本地 三、在本地新建一个文件 路径最好跟你要替换的文件的路径保持一致&#xff0c; 四、选中js文件替换 回到原文件右击选择保存并覆盖 点击完保存并覆盖之后回到替换的新文件中&#xff0c;在自动生成的webpack文件中对文件进…
阅读更多...
​CSS之三

​CSS之三

CSS三大特性 CSS 有三个非常重要的三个特性:层圣性、继承性、优先级 层叠性 相同选择器给设置相同的样式&#xff0c;此时一个样式就会覆盖(层曼)另一个冲突的样式。层曼性主要解决样式冲突的问题 层叠性原则: - 样式冲突&#xff0c;遵循的原则是就近原则&#xff0c;哪个…
阅读更多...
Generating /run/initramfs/rdsosreport.txt

Generating /run/initramfs/rdsosreport.txt

Linux中遇到Generating /run/initramfs/rdsosreport.txt 第一步&#xff1a;首先输入 ls /dev/mapper 第二步&#xff1a;输入 xfs_repair /dev/mapper/centos-root -L 第三步&#xff1a;重启reboot 不说原因了&#xff0c;直接上解决方式&#xff1a; 第一步&#xff1a;首先…
阅读更多...
Spark,Anconda在虚拟机实现本地模式部署

Spark,Anconda在虚拟机实现本地模式部署

如果想要了解模式的概念部分&#xff0c;以及作用请看&#xff1a; Spark学习-CSDN博客 一.在虚拟机安装spark cd /opt/modules 把Anconda和Spark安装包拖拽进去&#xff1a; 解压&#xff1a; tar -zxf spark-3.1.2-bin-hadoop3.2.tgz -C /opt/installs 重命名&#x…
阅读更多...
云原生开源开发者沙龙丨AI 应用工程化专场杭州站邀您参会

云原生开源开发者沙龙丨AI 应用工程化专场杭州站邀您参会

云原生开源开发者沙龙 AI 原生应用架构专场&#xff0c;邀您一起交流&#xff0c;探索 AI 原生应用的工程化落地&#xff01; 活动简介 AI 驱动的应用程序开发、部署和运维&#xff0c;给应用带来了新的生命力和想象空间。但大部分开发者对 AI 应用的编程框架、可观测体系、网…
阅读更多...
OpenCV基本操作（python开发）——（5）轮廓处理

OpenCV基本操作（python开发）——（5）轮廓处理

OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;1&#xff09; 读取图像、保存图像 OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;2&#xff09;图像色彩操作 OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;3&…
阅读更多...
常用的查询mysql配置命令

常用的查询mysql配置命令

1. 查看数据库版本信息 SELECT VERSION();2. 查看数据库所有变量和值 SHOW VARIABLES3. 查询数据库是否区分大小写 SHOW VARIABLES LIKE lower_case_table_names;查询数据库是否支持大小写lower_case_table_names 被设置为 1&#xff0c;即表名不区分大小写。如果值为 1&…
阅读更多...
企业数据泄露安全演练（分享）

企业数据泄露安全演练（分享）

该文章主要分享作者在XXX企业内部做的一次【数据泄露安全演练】&#xff0c;涉及演练背景、目的、演练流程、剧本设定、预期行为、结果等等。 以下是完整的演练方案&#xff0c;有不足的地方希望大家指出&#xff01;&#xff01; 需要原版方案电子版的可以联系作者获取。 演练…
阅读更多...
品牌控价的执行技巧

品牌控价的执行技巧

在当今竞争激烈的商业世界中&#xff0c;品牌的发展犹如在波涛汹涌的大海中航行&#xff0c;而价格管控&#xff0c;无疑是那保驾护航的关键舵手&#xff0c;简称控价。这一举措&#xff0c;绝非仅仅着眼于品牌自身的狭隘利益&#xff0c;实则肩负着更为深远的使命&#xff0c;…
阅读更多...
一文详解精细化工行业持续增长的策略与路径解析

一文详解精细化工行业持续增长的策略与路径解析

随着全球经济的快速发展和科技的不断进步&#xff0c;精细化工行业正面临着前所未有的挑战和机遇。在这个过程中&#xff0c;数字化转型已成为推动行业持续增长的关键因素。精细化工行业&#xff0c;作为化学工业的一个重要分支&#xff0c;其产品广泛应用于医药、农药、涂料、…
阅读更多...
akshare股票涨跌幅自定义范围查询:A股、港股、美股

akshare股票涨跌幅自定义范围查询:A股、港股、美股

参看&#xff1a;https://stock.hexun.com/2024-10-31/215251914.html 涨幅计算公式&#xff1a;&#xff08;当前价格 - 上一个交易日收盘价&#xff09; 上一个交易日收盘价 100% 。 跌幅计算公式&#xff1a;&#xff08;上一个交易日收盘价 - 当前价格&#xff09; 上一个…
阅读更多...
基于Pycharm和Django模型技术的数据迁移

基于Pycharm和Django模型技术的数据迁移

1.配置数据库 在trip_server/settings.py中修改配置&#xff1a; 其格式可访问官网&#xff1a;Settings | Django documentation | Django 1.1 配置数据库 文件地址&#xff1a;trip_server/settings.py 配置前需要创建&#xff08;NaviCat&#xff09;个人数据库 "…
阅读更多...
linux命令行的艺术

linux命令行的艺术

文章目录 前言基础日常使用文件及数据处理系统调试单行脚本冷门但有用仅限 OS X 系统仅限 Windows 系统在 Windows 下获取 Unix 工具实用 Windows 命令行工具Cygwin 技巧 更多资源免责声明 熟练使用命令行是一种常常被忽视&#xff0c;或被认为难以掌握的技能&#xff0c;但实际…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023