详细vite创建vue3项目(vue3+vue-router+ts+vite+pinia)

一、创建项目

1.初始化项目

npm init vite@latest

2.输入项目名称

3.安装依赖

npm install

4.启动项目

npm run dev

二、配置所需依赖

1.配置@路径别名，实现@代替/src

npm install @types/node --save-dev

（1）修改vite.config.ts配置文件代码

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // 设置文件./src路径为 @
        alias: [
            {
                find: '@',
                replacement: resolve(__dirname, './src'),
            },
        ],
    },
});

（2） 根目录下 tsconfig.json 文件中配置

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

2.安装路由

npm install vue-router@4

（1）在src目录下新建router文件夹，在router里创建index.ts文件

（2）index.ts中配置路由

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// import Layout from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
    {
        //路由初始指向
        path: '/',
        redirect: '/index',
    },
    {
        //路由初始指向
        path: '/index',
        name: 'index',
        component: () => import('@/view/index/index.vue'),
    },
];

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

export default router;

（3）main.ts中导入挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)

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

（4）修改App.vue管理路由

<script setup lang="ts">
</script>
<template>
  <router-view></router-view>
</template>

<style>

</style>

3.安装pinia（状态管理，类似vue2中的vuex）

npm install pinia

（1）在根目录下创建store文件夹，并创建index.ts文件

（2）创建 pinia 实例

import { createPinia } from "pinia";
const store=createPinia()
export default store

（）在main.ts中全局引入pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'
import router from './router'
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

4.css 预处理器 sass或者less

（1）Sass预处理器

npm install -D sass sass-loader

    使用

<style scoped lang="scss"></style>

  (2)  Less预处理器

npm install -D less

   使用

<style scoped lang="less"></style>