vite搭建vue3项目

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

1、创建项目

使用npm：

npm init vite@latest

使用yarn：

yarn create vite

使用pnpm：

pnpm create vite

然后按照提示操作即可！

还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。
运行：

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

# npm 7+, 需要额外的双横线：
npm init 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

2、JSX支持

安装插件：@vitejs/plugin-vue-jsx
执行命令：

npm install @vitejs/plugin-vue-jsx --save-dev

vite.config.js更改配置

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), vueJsx()],
    resolve: {
        // 配置路径别名
        alias: {
            '@': path.resolve(__dirname, 'src'),
            'views': '@/views',
            'assets': '@/assets',
            'common': '@/common',
            'components': '@components',
            'api': '@/api',
            'router': '@/router',
            'store': '@/store'
        },
        // 省略文件后缀
        extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
    },
    server: {
        // 修改端口
        port: 5173
    }

})

3、CSS预处理器

由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。

话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

如果是用的是单文件组件，可以通过

4、安装vue-router和vuex

npm install vue-router -S
npm install vuex@next -S

5、安装插件依赖

npm install axios -S
npm install ant-design-vue -S