1、创建项目

使用 npm

npm init vite@latest

或使用 yarn（以下操作用的是yarn）

yarn create vite

然后按提示步骤操作：

项目名称
选择框架
选择语言
这就创建成功啦

运行项目，进入你的项目所在的位置，运行以下命令

cd vite-project

yarn

yarn dev

用浏览器打开链接 http://localhost:3000/

项目运行成功了，是不是很简单，哈哈哈~~~

2、安装element-plus

npm install element-plus --save

或

yarn add element-plus

全局引用，进入配置文件 main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'

const app = createApp(App)

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

在App.vue文件中试用一下

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <el-button type="primary">Primary 211</el-button>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

效果如下

3、vite 配置别名

进入配置文件 vite.config.ts，做以下配置

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

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

// 上面可能会遇到
// __dirname 和 path 显示红色的波浪线需要安装插件
npm i @types/node -S

4、安装 sass

yarn add sass-loader -D
yarn add node-sass -D
yarn add sass  -D

安装时一直报以下错误

解决方案：

 yarn config set ignore-engines true

5、安装vue-router

yarn add vue-router@next

router/index.ts

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

// 路由信息
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/home/home.vue')
  },
  {
    path: '/list',
    name: 'List',
    component: () => import('@/views/list/list.vue')
  }
]

// 导出路由
const router = createRouter({
  // hash模式：createWebHashHistory，history模式：createWebHistory
  history: createWebHistory(),
  routes
})

export default router

在main.ts中挂载

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'

const app = createApp(App)

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

效果

6、安装 Vuex

yarn add vuex@next

在src目录下创建store文件夹
在store文件夹下创建index.ts文件和modules文件夹

index.ts配置内容

import { createStore } from 'vuex'

// 获取modules文件夹下所有的ts文件
const files: any = import.meta.globEager('./modules/*.ts')
let modules: any = {}
Object.keys(files).forEach((key) => {
  // 将获取到的结果按照 key:value 的形式存放到modules对象中
  modules[key.replace(/(./|\modules/|.ts)/g, '')] = files[key].default
})
console.log('模块', modules)
export default createStore({
  modules
})

modules/user.ts

export default {
  state: () => ({
    userInfo: {
      name: '蜗牛吐泡泡'
    }
  })
}

在main.ts中挂载

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'
import store from './store'
import router from './router'

const app = createApp(App)

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

7、安装 axios

yarn add axios

在src目录下创建service文件夹
在service文件夹下创建index.ts文件

vite创建vue3.0 + ts + element-plus项目