搭建Vue3+vite+pinia项目

1、使用vite生成项目

npm create vite projectName（你的项目名）

2、在下一步选择中选择vue。

3、下一步选择语言，可根据你自己的需求选择js还是ts。

4、切换到对应项目目录，npm install 下载当前所需依赖。

5、配置vue路由。

（1）下载依赖。

npm install vue-router

（2）在App.vue中设置routerview。

<script setup>
</script>

<template>
  <router-view />
</template>

<style scoped></style>

（3）在src目录下新建router文件夹，文件夹下新建index.js。

import { createRouter, createWebHistory } from "vue-router";
export const childrenRouterMap = [
  {
    path: "/",
    component: () => import("@/views/h5/home.vue"),
    meta: {
      title: "首页",
    },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: [...childrenRouterMap],
  strict: false,
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

export default router;

（4）main.js中引入router。

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

import router from "./router";

app.use(router).mount("#app");

6、配置pinia。

（1）下载依赖。

npm install pinia 或者 yarn add pinia

（2）在src目录下创建store文件夹，自定义js文件，例如图片的user.js可以用来缓存用户相关的数据（后续可以根据需求自定义不同模块的js文件）。

import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults";
import { defineStore } from "pinia";

export const useUserStore = defineStore(
  "user",
  () => {
    let userInfo = reactive({
      token: "",
      userName: "",
    });
    let currentUserInfo = computed(() => {
      return userInfo;
    });

    // 设置用户信息
    function setUserInfo(data) {
      const { token, name } = data;
      (userInfo.token = token), (userInfo.userName = name);
    }

    function clearUserInfo() {
      (userInfo.token = ""), (userInfo.userName = "");
    }

    return {
      userInfo,
      currentUserInfo,
      setUserInfo,
      clearUserInfo,
    };
  },
  {
    persist: true, // 刷新保留数据
  }
);

（3）main.js中使用。

// 状态
import store from '@/store';
app.use(store)

（4）页面中引入使用即可。

7、配置less，这里注意只需要安装less,不需要像Webpack那样还有安装less-loader，vite已内置。

（1）安装依赖。

npm install less

8、使用element-ui组件库的vue3版本 element-plus

（1）安装依赖。

npm install element-plus

（2）main.js中引入。

// ui库
import ElementPlus from "element-plus";
app.use(ElementPlus);

import * as ElementPlusIconsVue from "@element-plus/icons-vue";

// 注册所有图标
export function setupElIcons(app) {
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
}

9、配置axios，让接口请求更为方便

（1）安装依赖。

npm install axios

（2）在src目录下，创建api文件夹。
可以分别创建各个模块的接口。
（3）在文件中引入我们封装好axios的api文件。
（4）在vite.config.js中配置开发时代理，解决跨域问题。

  server: {
    port: 5550,
    open: true,
    proxy: {
      '/api': {
        target: wrapperEnv(), // 后端接口的域名
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },

到这一步为止，我们的项目已经集成了vue3+vite+vue-router+pinia+less+element-plus+axios，完全可以开始我们的开发工作了~

当然后面工作少不了对代码的缝缝补补啦，比如样式的统一管理，eslint对代码格式的规范，还有全局组件的注册及使用等等~