Vite构建Vue3项目

目录

  • 1. 初始化
  • 2. 输入项目名称
  • 3. 选择vue
  • 4. 选择typescript
  • 5. 进入新建的项目
  • 6. 安装依赖
  • 7. 运行
  • 8. 安装路由
  • 9. 安装element-plus
  • 10. 安装自动导入组件插件
  • 11. 安装自动导入api插件
  • 12. 将./src变为@
  • 13. 安装pinia

1. 初始化

npm init vite

Vite构建Vue3项目_第1张图片

2. 输入项目名称

  • vue3-ts

Vite构建Vue3项目_第2张图片

3. 选择vue

Vite构建Vue3项目_第3张图片

4. 选择typescript

Vite构建Vue3项目_第4张图片

5. 进入新建的项目

Vite构建Vue3项目_第5张图片

  • cd vue3-ts

Vite构建Vue3项目_第6张图片

6. 安装依赖

  • npm install

Vite构建Vue3项目_第7张图片

7. 运行

  • npm run dev 或者 yarn dev

Vite构建Vue3项目_第8张图片

  • 访问http://localhost:5173/

Vite构建Vue3项目_第9张图片

Vite构建Vue3项目_第10张图片

8. 安装路由

  • yarn add vue-router -S

Vite构建Vue3项目_第11张图片

9. 安装element-plus

  • yarn add element-plus -S

Vite构建Vue3项目_第12张图片

10. 安装自动导入组件插件

  • yarn add unplugin-vue-components -D

Vite构建Vue3项目_第13张图片

11. 安装自动导入api插件

  • yarn add unplugin-auto-import -D

Vite构建Vue3项目_第14张图片

12. 将./src变为@

  • 下载@types/node依赖
npm i -D @types/node
  • vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      },
    ],
    //extensions数组的意思是在import组件的时候自动补全.vue等文件后缀
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

  • tsconfig.json
"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }

13. 安装pinia

  • yarn add pinia -S

Vite构建Vue3项目_第15张图片

你可能感兴趣的:(javascript,vue.js,javascript,前端)