美工初入vue3的学习笔记（二）——插件与配置上篇

SeraphBX
105 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天

插件与配置上篇

承接前一篇，展开建立好的项目目录，找到package.json我们可以看到基础环境的依赖与相关版本，但离正式开发环境还有一定距离，需要安装插件与配置，我们需要继续走下去。

image.png

1. Eslint与parser

我这边是使用webstorm进行开发，通过直接安装插件即可使用，但更多的用户可能是用vs，就需要手动安装。

  • webstorm配置

image.png

  • 手动安装
yarn add eslint eslint-plugin-vue --save-dev

由于ESLint默认使用Espree语法解析，是不能识别TypeScript某些语法，所以需安装@typescript-eslint/parser替换掉默认解析器

yarn add @typescript-eslint/parser --save-dev

另外补充额外typescript语法的规则

yarn add @typescript-eslint/eslint-plugin --save-dev
  • 创建配置文件.eslintrc.js或.eslintrc.json
module.exports = {
    root: true,
    env: {
        node: true,
        es6: true,
        browser: true
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'eslint:recommended'
    ],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: '8',
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'indent': 0,
        'space-before-function-paren': 0
    }
}
  • 创建忽略文件.eslintignore
index.html
dist
node_modules
*.md
.vscode
.idea
public

2. Prettier

使用webstorm的只需要在插件里选择Prettier安装即可，如果是vs需要手动安装

  • webstorm配置

image.png

  • 创建配置文件.prettierrc.js
module.exports = {
    printWidth: 100, //一行的字符数，如果超过会进行换行，默认为80
    tabWidth: 2, //一个tab代表几个空格数，默认为80
    useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
    singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
    semi: false, //行位是否使用分号，默认为true
    trailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"
    bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    jsxSingleQuote: true, // jsx语法中使用单引号
    endOfLine: 'auto',
    'prettier.spaceBeforeFunctionParen': true
}
  • 创建忽略文件 .prettierignore
/node_modules/**
/public/*

3. vue-router

目前已经进入到4.x版本，与TS有很好的兼容性

yarn add vue-router
  • 创建配置文件 index.ts

打开项目文件夹就可以看到如下图：

image.png

  • 创建router文件夹与配置文件 index.ts

具体配置文件见下篇

4. less/sass

Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

yarn add less -D

yarn add sass -D

yarn add stylus -D

5. postcss-px-to-viewport

yarn add postcss-px-to-viewport
  • 在 vite.config.ts 里添加配置
import PostcssPXToViewport from 'postcss-px-to-viewport'


css: {
  postcss: {
    plugins: [
      PostcssPXToViewport({
        unitToConvert: 'px', // 要转化的单位
        viewportWidth: 375, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
        landscape: false // 是否处理横屏情况
      })
    ]
  },
},

7. unplugin-vue-components

强推此插件节省手动引入的麻烦，在根目录建立components.d.ts就能自动import模块

yarn add unplugin-vue-components -D
  • 在 vite.config.ts 里添加配置
import Components from "unplugin-vue-components/vite";

 plugins: [
    vue(),
    Components({
      directoryAsNamespace: true,
      // 按需加载的文件夹
      dirs: ['src/components'],
    }),
  ],

上半总结

配置文件汇总

  • .eslintrc.js或.eslintrc.json
  • .eslintignore
  • .prettierrc.js
  • .prettierignore
  • vite.config.ts
  • components.d.ts 根目录手动创建，自动写入

画面

运行

yarn run dev

image.png

在浏览器打开 http://127.0.0.1:5173/

因为我这边设置viewportWidth: 375，通过F12切入开发状态，所以应该看到以下这样的画面：

image.png 如果画面相同，并且没报错就代表配置正确了！

我们进入到插件与配置下篇>>

avatar
文章
阅读
粉丝