Vite搭建项目

1. 初始化项目

1. 在想要创建项目的文件夹打开终端（cmd或Powershell）

2. yarn create vite 回车（或 npm create vite 回车）

注意：一开始用yarn的话就一直都要yarn，不然容易出问题，npm同理，要从一而终-.-，yarn和npm不要混着用

yarn create vite

3. 输入项目名称 回车

4. 选择前端框架（以vue为例） 回车

5. 选择Typescript 回车

6. 项目创建成功

2. 安装依赖并运行项目

1. 进入到项目文件（这里演示的时vscode打开项目文件的情况，你也可以通过终端命令进入），vscode打开项目后，按control+~打开终端

2. 安装项目默认的依赖包：yarn（或者npm i)

yarn

3. 运行项目：yarn run dev（或者npm run dev）

yarn run dev

3. 初始配置

1. 可以看到上图的地址，端口为5173，可以通过配置vite.config.ts来修改端口

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',//解决vite use--host to expose
    port:8080,
    open:true
  }
})

2. 配置vite别名

在vue开发时，我们习惯用@代替src，但是vite默认是不识别vite的，所以需要配置

1-下载@types/node包 ：yarn add @types/node --save-dev（或npm i @types/node --save-dev）

 yarn add @types/node --save-dev

2-配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 引入resolve
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  ...
// 配置resolve
  resolve:{
    alias:[
      {
        find:'@',
        replacement:resolve(__dirname,'src')
      }
    ]
  }

3-配置tsconfig.json （如果创建项目时选的时js，则没有这个文件，可以跳过此配置）

{
  "compilerOptions": {
    "target": "ESNext",
    ...
    "noEmit": true,
    // 配置以下代码
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3. 安装路由：yarn add vue-router（或 npm i vue-router）

1-创建相关文件

• 在src目录下创建view文件夹，在view文件夹里创建home文件夹，在home文件夹里创建home.vue文件

• 在src目录下新建 router 文件夹，在 router 文件夹里新建 index.ts 文件，并对index.ts做如下配置

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component:()=>import('@/view/home/Home.vue')
    }
]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
export default router

2-在main.ts中导入并挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
 
createApp(App).use(router).mount('#app')

3-清空App.vue的文件内容，并复制如下代码

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

4. 安装css预处理器less和less-loader（根据习惯选用less或scss或sass）

yarn add -D less less-loader

5. 安装pinia（共享资源管理，根据项目可以选择pinia或者vuex）

yarn add pinia

根据以上步骤就完成了项目的基本搭建，大家可以再根据需要的UI框架（elementUI、ant-design、vant等），到官网查看指定的安装就配置方法

因为我没用过ant-design，所以打算学着用一下这个

4. ant-design的安装及配置步骤

根据ant官网介绍，实在vite.config.ts中引入并配置unplugin-vue-components

1-安装ant-design-vue组件库

yarn add --save ant-design-vue

2-在main.ts完成全局完整注册

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd).mount('#app');

3-按需加载：安装unplugin-vue-components

yarn add unplugin-vue-components -D

4-按需加载：在vite.config.ts中引入并配置

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
})

根据官方介绍：如果使用的 Vite，你可以使用 unplugin-vue-components 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：

import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib