前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)

news2024/10/5 16:21:18

一、文章引导

文章名称
屏幕适配
默认清除配置
vite.config.ts配置
项目配置完善
创建项目

二、博主简介

🌏博客首页： 水香木鱼
📌专栏收录：后台管理系统【vue2+vue3+vite+ts】
📑文章摘要：vue3 vite typescript 适配 vite.config.ts
💌木鱼寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

三、文章内容

兼容性注意
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

(一)、创建项目

①、创建方式

使用npm:

npm create vite@latest

使用Yarn:

yarn create vite

使用 PNPM:

pnpm create vite

②、创建项目vite-project

如下注意项：按↑ ↓ 方向键、回车键 进行选择确认操作。【根据项目需求，选择对应的签到框架即可】

默认项目名，回车键即可。

在这里插入图片描述

③、选择前端框架

本篇文章以vue为例子

在这里插入图片描述

④、选择业务语言

逻辑处理语言：javascript 、typescript【本篇文章以typescript为例】

根据需求选择合适的业务处理语言，回车键 确认选择 👇

在这里插入图片描述

⑤、项目创建完成

在这里插入图片描述

⑥、进入项目文件夹

cd vite-project

在这里插入图片描述

⑦、下载依赖

npm install

在这里插入图片描述

⑧、启动项目

npm run dev

在这里插入图片描述

⑨、浏览器预览项目

在这里插入图片描述

(二)、项目配置完善

①、增加目录

在这里插入图片描述

  • api 接口配置目录
  • layout 项目结构-布局文件夹
  • router 路由-文件夹
  • store 存放vuex-文件夹
  • styles 全局样式-文件夹
  • utils 全局工具函数-文件夹
  • views 放置页面-文件夹

②、创建router目录前，需要下载路由依赖

使用npm：

npm install vue-router@4

使用Yarn：

yarn add vue-router@4

创建router index.ts 文件

//index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/home.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(), // 哈希模式
  routes,
});

export default router;

路由有两种模式： 👇

  • createWebHashHistory 哈希模式
  • createWebHistory 历史模式

③、创建store目录前，需要下载路由依赖

npm install vuex@next --save

创建store index.ts 文件

//index.ts
import { createStore } from "vuex";
import state from "./state";
import mutations from "./mutations";
import actions from "./actions";
const store = createStore({
  state,
  mutations,
  actions,
  modules: {},
});
export default store;

在这里插入图片描述

创建state.ts、actions.ts、mutations.ts 文件

//state.ts
const state= {};
export default state;

//actions.ts
const actions= {};
export default actions;

//mutations.ts
const mutations= {};
export default mutations;

④、安装样式编译器

使用less：

npm install less less-loader -D

使用sass：

npm install sass node-sass sass-loader -D

使用scss：

npm install scss node-scss scss-loader -D

安装好之后在<style lang="less" scoped></style>标签上面直接就可以用

<style lang="less" scoped></style>

⑤、main.ts

//main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";//配置路由
import store from "./store";//配置vuex
const app = createApp(App);

app.use(router).use(store).mount("#app");

(三)、vite.config.ts配置

vite.config.ts完整代码，在👇

①、如何让vite项目启动时自动打开浏览器？

server:{
    open:true, //项目启动时自动打开浏览器
  },

②、vite启动默认端口为8080？如何更改默认端口？

server:{
    port:8080, //自定义端口
  },

③、vite如何设置热加载？

server:{
    hmr:true, //开启热加载
  },

④、vite中如何配置别名路径？

import { resolve } from 'path';
export default ({mode})=>{
return defineConfig({
  resolve:{
      alias:{
        "@":resolve(__dirname,"src"),
        "@c":resolve(__dirname,"src/components"),
      }
  },
 }
}

⑤、vite中如何设置便捷图片路径引用？

resolve:{
      alias:{
      "/images":"src/assets/images/"//这里不能通过path模块解析路径的写法
      }
  },

⑥、vite打包配置

 build: {
    target: "modules", //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
    outDir: "dist", // 构建得包名  默认：dist
    assetsDir: "assets", // 静态资源得存放路径文件名  assets
    sourcemap: false, //构建后是否生成 source map 文件
    minify: "esbuild", // 项目压缩 :boolean | 'terser' | 'esbuild'
    chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
    cssTarget: "chrome61", //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
  },

⑦、vite如何设置开启生产打包分析文件大小功能？类似webpack-bundle-analyzer?

安装依赖： 
npm i rollup-plugin-visualizer --save

设置状态为true 生效，不分析时，可自行关闭。

plugins: [
    visualizer({
      open: false, //注意这里要设置为true，否则无效
      gzipSize: false,
      brotliSize: false,
    }),
  ], // 注册插件

⑧、vite全局样式配置

  // 样式全局配置
  css: {
    // 全局变量+全局引入less+配置主题色
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 全局变量使用：@primary-color
        modifyVars: {
          "primary-color": "#1890ff", // 全局主色
          "link-color": " #1890ff", // 链接色
          "success-color": " #52c41a", // 成功色
          "warning-color": " #faad14", // 警告色
          "error-color": " #ff4d4f", // 错误色
          "font-size-base": " 14px", // 主字号
          /*light浅色背景下*/
          "light-headline": "#262626", // 标题色
          "light-text": "#595959", // 主要文字
          "light-text-secondary": "#8c8c8c", // 次要文字
          "light-disabled": "#bfbfbf", // 禁用
          "light-border": " #d9d9d9", // 边框色
          "light-cut-off-rule": " #f0f0f0", // 分割线
          "light-bg": " #f5f5f5", // 背景
          "light-table-headline": " #fafafa", // 表格标题
          /*dark深色背景下*/
          "dark-headline": "#262626", // 标题色
          "dark-text": "#595959", // 主要文字
          "dark-text-secondary": "#8c8c8c", // 次要文字
          "dark-disabled": "#bfbfbf", // 禁用
          "dark-border": " #d9d9d9", // 边框色
          "dark-cut-off-rule": " #f0f0f0", // 分割线
          "dark-bg": " #f5f5f5", // 背景
          "dark-table-headline": " #fafafa", // 表格标题
          /*边框配置*/
          "border-radius-base": " 2px", // 组件/浮层圆角
          "box-shadow-base": " 0 2px 8px rgba(0, 0, 0, 0.15)", // 浮层阴影
        },
      },
    },
  },

⑧、完整代码

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path"; //配置别名路径
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()], // 注册插件
  server: {
    // open: true,//启动项目后自动打开浏览器
    port: 8080, //端口配置
    hmr: true, //开启热加载
  },
  resolve: {
    //设置便捷图片路径引用
    alias: {
      "/images": "src/assets/images/", //这里不能通过path模块解析路径的写法
      "@": resolve(__dirname, "src"),//配置别名路径
      "@c": resolve(__dirname, "src/components"),//配置别名路径
    },
  },
  //项目构建配置
  build: {
    target: "modules", //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
    outDir: "dist", // 构建得包名  默认：dist
    assetsDir: "assets", // 静态资源得存放路径文件名  assets
    sourcemap: false, //构建后是否生成 source map 文件
    minify: "esbuild", // 项目压缩 :boolean | 'terser' | 'esbuild'
    chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
    cssTarget: "chrome61", //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
  },
  // 样式全局配置
  css: {
    // 全局变量+全局引入less+配置主题色
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 全局变量使用：@primary-color
        modifyVars: {
          "primary-color": "#1890ff", // 全局主色
          "link-color": " #1890ff", // 链接色
          "success-color": " #52c41a", // 成功色
          "warning-color": " #faad14", // 警告色
          "error-color": " #ff4d4f", // 错误色
          "font-size-base": " 14px", // 主字号
          /*light浅色背景下*/
          "light-headline": "#262626", // 标题色
          "light-text": "#595959", // 主要文字
          "light-text-secondary": "#8c8c8c", // 次要文字
          "light-disabled": "#bfbfbf", // 禁用
          "light-border": " #d9d9d9", // 边框色
          "light-cut-off-rule": " #f0f0f0", // 分割线
          "light-bg": " #f5f5f5", // 背景
          "light-table-headline": " #fafafa", // 表格标题
          /*dark深色背景下*/
          "dark-headline": "#262626", // 标题色
          "dark-text": "#595959", // 主要文字
          "dark-text-secondary": "#8c8c8c", // 次要文字
          "dark-disabled": "#bfbfbf", // 禁用
          "dark-border": " #d9d9d9", // 边框色
          "dark-cut-off-rule": " #f0f0f0", // 分割线
          "dark-bg": " #f5f5f5", // 背景
          "dark-table-headline": " #fafafa", // 表格标题
          /*边框配置*/
          "border-radius-base": " 2px", // 组件/浮层圆角
          "box-shadow-base": " 0 2px 8px rgba(0, 0, 0, 0.15)", // 浮层阴影
        },
      },
    },
  },
});

(四)、默认清除配置

请移步 👉前端清除项目默认样式

(五)、vue3+ts+vite屏幕适配

  • 应用场景：不固定宽高比的Web应用，适用于绝大部分业务场景
  • 基于rem的适配方案

①、安装依赖

  • postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
  • autoprefixer 浏览器前缀处理插件
  • amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport
npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

②、根目录创建 postcss.config.js 文件

//postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
      propList: ["*", "!border"], // 除 border 外所有px 转 rem
      selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
    },
  },
};

③、main.ts/js 文件中导入依赖

可伸缩布局方案

import "amfe-flexible/index.js";

④、项目重新启动

四、程序语录

程序员的麻烦在于,你无法弄清他在捣腾什么,当你最终弄明白时,也许已经晚了!

五、精彩推荐

💡前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】
💡vue实现导入表格数据【纯前端实现】
💡Vue实现独立修改单个页面的背景色，进入不同的页面设置不同的背景颜色【两种方式】
💡vue实现防抖函数、节流函数，全局使用【输入框、按钮】
💡vue实现禁止浏览器网页缩放【方法一和方法二可同时设置】

本篇博客文章模板唯一版权归属©水香木鱼

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

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

相关文章

MySQL (五)------多表查询练习

MySQL (五)------多表查询练习

我们在开发中&#xff0c;根据不同的业务需求往往需要通过2张及以上的表中去查询需要的数据。所以我们有必要学习2张及以上的表的查询。其实不管是几张表的查询&#xff0c;都是有规律可循的。 1.1 准备数据 -- 部门表 CREATE TABLE dept (id INT PRIMARY KEY PRIMARY KEY, --…
阅读更多...
Databend 开源周报 第 75 期

Databend 开源周报 第 75 期

Databend 是一款强大的云数仓。专为弹性和高效设计。自由且开源。即刻体验云服务&#xff1a;https://app.databend.com 。 What’s New 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 Features & Improvements ✨ Format 实现 JSON 输出格式 …
阅读更多...
C++模板进阶（非类型模板参数 + 模板特化）

C++模板进阶（非类型模板参数 + 模板特化）

我们另一篇模板初阶介绍链接&#xff1a;http://t.csdn.cn/Ox8Dm 目录 一、非类型模板参数 1.1 非类型模板参数概念 1.2 模板类型的静态数组 二、模板特化 2.1 函数模板特化 2.2 类模板特化 2.2.1 类模板全特化 2.2.2 类模板半特化&#xff08;偏特化&#xff09; 2.2.…
阅读更多...
Facebook运营主页需要注意的几个问题

Facebook运营主页需要注意的几个问题

Facebook运营主页需要注意的几个问题主页的权重和流量都是决定流量的关键因素&#xff0c;也就是我们常说的引流&#xff0c;而流量又是需要转化的&#xff0c;因为只有用户认可你&#xff0c;才会有更多的点击、收藏、分享和主页的链接。在社交媒体时代要想更好地推广品牌产品…
阅读更多...
openssl 编译动态库 win11 vs2022

openssl 编译动态库 win11 vs2022

官网 openssl官网 安装perl activestate_perl_官网 需要下载cli_installer 下载后双击下载好的exe 一般就是下面这个执行文件 state-remote-installer.exe 需要按照提示在powershell中执行网页提示的命令。 安装nasm nasm官网 以管理员方式运行安装 并加入环境变量中…
阅读更多...
《MySQL高级篇》十、数据库其他调优策略

《MySQL高级篇》十、数据库其他调优策略

文章目录1.数据库调优的措施1.1调优的目标1.2 如何定位调优问题1.3 调优的维度和步骤第1步&#xff1a;选择适合的DBMS第2步:优化表设计第3步:优化逻辑查询第4步:优化物理查询第5步:使用Redis或 Memcached 作为缓存第6步&#xff1a;库级优化2. 优化MySQL服务器2.1 优化服务器硬…
阅读更多...
定时任务、cron表达式、springBoot整合定时任务和异步任务-59

定时任务、cron表达式、springBoot整合定时任务和异步任务-59

一&#xff1a;定时任务 1.1 官网地址 http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/crontrigger.html 1.2 cron表达式 Cron表达式是一个字符串&#xff0c;字符串以5或6个空格隔开&#xff0c;分为6或7个域&#xff0c;每一个域代表一个含义&am…
阅读更多...
【Nacos】一文为你揭露它的强大

【Nacos】一文为你揭露它的强大

注&#xff1a;为什么要使用nacos作为注册中心呢&#xff1f;这样的好处在哪呢&#xff1f;一、 什么是nacosNacos 是 Dynamic Naming and Configuration Service 的首字母简称&#xff1b;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。Nacos 致力于帮助您…
阅读更多...
java 方法看这一篇文章就够了

java 方法看这一篇文章就够了

第一章 方法概念 1实现特定功能的一段代码,可反复被调用计算机 — 模拟现实 — 通过软件控制硬件 比如豆浆机 — 里面的微控制器 — 控制豆浆机 右图面板上有很多种模式 每一种模式对应不同的搅拌次数、搅拌时间、烧水温度等… 这些硬件的动作都需要软件的控制 硬件的每一种模式…
阅读更多...
el-table使用sortablejs实现行、列拖拽

el-table使用sortablejs实现行、列拖拽

效果图 代码如下 <script src"//unpkg.com/sortablejs1.7.0/Sortable.js"></script> <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel"stylesheet" href"//unpkg.com/eleme…
阅读更多...
文件或目录损坏且无法读取？正确恢复文件的4个方法

文件或目录损坏且无法读取？正确恢复文件的4个方法

你有没有遇到过“文件损坏已无法读取”的提示窗口&#xff1f;相信使用电脑的你&#xff0c;或多或少都会遇到过&#xff0c;尤其是我们使用硬盘或者移动硬盘的时候。 遇到这种问题&#xff0c;我们第一时间不是按照系统提示去删除或者格式化&#xff0c;而是要寻找合适的方法…
阅读更多...
DES算法笔记

DES算法笔记

文章目录DES简介FeistelDES算法流程EncipheringKey ScheduleDecipheringThe Cipher Function f(R, K)Triple DES算法OpenSSL接口S-box实现参考资料DES简介 发布文档&#xff1a;FIPS 46-3, 1977 block size: 8 bytes.Key Size: 8 bytes 64 bits, 原本设计每隔7 bits保留一个…
阅读更多...
关于string boot项目实训课（准备工作）

关于string boot项目实训课（准备工作）

一、页面–web页面–java代码之间的逻辑关系 首先在java文件夹下创建一个java类 Controller//类上面要加入注解 public class TestController {GetMapping("login")//对应web请求--localhost:9991/Login//类方法&#xff0c;用于处理逻辑public String login(Strin…
阅读更多...
实时Windows AD用户帐户锁定分析器工具

实时Windows AD用户帐户锁定分析器工具

实时帐户锁定工具提供有关域帐户锁定原因的实时报表。本机Windows Active Directory帐户锁定策略是阻止连续、时限性、寻求登录的密码猜测尝试的一种实用方法&#xff0c;这会由于使用错误的密码而导致帐户锁定。帐户锁定的其他原因可能包括&#xff1a;由于采用严格的密码设置…
阅读更多...
【项目】 改造原前端ViewUI框架，使其支持ElementUI 与 Avue

【项目】 改造原前端ViewUI框架，使其支持ElementUI 与 Avue

一、背景说明 因为原来前端的同事习惯用&#xff0c;ViewUI框架&#xff0c;于是基线版本的项目&#xff0c;都是使用的ViewUI框架搭建的。 但是&#xff0c;这个ViewUI的表格&#xff0c;是引用的第三方的vux的框架&#xff0c;在网上很少人使用&#xff0c;所以遇到问题&…
阅读更多...
如果为产业互联网时代的发展寻找一个注脚的话，新产业无疑是一个最主要的特征

如果为产业互联网时代的发展寻找一个注脚的话，新产业无疑是一个最主要的特征

如果为产业互联网时代的发展寻找一个注脚的话&#xff0c;新产业无疑是一个最主要的特征。在这个时代&#xff0c;诸多原本看似无法改变的产业有了改变的可能性&#xff0c;诸多看似无法破解的痛点和难题有了新的解决方案。如果一定要找到导致这一蜕变的根本原因的话&#xff0…
阅读更多...
用户积分和积分排行榜功能微服务实现

用户积分和积分排行榜功能微服务实现

文章目录需求分析什么是积分积分的获取为啥需要积分服务数据库表创建 ms-points 积分微服务新增用户积分功能用户积分实体积分控制层积分业务逻辑层数据交互mapper层网关 ms-gateway 服务添加积分微服务路由用户服务中添加用户积分逻辑项目测试积分排行榜TopN(关系型数据库)构造…
阅读更多...
記錄centos8 升級Python3.6到Python3.9以及可能遇到的問題

記錄centos8 升級Python3.6到Python3.9以及可能遇到的問題

目录下载Python3.9.9可能出現的問題及解決方案安裝python3.9可能出現的問題及解決方案建立Python3和pip3的软鏈接:查看Python3和Pip3是否正确的被安装&#xff1a;将/usr/local/python3/bin加入PATHCentos8-默认的Python、python2版本为2.7&#xff0c;python3版本為3.6&#x…
阅读更多...
迭代器深入理解

迭代器深入理解

目录 vector 例子引入 迭代器的价值 通过vector和list 迭代器的差异再次深入理解 vector 例子引入 在学习vector底层erase&#xff0c;碰到迭代器失效的时候我有个疑惑&#xff0c;为什么sgi 版&#xff08;Linux g使用的&#xff09;库里实现的迭代器对于有些迭代器失效情…
阅读更多...
threejs教程(一)

threejs教程(一)

插件安装 npm i three项目引入 这里我随便找的VUE项目练习的 import * as THREE from "three";大致介绍一下threejs的逻辑 一般我们用它是来搭建三维模型的,搭建三维模型就需要的三个要素 场景(scene) 渲染器(renderer) 和相机(camera) 场景简单理解就是唱戏的戏台…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023