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

接上一篇 

3、别名配置

• @ 代替 ./src
• @components代替./src/components

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

安装依赖

npm install --save-dev @types/node

vite.config.ts配置

// 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

npm i -D unocss
npm i -D unocss-preset-weapp

vite.config.ts中配置

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

main.ts

import "uno.css"

 创建unocss.config.ts

增加前缀uno-

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-weapp
    presetWeapp({ prefix }),
    // attributify autocomplete
    presetWeappAttributify()
  ],
  shortcuts: [
    {
      "uno-center": "uno-flex uno-justify-center uno-items-center"
    }
  ],

  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass()
  ]
})

 5、prettier

安装依赖

npm i prettier -D

根目录下创建.prettierrc.json

{
  "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

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

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