提示：确保自己的node版本 >= 12.0.0, 在命令行执行node-v就可以查看node版本
一、搭建项目
使用npm： npm init @vitejs/app project-name project-name是项目名
使用yarn：yarn create @vitejs/app project-name project-name是项目名
二、配置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()],
base: "./",
resolve: {
alias: {
// 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
"@": path.resolve(__dirname, "./src"),
"@assets": path.resolve(__dirname, "./src/assets"),
"@components": path.resolve(__dirname, "./src/components"),
"@views": path.resolve(__dirname, "./src/views"),
"@store": path.resolve(__dirname, "./src/store"),
},
},
build: {
outDir: "dist",
},
server: {
https: false, // 是否开启 https
open: false, // 是否自动在浏览器打开
port: 8001, // 端口号
host: "0.0.0.0",
proxy: {
"/api": {
target: "", // 后台接口
changeOrigin: true,
secure: false, // 如果是https接口，需要配置这个参数
// ws: true, //websocket支持
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
// 引入第三方的配置
optimizeDeps: {
include: [],
},
})
三、安装需要的组件库
- 安装vant
- npm: npm i vant@next -S
- yarn: yarn add vant@next 2.安装vue-rouer
- npm init vue-router@next -S
- yarn add vue-router@next 3.安装vuex
- npm init vuex@next -S
- yarn add vuex@next
