使用 Vite 构建 Vue3 Typescript 环境

一休哥2022
379 阅读4分钟

目录

  1. 介绍

  2. 让我们开始吧

  3. 纱线配置

  4. 项目配置

    1. 常见节点类型
    2. 类型化的 ENV 变量
    3. 别名 @ 到 src

  5. 提升 DX 的工具

    1. 更漂亮
    2. 埃斯林特
    3. 样式表
    4. 提交
    5. 沙哑

  6. 常见的项目依赖

    1. Vue路由器

    2. Vuex

    3. 头部管理

  7. 附加功能

    1. 设置 TailwindCSS

介绍

这是一个关于如何使用上述技术堆栈以及一些可以真正帮助DX（开发人员体验）部门的附加功能来设置新 Vue 3 项目的自以为是的指南。

像这样的东西：

  • 更漂亮
  • 沙哑
  • ESLint + styleLint + commitlint

和更多…

让我们开始吧

生成一个新项目：

yarn create vite

# introduce project name
# select vue
# select vue-ts

纱线配置

让我们用 Yarn 设置我们的项目。
然后进入项目目录：

yarn install

项目配置

常见节点类型

能够使用__dirnameor import path from 'path'：

yarn add --dev @types/node

类型化的 ENV 变量

要在 Vite 中输入您的环境变量，请添加一个src/env.d.ts包含输入信息的新文件，例如：

interface ImportMetaEnv {
  VITE_BASE_URL: string
}

这表明我们将拥有一个VITE_BASE_URL包含字符串的 env var。

别名 @ 到 src

要使用类似import HelloWorld from '@/components/HelloWorld.vue'的导入——注意 @  ——我们需要编辑vite.config.ts并添加一个新resolve键，如下所示：

import vue from '@vitejs/plugin-vue'
import path from 'path'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
})

为了让TypeScript解析这个别名，并允许我们自动完成路径，让我们在下面添加paths和：baseUrl``tsconfig.json``compilerOptions

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    // ...
    "skipLibCheck": true,
    //...

让我们也投入其中"skipLibCheck": true。
这里有一些关于为什么它可能对我们有用的背景。

提升 DX 的工具

这些依赖项旨在为 Web 开发设置高级 DX。

更漂亮

将prettier添加到项目中：

yarn add --dev prettier

创建一个.prettierrc：

{
  "semi": false,
  "singleQuote": true
}

格式化项目：

yarn prettier . --write

埃斯林特

让我们配置eslint + prettier + typescript支持。
在项目中添加eslint及相关依赖：

yarn add --dev eslint eslint-plugin-vue eslint-config-prettier
yarn add --dev @typescript-eslint/parser

创建一个.eslintrc.js文件：

module.exports = {
  env: { node: true },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier',
  ],
  globals: {
    defineEmits: 'readonly',
    defineProps: 'readonly',
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    // sourceType: 'module',
  },
  rules: {},
}

将以下脚本添加到您的package.json文件中：

{
  // ...
  "scripts": {
    // ...
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src/",
    "format": "prettier . --write"
    // ...

在此处阅读有关eslint-plugin-vue的更多信息 。

样式表

将stylelint添加到项目中：

yarn add --dev stylelint stylelint-config-standard stylelint-config-prettier

创建一个.stylelintrc.json：

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
}

提交

将commitlint添加到项目中：

yarn add --dev @commitlint/cli @commitlint/config-conventional

创建一个commitlint.config.js：

module.exports = {
  extends: ['@commitlint/config-conventional'],
}

在此处阅读有关commitlint的更多信息 。

沙哑

将husky添加到项目中：

yarn add --dev husky
yarn husky install
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
yarn husky add .husky/pre-commit 'yarn lint'

每当我们克隆一个包含husky钩子的存储库时，我们都需要运行gityarn husky install来获取它们。****

常见的项目依赖

这些是您基本上在每个项目中都会看到的一些非常常见的依赖项。

Vue路由器

将 vue-router 添加到项目中：

yarn add vue-router@next

路由示例：

路线.ts：

export default [
  {
    component: () => import('./pages/HomePage.vue'),
    name: 'home',
    path: '/',
  },
  {
    component: () => import('./pages/AboutPage.vue'),
    name: 'about',
    path: '/about',
  },
]

main.ts：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

createApp(App).use(router).mount('#app')

应用程序.vue：

<template>
  <h1>The APP template</h1>
  <RouterLink to="/">Home</RouterLink>
  |
  <RouterLink to="/about">About</RouterLink>
  <RouterView></RouterView>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
})
</script>

Vuex

将 vuex 添加到项目中：

yarn add vuex@next

添加一个src/store.ts文件：

import { createStore } from 'vuex'

export interface State {
  count: number
}

export const store = createStore<State>({
  state() {
    return {
      count: 1,
    }
  },

  mutations: {
    add(state, amount) {
      state.count += amount
    },
  },
})

然后在你src/main.ts：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import routes from './routes'
import { store } from './store'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

createApp(App).use(router).use(store).mount('#app')

在组件中使用 store，例如src/pages/Home.vue：

<template>
  <h1>The HOME template -{{ count }}-</h1>
  <img alt="Vue logo" src="@/assets/logo.png" @click="addTwo" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

import HelloWorld from '@/components/HelloWorld.vue'
import { store } from '@/store'

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  setup() {
    const addTwo = () => store.commit('add', 2)
    const count = computed(() => store.state.count)

    return {
      addTwo,
      count,
    }
  },
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

进一步阅读

Vuex + 打字稿：

头部管理

让我们添加@vueuse/head到项目中来处理我们的应用程序的SEO：

将vuex添加到项目中：

yarn add @vueuse/head

在你的src/main.ts：

import { createHead } from '@vueuse/head'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import routes from './routes'
import { store } from './store'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

const head = createHead()

createApp(App).use(head).use(router).use(store).mount('#app')

在您的src/App.vue或页面组件中使用它，如下所示：

<template>
  <h1>The APP template</h1>
  <RouterLink to="/">Home</RouterLink>
  |
  <RouterLink to="/about">About</RouterLink>
  <RouterView></RouterView>
</template>

<script lang="ts">
import { useHead } from '@vueuse/head'
import { defineComponent } from 'vue'

import HelloWorld from '@/components/HelloWorld.vue'

export default defineComponent({
  name: 'App',

  components: {
    HelloWorld,
  },

  setup() {
    useHead({
      title: 'Default title',
      meta: [
        {
          name: 'description',
          content: 'This is a DEFAULT description',
        },
        {
          name: 'other-stuff',
          content: 'This is some OTHER stuff',
        },
      ],
    })
  },
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

附加功能

设置 TailwindCSS

将 TailwindCSS 依赖项添加到项目中，然后生成一些配置文件：

yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest
yarn tailwindcss init -p

添加一些基本配置tailwind.config.js：

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

还有一些.stylelintrc.json：

{
  //...
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["tailwind"]
      }
    ]
  }
}

添加一个src/index.css文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

并将其导入您的src/main.ts文件中：

import './index.css'

您现在可以在您的应用程序中使用 TailwindCSS 类。

avatar
文章
阅读
粉丝