Готовится проект vite2+vue3+vuex4+typescript4

внешний интерфейс Vue.js
Готовится проект vite2+vue3+vuex4+typescript4

предисловие

Чтобы изучить vite2, ознакомиться с синтаксисом vue3 и иметь возможность использовать его в проекте, я написал фактический шаблон разработки проекта на основе vite2, приветствую всеобщее обсуждение.

адрес

  1. гит-адрес:vite-vue3-template

стек технологий

  1. vite2 + vue3 + vue-router4 + vuex4 + less
  2. ant-design-vue2 (инфраструктура пользовательского интерфейса)
  3. typescript4

Структура каталогов

├── index.html
├── package.json
├── public
│   └── favicon.ico
├── readme.md
├── src
│   ├── App
│   │   ├── index.tsx
│   │   └── index.vue
│   ├── action
│   │   ├── readme.md
│   │   └── test
│   │       ├── index.ts
│   │       └── interface.ts
│   ├── assets
│   │   └── favicon.ico
│   ├── component
│   │   └── Counter
│   │       └── index.tsx
│   ├── hooks
│   │   ├── useModal
│   │   └── useStore
│   │       ├── index.ts
│   │       └── readme.md
│   ├── http
│   │   ├── index.ts
│   │   └── originAxios.ts
│   ├── index.less
│   ├── main.ts
│   ├── pages
│   │   ├── About
│   │   │   ├── index.less
│   │   │   ├── index.tsx
│   │   │   └── index.vue
│   │   └── Home
│   │       ├── index.tsx
│   │       └── index.vue
│   ├── router
│   │   └── index.ts
│   ├── shims-vue.d.ts
│   ├── store
│   │   ├── helper.ts
│   │   ├── index.ts
│   │   └── modules
│   │       └── common.ts
│   └── utils
├── tsconfig.json
├── typings
├── vite.config.js
└── yarn.lock

Функция

  1. Строительство каркаса проекта
  2. пакет ТС
  3. vuex类型封装 （ 极力推荐使用 ）
  4. пакет аксиом
  5. конфигурация прокси
  6. eslint, используйте плагин eslint-config-vue-mkscanner
  7. autoprefixerнастроить
  8. Поддержка синтаксиса шаблона vue и синтаксиса jsx
  9. конфигурация псевдонима

Давайте начнем

Применение

npm run dev

npm run build

Используйте метод шаблона tsx или шаблона

1、请在App/  pages/About pages/Home 自由选择文件，并删除多于文件

2、router/  引入页面文件 .tsx 或.vue 文件

3、src/maint.ts 修改引入App/ 文件为.tsx 还是.vue文件

Установите глобальный стиль библиотеки компонентов vue.

vite.config.js => modifyVars

использование эслинта

1、vscode安装Eslint插件

2、引入eslint-config-vue-mkscanner

3、校验了eslint会自动提示

использование vuex

1. Есть советы по доступу к состоянию, диспетчеризации, геттерам и фиксации 2. Инкапсулированный useStore интегрирован из useStore vuex.

import useStore from 'hooks/useStore';

const { state, dispatch, getters, commit } = useStore();
Подсказка фиксации:

image.png

Геттерс Советы:

image.png

подсказка по отправке:

image.png

подсказка состояния:

image.png

С отличными подсказками управления состоянием vuex эффективность разработки и обслуживания управления состоянием только что упала.Все заметили, что есть также подсказки, когда вы видите полезную нагрузку.Если это полезно для вас, пожалуйста, дайте мне знатьstartБар.

иллюстрировать

В актуальном шаблоне этого проекта еще много несовершенств.Его можно использовать в реальных проектах после небольшой модификации на основе этого шаблона.Если есть проблемы с упаковкой или оптимизацией проекта, пожалуйста, оставьте сообщение для обсуждения, или перейдите на github, чтобы сообщить о проблеме, спасибо.

наконец

Говоря больше, лучше делать то, что нужно практиковать, попробуйте. Не забудьте датьstar, Открытый исходный код не прост.Есть также такие проекты, как mk-better-cli scaffolding для сборки библиотек компонентов в проекте github.https://github.com/mk-site/vite-vue3-template

Категории