vite，vue3 ，ts 创建项目配置

原创已于 2022-09-21 16:06:17 修改 · 694 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-09-21 16:03:20 首次发布

笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Vite、Vue和TypeScript快速搭建一个具备路由和状态管理的基础项目，包括安装配置步骤及核心文件示例。

1. 安装

npm init vite@latest

2. 配置项目名字

? Project name: » vite-project

3.选择vue项目

    vanilla
>   vue
    react
    preact
    lit
    svelte

4. 选择ts

 vue
>   vue-ts

5. cd进入项目, npm i 安装环境，安装常用的插件

npm install vue-router@4 vuex@next axios vuex-persister

6. 在src目录下添加router/index.ts文件，并配置

import { createRouter, createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [{
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    //路由懒加载
    component: () => import('../views/About.vue')
  }
  ]
})
export default router

7. 在src目录下添加store/index.ts文件，并配置

import { createStore } from 'vuex'
//引入数据固化
import VuexPersister from 'vuex-persister'
const persister = new VuexPersister({
//根据需求写入存储位置，我这里用的localStorage
  storage: window.localStorage
})
const store = createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  plugins: [persister.persist]
})
export default store

8. main.ts配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'//引入路由
import store from './store/index'//引入vuex
createApp(App).use(store).use(router).mount('#app')

9. 在vite.config.ts中配置@路径

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  //加入以下片段可使用@路径
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})