尝鲜vue3.0-tyepscript开发组件(3)

背景

延续前面的两篇文章:


Vite

  1. Vite是一个web开发构建工具,它在开发期间通过本地ES模块导入为您的代码提供服务,并将其与Rollup捆绑在一起用于生产。
  • 闪电般的冷服务器启动
  • 快速热模更换(HMR)
  • 真正的随需应变的编译

实际上就是先启动服务(koa),如果你需要某一个文件,再进行编译。这就造成Vite启动服务的速度比Webpack快了很多,即“按需编译”。

  1. 需要我们注意的是:

    • TypeScript已经内置支持,直接就可以使用
    • less/sass/stylus/postcss也内置支持(单需要单独安装所对应的编译器)
    • git地址
  2. 使用vite初始化项目

      npm init vite-app <project-name>
      cd <project-name>
      npm install
      npm run dev

安装配置

  1. 安装sass,eslint,prettier(注意版本号)


//.eslintrc.js

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: {
      tsx: true, // Allows for the parsing of tsx
      // jsx: true,// Allows for the parsing of JSX
    },
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  rules: {
    // js/ts
    'eol-last': 'error',
    'no-trailing-spaces': 'error',
    'comma-style': ['error', 'last'],
    'comma-dangle': ['error', 'always-multiline'],
    quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
    camelcase: ['error', { properties: 'never' }],
    semi: ['error', 'never'],
    indent: ['error', 2, { SwitchCase: 1 }],
    'object-curly-spacing': ['error', 'always'],
    'arrow-parens': ['error', 'as-needed'],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/member-delimiter-style': [
      'error',
      {
        multiline: {
          delimiter: 'none',
          requireLast: false,
        },
        singleline: {
          delimiter: 'semi',
          requireLast: true,
        },
      },
    ],
    // vue
    'vue/no-v-html': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'never',
          normal: 'never',
          component: 'always',
        },
      },
    ],
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 3,
        multiline: 1,
      },
    ],
    'vue/require-default-prop': 'off',
    'vue/html-closing-bracket-spacing': 'error',
  },
};
  1. 配置 typescript
//vue-shim.d.ts
declare module '*.vue' {
  import { Component, ComponentPublicInstance } from 'vue'
  const _default: Component & {
    new(): ComponentPublicInstance<any>
  }
  export default _default
}
//source.d.ts
import Vue from 'vue'
declare module '*.vue' {
  export default Vue
}

declare module '*.json'
declare module '*.png'
declare module '*.jpg'

仿element-ui的dialog组件

  • css直接使用elemnt的即可,自行去下载主题,并引入
  • dialog组件需要2个组件(全局的mask组件,dialog组件)

//dialog.ts

//dialog抽离的逻辑

// 全局引用

import Dialog from './components/dialog/index'
const app = createApp(App)
app.component(Dialog.name, Dialog)

// mask蒙层组件

//使用方式 v-model.modelValue(原:visible.sync="dialogVisible"上一篇有介绍)

<elDialog
    v-model.modelValue="dialogVisible" 
    title="提示"
    width="30vw"
    @close="handleClose">
    <p>这是一段信息~~~</p>
    <div slot="footer" class="dialog-footer">
      <button @click="handleClose" class="el-button el-button--default">取 消</button>
      <button type="primary" class="el-button el-button--primary" @click="dialogVisible = false">确 定</button>
    </div>
  </elDialog>

总结

至此,使用vue3.0+typescript开发dialog组件后,对vue3.0的开发有了进一步的了解。这个过程中,需要注意安装插件的版本。如果报错了,估计就是版本安装不对。下一篇就开始介绍router了~希望大家喜欢~
代码github地址


vue3尝鲜之旅
前端工程师

前端工程师

25 声望
5 粉丝
0 条评论
推荐阅读
【进阶篇】koa+Mysql的全栈之旅
继续上一篇【easy篇】前端到全栈从这里开始完成对云服务器的初步了解,以及nginx的配置,接下来是MySQL安装,建表操作以及使用Node.js框架Koa进行简单的数据增删改查功能。过程比较长,但是按照下面步骤来就比较...

阿秋_在路上阅读 3.8k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.2k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图

前端工程师

25 声望
5 粉丝
宣传栏