用 vite 构建 vue3 + TS 项目

孟孟_mengmeng

已于 2022-06-10 15:02:06 修改

阅读量2.7k

点赞数 3

分类专栏：前端文章标签： vue.js

于 2022-06-09 17:34:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40922656/article/details/125201914

版权

本文详述如何使用Vite初始化并配置Vue3 TypeScript项目，涵盖从项目创建到路由设置、CSS管理、Vuex状态管理、组件按需引入、axios封装以及Element-Plus的安装和应用。通过Vite的特性简化开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、项目初始化
（1）全局安装 create-vite

npm install create-vite@2.9.0 -g

（2）创建仓库并第一次提交

git init 
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin https://gitee.com/mengxianwei1231/vue3_ts_vite.git
git push -u origin "master"

（3）初始化项目（vue3_ts_vite项目名称）

npm init @vitejs/app vue3_ts_vite

选择vue ->vue-ts
在这里插入图片描述

此时已经创建完成
（4）依赖并启动就ok

  cd vue3_ts_vite
  npm install
  npm run dev

2、基础配置
.eslintrc.js配置全局变量：

// .eslintrc.js
 
module.exports = {
   
  globals: {
   
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  env: {
   
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-strongly-recommended',
    'standard'
  ],
  parserOptions: {
   
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
   
  }
}

3、安装使用路由
（1）安装 vue-router

npm install vue-router@4

（2）初始化路由实例

// src\router\index.ts
 
import {
    createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'

const routes: RouteRecordRaw[] = [
    {
   
        path: '/',
        redirect: '/login'
    },
    {
   
        path: '/login',
        component: () => import('../view/index.vue')
    },
]

const router = createRouter({

最低0.47元/天解锁文章