Vue3-使用Vite搭建新项目

1、开始

1.1 搭建新的vite项目

yarn create @vitejs/app

Project name:[AblyProject]
Package name::[AblyProject]
Select a template:vue 选择vue版本，默认vue3

1.2 启动服务

cd AblyProject 进入项目
yarn dev 启动项目
yarn install 安装依赖
进入项目后启动项目，可以看到默认内容

1.3 启动git

此时执行git指令时会发现报错
fatal: not a git repository (or any of the parent directories): .git
我们需要初始化git:git init
之后就可以正常执行git命令

1.4 将代码推至远端仓库

git remote add <name> <url>
git push <name>

2、安装所需依赖

例如：yarn add less 其他依赖按需安装

3、使用vue-router

3.1 安装vue-router

yarn add vue-router@next

3.2 配置router相关文件

3.2.1 新建router/index.js文件

import {createRouter, createWebHashHistory} from "vue-router";
const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(), // 也可以createWebHistory()，不带#
  routes,
})

export default router;

3.2.2 在main.js中引入router/index.js文件

import {createApp} from 'vue'
import App from './App.vue'
import router from './router/index.js'

createApp(App)
  .use(router)
  .mount('#app')

4、引入vant插件

4.1 引入vant v3版本

yarn add vant@next

4.2 全局引入

main.js

import {createApp} from 'vue';
import App from './App.vue';
import router from './router/index.js';
import Vant from 'vant';
import 'vant/lib/index.css';

createApp(App)
  .use(router)
  .use(Vant)
  .mount('#app')

4.3 按需引入

main.js

import {createApp} from 'vue';
import App from './App.vue';
import router from './router/index.js';
import vantUse from './utils/vantUse.js';
createApp(App)
  .use(vantUse)
  .use(router)
  .mount('#app')

utils/vantUse.js

import {
  Button
} from "vant";

export default function (app){
  app.use(Button)
}

5、封装网络请求

5.1 安装axios

yarn add axios

5.2 封装请求

request.js

import axios from 'axios'

axios.defaults.timeout = 20000;
axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_URL;

const tGet = async (url,data)=>{
  return axios.get(url,data)
}

export {
  tGet,
}

5.3 使用

import {tGet} from "../request";

async function getAllGroups(){
  const res = await tGet('aaa/bbb')
  console.log(res)
}

6、配置环境变量

6.1 创建保存环境变量的文件

.env.development 保存测试环境的环境变量

VITE_APP_BASE_URL=https:/xxx-dev.aabbccdd.com/

.env.production 保存正式环境的环境变量

VITE_APP_BASE_URL=https:/xxx-prod.aabbccdd.com/

vite中环境变量名称必须以VITE_为开端

6.2 使用环境变量

import.meta.env.VITE_APP_BASE_URL
在配置/编辑环境变量相关后，需要重新启动项目才会生效

6.3 package.json中区分

  "scripts": {
    "dev": "vite --mode development",
    "prod": "vite --mode production",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "serve": "vite preview"
  },

vue3官网
vite官网
vant v3官网

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~