快速开始vue项目-初始化初始化用vite初始化项目一键安装插件 sass配置配置@路径 tsconfig.jso

初始化

用vite初始化项目

npm create vite@latest

一键插件

这些依赖分别提供了不同的功能，例如：

@element-plus/icons-vue 和 element-plus：Element Plus 是一个基于 Vue 3 的 UI 库，提供了一套完整的组件和图标。
@types/node：为 Node.js 提供类型定义，适用于 TypeScript 项目。
@vitejs/plugin-vue：Vite 插件，用于支持 Vue 3 项目。
axios：一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。
nprogress：一个轻量级的进度条插件。
pinia：Vue 3 的状态管理库。
sass：Sass 预处理器，用于编写更简洁的 CSS。
typescript：一种静态类型的 JavaScript 超集，提供更好的类型检查和开发体验。
vite：一个现代的前端构建工具，提供快速的开发服务器和优化的构建流程。
vue-router：Vue 的官方路由管理器。
vue-tsc：TypeScript 类型检查工具，专为 Vue 项目设计。
vue：Vue 3 框架的核心库。
path：配置@路径

npm install @element-plus/icons-vue @types/node axios element-plus nprogress pinia sass vue-router nanoid mitt path

pinia配置

pinia

router

element-plus

配置@/路径

需要修改两个文件 vite.config.ts 这里导入path后添加resolve的内容

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

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

tsconfig.json 这里添加compilerOptions里面的内容

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"]
    },
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
}

配置sass

一键插件有安装，直接使用就行

<style lang="scss" scoped>

</style>