Первый опыт Vue3.0+vite+TypeScript

внешний интерфейс

1. Что такое вит

Vite — это инструмент веб-разработки и построения для современных браузеров, который реализует компиляцию по запросу на основе собственной модульной системы ESModule. Упаковка на основе Rollup в производственной среде.

преимущество:

  • Быстрый холодный старт сервера
  • Мгновенная замена горячего модуля (HMR)
  • Настоящая компиляция по запросу

2. Создайте проект с помощью vite

npm init vite-app <project-name>	// 创建项目 
cd <project-name>	// 进入新创建的项目
npm install		// 安装项目依赖
npm i -S typescript	vue-router@next axios	// 集成 TypeScript vue-router axios
npm i -D eslint eslint-plugin-vue	// 集成 eslint sass
npm i sass --save-dev	// 集成css预编译sass
npm run dev		// 运行当前项目

3. Конфигурация проекта

3.1. Настройка vite.config.js

vite.config.jsРоль аналогична роли в предыдущем проекте @vue-cli.vue.config.js

import path from 'path'
module.exports = {
  // 导入别名
  alias: {
    '/@/': path.resolve(__dirname, './src'),
    '/@/': path.resolve(__dirname, './src/views'),
    '/@components/': path.resolve(__dirname, './src/components'),
    '/@utils/': path.resolve(__dirname, './src/utils'),
  },
  // 配置Dep优化行为
  optimizeDeps: {
    include: ["lodash"]
  },
  // 为开发服务器配置自定义代理规则。
  proxy: {
    '/api': {
      target: 'http://rap2.taobao.org:38080/app/mock/237355',
      changeOrigin: true,
      rewrite: (path: string) => path.replace(/^\/api/, '')
    }
  }
  // ... 
}

Ссылка на GitHub

3.2. Интеграция Ant Design в структуру пользовательского интерфейса Vue 2.0

Установите дизайн муравьев Vue (библиотека пользовательского интерфейса поддерживает Vite & Teadncript, следуйте официальной документации для конкретного использования)

npm install ant-design-vue --save ( yarn add ant-design-vue )

Данные, необходимые для загрузки необходимых компонентов пользовательского интерфейса

npm install -D babel-plugin-import

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

Муравей Дизайн официального сайта Vue

3.3. Настройка маршрутизатора

В каталоге src создайте новыйrouterпапку и создать внутри папкиindex.js

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

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: import('/@views/Home'),
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('/@views/User'),
  },
];

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

export default router;

использовать ссылку

3.4 Создайте новую страницу jsx

В каталоге src создайте новыйviewsпапку и создать внутри папкиHome.jsx User.jsx

** HomePage **

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const msg='hello Home'
    return () => (
      <>
        <h1>Home</h1>
        <h1>{msg}</h1>
      </>
    );
  }
});

** UserPage **

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'User',
  setup() {
    const msg='hello 用户中心'
    return () => (
      <>
        <h1>User</h1>
        <h1>{msg}</h1>
      </>
    );
  }
});

Использование JSX в Vue 3.0

3.5. main.ts

Внедрить router и ant-design-vue в main

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

createApp(App).use(router).use(Antd).mount('#app')
Категории