Vite+Vue3+Pinia+pnpm项目开发快速入门

z止于至善

已于 2023-03-15 18:42:31 修改

阅读量3.5k

点赞数 3

分类专栏： Vue.js 前端架构 Vite 文章标签： vue.js vite pinia pnpm element-plus

于 2022-08-02 17:13:46 首次发布

本文链接：https://blog.csdn.net/qq_16525279/article/details/126123273

版权

Vue.js 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端架构

13 篇文章 0 订阅

订阅专栏

Vite

8 篇文章 0 订阅

订阅专栏

一、Vite简介

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。7 月 13 日，Vite 3.0 正式发布。

Vite 3
去年 2 月，Vite 2 正式发布。从那时起，它的使用率不断增长，每周 npm 下载量超过 100 万次。发布后迅速形成了庞大的生态系统。Vite 正在推动 Web 框架的新一轮创新竞赛。

1、`Vite` 组成

它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

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

2、浏览器支持

开发环境中：Vite 需要在支持原生 ES 模块动态导入的浏览器中使用。
生产环境中：默认支持的浏览器需要支持通过脚本标签来引入原生 ES 模块。可以通过官方插件 @vitejs/plugin-legacy 支持旧浏览器。

二、项目环境搭建

1、搭建项目

根据 Vite 官网介绍，可以使用 npm 或 yarn 或 pnmp 来初始化 Vite 项目。

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

本项目使用 pnpm 构建。

# pnpm
pnpm create vite

然后按照提示操作即可！

还可以通过附加的命令行选项直接指定项目名称和想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行：

# pnpm
pnpm create vite vite3-vue3 -- --template vue

终端执行后：

example
项目目录结构：

mulu

安装依赖，运行后：
在这里插入图片描述
项目初始化完成！

2、集成 `Vue-Router`

Vue-Router 作为大多数项目必不可少的路由工具，已经被大多数的前端项目所使用，Vue-Router 可以让构建单页面应用变得更加的容易。

安装依赖

pnpm i vue-router@4

项目中配置

在 src 目录下创建一个文件夹 router/index.js，然后配置：

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/Login.vue'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
        meta: { title: 'Dashboard', elSvgIcon: 'Fold' }
      }
    ]
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  scrollBehavior: () => ({ top: 0 }),
  routes: constantRoutes
})

export default router

在 `main.js` 中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'

const app = createApp(App)

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

3、集成 `Pinia`

Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。

集成操作可参考之前的文章 Pinia上手——Vue 存储库。

安装依赖

pnpm i pinia

初始化

实现一个登录（login）请求。
创建一个 store/user.js 文件，添加如下代码：

import { loginAction } from '@/api/user'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      username: '',
      avatar: ''
    }
  },

  actions: {
    update_username(username) {
      this.$patch((state) => {
        state.username = username
      })
    },

    login(data) {
      return new Promise((resolve, reject) => {
        loginAction(data).then(res => {
          if (res.code === 200) {
            resolve(null)
          } else {
            reject(res)
          }
        }).catch((error) => {
          reject(error)
        })
      })
    }
  }
})

挂载

在 main.js 中引入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)

app.use(createPinia())
app.mount('#app')

4、集成 `element-plus`

安装依赖

pnpm i element-plus

用法

1、完整引入

如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

2、按需导入

自动导入

首先需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。

pnpm i -D unplugin-vue-components unplugin-auto-import

然后在 vite.config.js 中配置，代码如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

图标库配置

在 main.js 中引入如下代码：

import { createApp } from 'vue'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

5、配置 `alias`

在过去使用vue-cli的时候，一般使用 @ 去引入某些文件，由于 Vite 没有提供类似的配置，所以需要手动对其进行相关配置。

在 vite.config.js 中配置，代码如下：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  // ...
  define: {
    // path库报错修复
    'process.platform': null,
    'process.version': null
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

三、数据请求

1、安装依赖

pnpm i axios

2、`axios` 请求封装

新建src/utils/request.js文件，代码如下：

import axios from 'axios'
import router from '@/router'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { getToken } from '@/utils/auth'
import { useUserStore } from '@/store/user'
let reqConfig
let loadingE

const service = axios.create()

// 请求拦截
service.interceptors.request.use(
  (request) => {
    // token setting
    request.headers['AUTHORIZE_TOKEN'] = getToken()
    /* download file*/
    if (request.isDownLoadFile) {
      request.responseType = 'blob'
    }
    /* upload file*/
    if (request.isUploadFile) {
      request.headers['Content-Type'] = 'multipart/form-data'
    }
    reqConfig = request
    if (request.bfLoading) {
      loadingE = ElLoading.service({
        lock: true,
        text: '数据载入中',
        background: 'rgba(0, 0, 0, 0.1)'
      })
    }
    /*
     *params会拼接到url上
     * */
    if (request.isParams) {
      request.params = request.data
      request.data = {}
    }
    return request
  },
  (err) => {
    Promise.reject(err)
  }
)
// 响应拦截
service.interceptors.response.use(
  (res) => {
    if (reqConfig.afHLoading && loadingE) {
      loadingE.close()
    }
    // 如果是下载文件直接返回
    if (reqConfig.isDownLoadFile) {
      return res
    }
    const { code } = res.data
    const successCode = '0,200,20000'
    if (successCode.includes(code)) {
      return res.data
    } else {
      //返回错误信息
      //注：如果没有return 则，会放回到请求方法中.then ,返回的res为 undefined
      return Promise.reject(res.data)
    }
  },
  (err) => {
    /*http错误处理*/
    if (loadingE) loadingE.close()
    ElMessage({
      message: err,
      type: 'error',
      duration: 2 * 1000
    })
    const errObj = {
      msg: err.toString(),
      reqUrl: reqConfig.baseURL + reqConfig.url,
      params: reqConfig.isParams ? reqConfig.params : reqConfig.data
    }
    return Promise.reject(JSON.stringify(errObj))
  }
)

export function axiosReq({
  url,
  data,
  method,
  isParams,
  bfLoading,
  afHLoading,
  isUploadFile,
  isDownLoadFile,
  baseURL
}) {
  return service({
    url: url,
    method: method ?? 'get',
    data: data ?? {},
    isParams: isParams ?? false,
    bfLoading: bfLoading ?? false,
    afHLoading: afHLoading ?? true,
    isUploadFile: isUploadFile ?? false,
    isDownLoadFile: isDownLoadFile ?? false,
    baseURL: baseURL ?? import.meta.env.VITE_APP_BASE_URL
  })
}

export default request

3、处理请求

然后，在新建src/api/user.js，用来处理具体的网络请求。

import request from '@/utils/request'

export function loginAction(data) {
  return request({
    url: 'xxx',   // 请求地址
    data,
    method: 'post'
  })
}

z止于至善

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
Vite+Vue3+Pinia+pnpm项目开发快速入门

Vite是一种新型前端构建工具，能够显著提升前端开发体验。7 月 13 日，Vite 3.0 正式发布。去年 2 月，Vite 2 正式发布。从那时起，它的使用率不断增长，每周npm下载量超过 100 万次。发布后迅速形成了庞大的生态系统。Vite正在推动 Web 框架的新一轮创新竞赛。...............
复制链接

扫一扫