系列文章目录

第一章：搭建项目

系列文章目录

前言

一、搭建项目

二、安装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不兼容

yarn add node-sass
yarn add sass-loader
yarn add style-loader
yarn add sass

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

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

2.测试

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

$main_clolr: red;
$main_bg: blue

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

<script setup lang="ts">
</script><template><div class="item">你好</div>
</template><style lang="scss" scoped>
.item{background: $main_bg;color: $main_clolr;
}
</style>

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

代码：

  css: {preprocessorOptions: {//导入scss全局样式scss: {additionalData: `@use "./src/styles/public.scss" as *;`,// javascriptEnabled: true},},},

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

三、引入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,加入以下代码：

完整代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//element-plus 按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({plugins:[vue(),//element-plus 按需导入AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],css: {preprocessorOptions: {//导入scss全局样式scss: {additionalData: `@use "./src/styles/public.scss" as *;`,// javascriptEnabled: true},},},server: {host: '0.0.0.0'}
})

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

2.3测试

打开app.vue，引入按钮：

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

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

2.自定义主题

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

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

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

完整代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//element-plus 按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({plugins:[vue(),//element-plus 按需导入AutoImport({resolvers: [ElementPlusResolver({// 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色importStyle: "sass",})],}),Components({resolvers: [ElementPlusResolver({// 自动引入修改主题色添加这一行，使用预处理样式importStyle: "sass",})],}),],css: {preprocessorOptions: {//导入scss全局样式scss: {additionalData: `@use "./src/styles/element.scss" as *;`,// javascriptEnabled: true},},},server: {host: '0.0.0.0'}
})

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

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

四、实现自适应

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

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

1.安装

yarn add postcss-plugin-px2rem
yarn add amfe-flexible

2.引入

在main.ts种引入：

import 'amfe-flexible'

在vite.config.ts中引入：

完整代码如下：

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

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

总结

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

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

vue3+ts+vite自适应项目——搭建项目相关推荐

Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
基于Vue3+TS+Vite+Cesium创建项目
基于Vue3+TS+Vite+Cesium创建项目基于Vite构建项目安装配置Cesium 创建Cesium三维视图运行结果随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS ...
【Vue3+Ts+Vite】使用Vite与TS构建Vue3项目
Vue3+Ts+Vite
vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+TS+Vite无法使用require导入图片的解决方法问题描述, 当使用const xxx = require('xxx')浏览器会报错, 为啥使用vue-cli脚手架时不会出问题? 是因 ...
vue3+ts+vant移动端H5项目搭建
使用vue-cli搭建项目 1.全局安装vue-cli npm install -g @vue/cli 安装完成验证 vue -V 2.使用vue ui 可视化创建项目 2.1 vue ui vue ...
手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统
准备工作首先请确保你的node.js版本>=12.0.0 因为vite的兼容性,Vite 需要 Node.js 版本 >= 12.0.0. 如果你不知道你的node.js的版本是多少,请 ...
vue3+ts通用管理后台练习项目
vue3-ts-cms 项目概述一个基于 RBAC 设计的通用后台管理系统,支持通过配置文件批量完成特定功能,如搜索.表格数据显示,导入.导出.项目中封装了大量通用组件,如表单.表格.Echarts ...
【vue3】vue3+ts+vite项目设置路径别名
解决流程 1.安装依赖 npm install @types/node -D 2.tsconfig.json配置 {"compilerOptions": {....."b ...

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

系列文章目录

前言

一、搭建项目

二、安装sass

1.安装依赖

2.测试

三、引入element-plus

1.引入库

1.1 安装

2.2引入插件

2.3测试

2.自定义主题

四、实现自适应

1.安装

2.引入

总结

vue3+ts+vite自适应项目——搭建项目相关推荐

最新文章

热门文章