vue-cli+vue3+vite+ts 搭建uniapp项目全过程(二)

embedded/2024/12/21 20:10:31/

接上一篇 

3、别名配置
  • @ 代替 ./src
  • @components代替./src/components

在 Vite 中, '__dirname'  并不是一个全局变量,所以在vite.config.ts  文件中无法直接使用。

安装依赖

javascript">npm install --save-dev @types/node

vite.config.ts配置

javascript">// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';export default defineConfig({resolve: {alias: {'@': resolve(__dirname, './src'),'@components': resolve(__dirname, './src/components')}}
});
4、原子化css

安装unocss

javascript">npm i -D unocss
npm i -D unocss-preset-weapp

vite.config.ts中配置

javascript">import Unocss from "unocss/vite"
plugins: [uni(),Unocss(),
]

main.ts

javascript">import "uno.css"

 创建unocss.config.ts

增加前缀uno-

javascript">import presetWeapp from "unocss-preset-weapp";
import { extractorAttributify, transformerClass } from "unocss-preset-weapp/transformer";
import { defineConfig } from "unocss";
// 可以写属性会自动增加class,也可以写class
const prefix = "uno-";
const { presetWeappAttributify, transformerAttributify } = extractorAttributify({ classPrefix: prefix });export default defineConfig({presets: [// https://github.com/MellowCo/unocss-preset-weapppresetWeapp({ prefix }),// attributify autocompletepresetWeappAttributify()],shortcuts: [{"uno-center": "uno-flex uno-justify-center uno-items-center"}],transformers: [// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributifytransformerAttributify(),// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClasstransformerClass()]
})
 5、prettier

安装依赖

npm i prettier -D

根目录下创建.prettierrc.json

javascript">{"semi": false,"singleQuote": true,"trailingComma": "none","arrowParens": "avoid","jsxBracketSameLine": false,"printWidth": 80,"tabWidth": 2,"tabSize": 2
}
6、eslint相关

安装依赖

npm i @vue/eslint-config-standard babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue eslint @babel/eslint-parser -D

添加eslint规则配置文件

在根目录下添加.eslintrc.js

javascript">module.exports = {root: true,env: {node: true},extends: ['plugin:vue/vue3-essential'],parserOptions: {parser: '@babel/eslint-parser',requireConfigFile: false},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren': 'off','no-unused-vars': 'warn','handle-callback-err': 'warn','vue/multi-word-component-names': 'off','vue/no-deprecated-v-bind-sync': 'off'}}

在根目录下添加忽略文件 .eslintignore

javascript">*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile


http://www.ppmy.cn/embedded/29476.html

相关文章

CMUS狮身人面像(四)-构建语言模型

构建语言模型 语言模型是配置的重要组成部分,它告诉解码器可以识别哪些单词序列。 模型有多种类型:关键词列表、语法和统计语言模型以及语音语言模型。它们具有不同的功能和性能特性。您可以根据需要选择任何解码模式,甚至可以在运行时在模…

Go实现 - 树莓派自己烧录自己 之 多读卡器同时烧录

简介 Go实现 监控读卡器设备存储空间变化, 自动烧写SD Card, 烧写完成之后自动弹出, 显示执行状态, 还支持热插拔。 步骤 代码 lsblkParser.go imageWriter.go package actionimport ("fmt""os/exec" )ty…

【RabbitMQ 二】RabbitMQ基本组成、交换器类型、RabbitMQ生产消费消息流程、信道Channel、AMQP协议

RabbitMQ入门 1.RabbitMQ基本组成 RabbitMQ有一些基本的组成单元: Producer:消息的生产者Consumer:消息的消费者Broker:RabbitMQ的服务节点。形象一点说就是一个Broker等同于一台RabbitMQ服务器,可以接收Producer的…

开源博客项目Blog .NET Core源码学习(20:App.Hosting项目结构分析-8)

本文学习并分析App.Hosting项目中后台管理页面的个人资料页面、修改密码页面。 个人资料页面 个人资料页面用于显示和编辑个人信息,支持从本地上传个人头像。整个页面使用了layui中的表单、日期与时间选择、上传等样式或模块,通过layui.css文件设置样式…

Flutter笔记:Widgets Easier组件库(8)使用图片

Flutter笔记 Widgets Easier组件库(8):使用图片 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress o…

【翻译】Elasticsearch Java API Client 8.13.2 (第四章-使用 Java API 客户端)

以下部分提供了有关 Elasticsearch 最常用和一些不太明显的功能的教程。 有关完整参考,请参阅 Elasticsearch 文档,特别是 REST API 部分。 Java API 客户端使用 Java API 约定,严格遵循此处描述的 JSON 结构。 索引单个文档 如果您是 Ela…

Java中的Map接口有哪些方法可以用来遍历它的键值对?

Java中的Map接口提供了多种方法来遍历它的键值对。以下是其中一些常用的方法&#xff1a; 1. keySet()&#xff1a;返回一个包含Map中所有键的Set视图。可以使用这个方法来遍历键。 java Map<String, Integer> map new HashMap<>(); // 添加键值对 map.put("…

网络安全知识点

网络安全 1&#xff0e; 网络安全的定义&#xff0c;网络安全的属性。 定义&#xff1a;针对各种网络安全威胁研究其安全策略和机制&#xff0c;通过防护、检测和响应&#xff0c;确保网络系统及数据的安全性。 属性&#xff1a;机密性 认证&#xff08;可鉴别性&#xff09…