Vite创建项目的基本步骤

一：初始化项目

1.需要在创建项目的位置cmd目录下执行 2.npm init vite@latest 回车

npm init vite@latest

3.填上自己的项目名称 回车 4.选择vue 回车

5.选择 TypeScript 回车

6.项目创建完成

或者一步到位通过附加的命令行选项直接指定项目名称和你想要使用的模板（根据自己npm版本来选择不同的命令行）

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

二：安装依赖，运行项目

1.打开创建的项目，在终端进入项目

cd vite-vue

2.安装默认依赖

npm install

3.运行项目

npm run dev

三：初始配置

1.安装路由

npm install vue-router@4

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

（2）在index.ts里面配置路由

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component:()=>import('../view/home.vue'),
   //我事先在src下面创建了一个view文件夹，在view文件下面创建了home.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";
 
createApp(App).use(router).mount('#app')

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

<template>
  <router-view></router-view>
</template>

<script setup lang="ts">
</script>

<style>
</style>

2.安装css 预处理器 sass

npm install -D sass sass-loader

<template>
  <div class="app">
    <div class="box">
      首页
    </div>
  </div>
</template>
 
<script lang="ts" setup>
 
</script>
 
<style lang="scss" scoped>
.app {
  .box {
    color: #747bff;
  }
}
</style>

3.引入element-plus

npm install element-plus --save

（1）在main.ts引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
createApp(App).use(router).use(ElementPlus).mount('#app')

（2）使用

<template>
  <div class="app">
   <el-button type="success">Success</el-button>
  </div>
</template>
 
<script lang="ts" setup>
 
</script>
 
<style lang="scss" scoped>
</style>

（3）效果

4.安装pinia

npm install pinia

（1）在main.ts引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from "pinia";
const pinia = createPinia();
 
createApp(App).use(router).use(ElementPlus).use(pinia).mount('#app')

总结：以上步骤便完成了vue3项目 vite + vue3 + vue router + pinia +element plus