跳到主要内容

vue3-typescript-custom

2024年04月29日
柏拉文
越努力，越幸运

准备​

安装vite、vue@next、@vitejs/plugin-vue、@vue/compiler-sfc 依赖

yarn add vite vue@next @vitejs/plugin-vue @vue/compiler-sfc -D

搭建​

一、添加 vite.config.js 配置文件​

工作如下:

  1. 引入智能代码提示defineConfig
  2. 引入 @vitejs/plugin-vue

具体代码:

import { defineConfig } from "vite"; // 配置智能提示
import VuePlugin from "@vitejs/plugin-vue"


export default defineConfig({
    plugins:[VuePlugin()]
})

二、添加 vite 入口文件 index.html​

工作如下:

  1. 添加<div id="app"></div>
  2. 添加`

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习Vite</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/index.js"></script>
</body>
</html>

三、添加 index.js 入口文件​

工作如下:

  1. 引入vue
  2. 挂载DOM

具体代码:

import {createApp} from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

四、添加 App.vue 文件​

具体代码:

<template>
    <img src="./assets/avatar.jpeg" alt="">
    <img :src="avatar" alt="">
    <HelloWordVue />
    <h3>{{ title }}</h3>
    <div><button @click="handleClick">点击{{num}}次</button></div>
</template>

<script setup>
    import { ref } from "vue";
    import HelloWordVue from "./HelloWord.vue";
    import avatar from './assets/avatar.jpeg'

    const num = ref(0);
    const title = ref("Hello Word")

    const handleClick = () => {
        num.value++;
    }
</script>

五、package.json 添加命令​

具体代码:

{
  "name": "vite-start",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start":"vite"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/compiler-sfc": "^3.2.36",
    "vite": "^2.9.9",
    "vue": "^3.2.36"
  }
}

至此，执行yarn start就可以查看效果喽

六、less、scss 样式文件支持​

Vite 本身支持.less、.scss 样式文件，使用时，只需要在项目中安装less、sass依赖即可

安装依赖

yarn add less scss -D

具体使用

  • 使用.less

    <style scoped lang="less">
    @color:red;
    .box{
        width:100px;
        height:100px;
        background-color: @color;
    }
    </style>

  • 使用.scss

    <style scoped lang="scss">
    $color:red;
    .box{
        width:100px;
        height:100px;
        background-color: $color;
    }
    </style>

七、postcss 添加厂商前缀支持​

Vite 本身支持postcss对于样式文件的处理，使用时，我们需要在项目中添加postcss.config.js、.browserslistrc

安装autoprefixer依赖

yarn add autoprefixer -D

postcss.config.js 配置如下:

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

.browserslistrc 配置如下:

>0%
not dead 
not op_mini all

之后，Vite 便开启了给样式自动添加厂商前缀的效果

八、typescript 支持​

Vite 本身也支持TypeScript，使用时我们需要在项目中添加tsconfig.json、babel.config.js

安装@babel/core、@babel/preset-env、@babel/preset-typescript、typescript 依赖

yarn add typescript @babel/core @babel/preset-env @babel/preset-typescript -D

babel.config.js 配置如下:

module.exports = {
    presets: [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

tsconfig.js 配置如下:

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "baseUrl": "./",
        "paths": {
            "@": [
                "./src"
            ]
        },
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ]
}

shims-vue.d.ts 配置如下:

declare module "*.vue"{
    import { DefineComponent } from "vue";
    const component:DefineComponent<{},{},any>;
    export default component;
}

vite-env.d.ts 配置如下:

/// <reference type="vite/client" />