Создайте проект vite + vue3 за 5 минут, просто и практично!

внешний интерфейс Vite
Создайте проект vite + vue3 за 5 минут, просто и практично!

представлять

В этой статье в основном представлена ​​конструкция проекта vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs. В 2021 году, если вы еще не испытали скорость vite, вам стоит попробовать!

Создать вайт проект

Выполните команду создания

воплощать в жизньviteКоманда создания проекта, в процессе навигации по созданию выберитеvue+tsмодель.

yarn create vite
yarn
yarn dev

Измените файл конфигурации vite

при запуске из командной строкиviteчас,viteАвтоматически разрешает корневой каталог проекта с именемvite.config.jsдокумент. Здесь мы просто устанавливаем@направлениеsrcИ настройки прокси-сервера, которые необходимо сделать при совместной отладке бэкенда во время разработки. Другие параметры конфигурации см. на официальном сайте. (Талант .Vite это .Dev/config/)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 编辑器提示 path 模块找不到，可以yarn add @types/node --dev

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  server: {
    port: 3000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    // 代理
    proxy: {
      '/api': {
        target: 'http://API网关所在域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

Установить vue-маршрутизатор

Выполните команду установки

yarn add vue-router@4

создать файл маршрутизатора

Создайтеsrc/router/index.tsDocument, при создании маршрута рекомендуется использовать ленивую загрузку маршрутизации для оптимизации производительности доступа.

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue') // 建议进行路由懒加载，优化访问性能
  },
  {
    path: '/demo',
    name: 'demo',
    component: () => import('@/views/Demo.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

импортный маршрутизатор

существуетmain.tsиспользовать маршрутизатор в примере vue в файле

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

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

Используйте компонент router-view

Использовать в файле App.vuerouter-viewКомпонент, маршрут, соответствующий компоненту, будет проходить черезrouter-viewКомпонент для визуализации.

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

установить вуекс

Выполните команду установки

yarn add vuex@next

Создать файл магазина

Создайтеsrc/store/index.tsдокумент

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state: typeof defaultState) {
      state.count++
    }
  }
})
export default store;

Представить Vuex.

существуетmain.tsИспользование хранилища в примере vue в файле, чтобы мы могли использовать плагин управления глобальным состоянием в коде страницы.vuexЛа.

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

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

Установить UI-библиотеку ant-design-vue

Выполните команду установки

yarn add ant-design-vue@next

Ссылаясь на ant-design-vue

существуетmain.tsвведен вantdПлагины иcssstyle, используйте плагин в экземпляре vue. Здесь мы используем метод глобального цитирования.Конечно, вы также можете обратиться к официальному сайту для цитирования по требованию. (2 small.ant DV.com/docs/v UE/pcs…

import { createApp } from 'vue'
import Antd from "ant-design-vue";
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import "ant-design-vue/dist/antd.css";

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

Используйте ant-design-vue

После ссылки мы можем использовать ее в компоненте

<template>
  <a-button type="primary">按钮</a-button>
</template>

установить аксиомы

Выполните команду установки

yarn add axios

Создайте публичный метод запроса

Мы помещаем метод служебного класса вutilsпапка, создайте файлsrc/utils/request.ts

import axios from 'axios'

interface ApiConfig {
  body: object;
  data: object
}

async function request(url: string, options: ApiConfig) {
  // 创建 axios 实例
  const service = axios.create({
    baseURL: "", // api base_url
    timeout: 6000 // 请求超时时间
  });
  // 请求拦截
  service.interceptors.request.use(config => {
    // 这里可设置请求头等信息
    if (options && options.body) {
      config.data = options.body;
    }
    return config;
  });
  // 返回拦截
  service.interceptors.response.use(response => {
    // 这里可进行返回数据的格式化等操作
    return response.data;
  });
  return service(url, options);
}
export default request;

Используйте метод запроса

<script>
import request from "@/utils/request.ts"

export default {
  mounted() {
    request('/api/getUser')
  }
}
</script>

Установить фиктивные инструменты

mockДанные моделирования, которые мы выбираемmockjsплагин,viteнеобходимо установить вvite-plugin-mockплагин.

Выполните команду установки

yarn add mockjs
yarn add vite-plugin-mock -D

Справочные плагины в vite.config.ts

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({ supportTs: true })
  ],
})

использовать макет

существуетsrc/mockфайл созданindex.tsФайл, добавьте следующий пример код

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/getList',
    method: 'get',
    response: () => {
      return {
          code: 0,
          message: 'ok',
          data: ['aa', 'bb']
      }
    }
  },
] as MockMethod[]

Так что мы можем сделать это в проектеmockДоступ к данным осуществляется, здесь мы используем метод запроса публичного API, созданный в предыдущей статье.

import request from "@/utils/request.ts"

request('/api/getList').then(res => {
  console.log(res);
})

конец

Ну, на данный момент, простой и практичный проект vite + vue3 был построен.Конечно, инструменты спецификации кода и инструменты модульного тестирования также необходимы во внешнем проекте.Вы можете добавить их в соответствии с вашими потребностями. Попробуйте!

Категории