devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3+ts+vite自适应项目——搭建项目_vue3+vite+ts搭建项目

作者：知新_RL | 2024-03-27 00:33:51

赞

踩

vue3+vite+ts搭建项目

系列文章目录

第一章：搭建项目

目录

系列文章目录

前言

一、搭建项目

二、安装sass

1.安装依赖

2.测试

三、引入element-plus

1.引入库

1.1 安装

2.2引入插件

2.3测试

2.自定义主题

四、实现自适应

1.安装

2.引入

总结

前言

本项目主要目的是熟练vue3和ts的使用，内容大致包括项目搭建、layout布局、自适应、element-plus引入及自定义主题、vue3等相关操作。感兴趣就继续往下看吧~

一、搭建项目

使用vite快速搭建项目，本项目我使用的是yarn ，当然你们也可以选择用npm 或者 cnpm 都可以。

使用以下命令创建项目：

yarn create vite

会提示你选择框架和ui，这里我选择了vue3 和 typescript

此时你的项目创建完成，你只需要进入项目根目录并下载依赖 ，再运行就行啦~

运行后，截图如下：

 恭喜你，项目已经创建完成啦~

当运行完，你可能会看见以下地址：

 network需要在vite.config.ts里面配置server，如下：

再次运行，截图如下：

二、安装sass

1.安装依赖

因为修改element-plus主题需要i使用scss进行覆盖，所以我们先安装sass。安装sass也需要安装它配套的依赖：如：node-sass sass-loader ，执行以下命令安装：

注意：一定要一条一条的执行，因为有可能webpck 版本和sass不兼容

  1. yarn add node-sass
  2. yarn add sass-loader  
  3. yarn add style-loader
  4. yarn add sass

如果出现以下报错，则表示不兼容，安装webpack指定版本就可以啦：

warning " > sass-loader@13.2.2" has unmet peer dependency "webpack@^5.0.0".

2.测试

我们在根目录下创建styles/public.scss，并写入以下变量：

  1. $main_clolr: red;
  2. $main_bg: blue

这里我们打开app.vue，在style标签上加入lang="scss"，写入以下内容：

  1. <script setup lang="ts">
  2. </script>
  3.  
  4. <template>
  5.   
  6.   <div class="item">你好</div>
  7. </template>
  8.  
  9. <style lang="scss" scoped>
  10. .item{
  11.   background: $main_bg;
  12.   color: $main_clolr;
  13. }
  14. </style>

最后，需要在vite.config.ts里面配置scss，如下：

 代码：

  1.   css: {
  2.     preprocessorOptions: {
  3.       //导入scss全局样式
  4.       scss: {
  5.         additionalData: `@use "./src/styles/public.scss" as *;`,
  6.         // javascriptEnabled: true
  7.       },
  8.     },
  9.   },

此时再运行，可以看见以下页面，则表示引入成功：

三、引入element-plus

vue3对应的ui库是element-plus ，我们接下来就引入它，并且自定义主题。

这里我使用的按需导入，这样可以减少打包体积~

1.引入库

1.1 安装

首先安装element-plus:

yarn add element-plus

再安装按需导入插件：

yarn add  unplugin-vue-components unplugin-auto-import

2.2引入插件

打开vite.config.ts,加入以下代码：

完整代码如下：

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. //element-plus 按需导入
  4. import AutoImport from 'unplugin-auto-import/vite'
  5. import Components from 'unplugin-vue-components/vite'
  6. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  7. // https://vitejs.dev/config/
  8. export default defineConfig({
  9.   plugins:
  10.     [
  11.       vue(),
  12.       //element-plus 按需导入
  13.       AutoImport({
  14.         resolvers: [ElementPlusResolver()],
  15.       }),
  16.       Components({
  17.         resolvers: [ElementPlusResolver()],
  18.       }),
  19.  
  20.     ],
  21.   css: {
  22.     preprocessorOptions: {
  23.       //导入scss全局样式
  24.       scss: {
  25.         additionalData: `@use "./src/styles/public.scss" as *;`,
  26.         // javascriptEnabled: true
  27.       },
  28.     },
  29.   },
  30.   server: {
  31.     host: '0.0.0.0'
  32.   }
  33. })

此时已经引入完成，我们来测试一下~

2.3测试

打开app.vue，引入按钮：

    <el-button type="primary">Primary</el-button>

运行出现按钮则表示成功啦~

2.自定义主题

我们接下来自定义elemnet-plus的主题色，尺寸等~ 首先新建styles/element.scss 用以存放 element样式修改文件，在里面输入以下内容：

  1. @forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': green,
  2.     ),
  3.   ),
  4. );

打开 vite.config.ts 我们需要 修改全局样式路径 和 更改主题样式 ，如下：

 完整代码如下：

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. //element-plus 按需导入
  4. import AutoImport from 'unplugin-auto-import/vite'
  5. import Components from 'unplugin-vue-components/vite'
  6. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  7. // https://vitejs.dev/config/
  8. export default defineConfig({
  9.   plugins:
  10.     [
  11.       vue(),
  12.       //element-plus 按需导入
  13.       AutoImport({
  14.         resolvers: [ElementPlusResolver({
  15.           // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
  16.           importStyle: "sass",
  17.         }
  18.         )],
  19.       }),
  20.       Components({
  21.         resolvers: [ElementPlusResolver({
  22.           // 自动引入修改主题色添加这一行，使用预处理样式
  23.           importStyle: "sass",
  24.         })],
  25.       }),
  26.  
  27.     ],
  28.   css: {
  29.     preprocessorOptions: {
  30.       //导入scss全局样式
  31.       scss: {
  32.         additionalData: `@use "./src/styles/element.scss" as *;`,
  33.         // javascriptEnabled: true
  34.       },
  35.     },
  36.   },
  37.   server: {
  38.     host: '0.0.0.0'
  39.   }
  40. })

此时运行代码，可以发现按钮样式变成绿色啦~

 更多得样式修改，可以查看这里~

四、实现自适应

vue2得时候我推荐过使用lib-flexible和postcss-pxtorem实现自适应

vue3我们使用 postcss-plugin-px2rem 和 amfe-flexible 实现

1.安装

  1. yarn add postcss-plugin-px2rem
  2. yarn add amfe-flexible

2.引入

在main.ts种引入：

import 'amfe-flexible'

在vite.config.ts中引入：

 完整代码如下：

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. //element-plus 按需导入
  4. import AutoImport from 'unplugin-auto-import/vite'
  5. import Components from 'unplugin-vue-components/vite'
  6. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  7. import postcssPluginPx2rem from "postcss-plugin-px2rem"
  8. // https://vitejs.dev/config/
  9. export default defineConfig({
  10.   plugins:
  11.     [
  12.       vue(),
  13.       //element-plus 按需导入
  14.       AutoImport({
  15.         resolvers: [ElementPlusResolver({
  16.           // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
  17.           importStyle: "sass",
  18.         }
  19.         )],
  20.       }),
  21.       Components({
  22.         resolvers: [ElementPlusResolver({
  23.           // 自动引入修改主题色添加这一行，使用预处理样式
  24.           importStyle: "sass",
  25.         })],
  26.       }),
  27.  
  28.     ],
  29.   css: {
  30.     preprocessorOptions: {
  31.       //导入scss全局样式
  32.       scss: {
  33.         additionalData: `@use "./src/styles/element.scss" as *;`,
  34.         // javascriptEnabled: true
  35.       },
  36.     },
  37.     postcss: {
  38.       plugins: [
  39.         postcssPluginPx2rem({
  40.           rootValue: 192, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
  41.           // unitPrecision: 5, //允许REM单位增长到的十进制数字。
  42.           //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
  43.           // propBlackList: [], //黑名单
  44.           // exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
  45.           // selectorBlackList: [], //要忽略并保留为px的选择器
  46.           // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
  47.           // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
  48.           mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
  49.           minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
  50.         })
  51.       ]
  52.     }
  53.   },
  54.   server: {
  55.     host: '0.0.0.0'
  56.   }
  57. })

此时再运行，可以看到浏览器上的单位变为rem，如下：

总结

好啦，到这里项目已经有了基本架构啦~接下来就是vue3的一些基本操作啦，感兴趣就期待下一章节吧~

源码放在这里啦~有需要自取：https://github.com/tianjing321/vue3-vite-ts-pxtorem

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/320662
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号