Vite2.x создает проект Vue3

Основное содержание этой главы:

1. Создать проект
2. Инициализация проекта (псевдоним пути, предварительная компиляция CSS, ссылка на статический ресурс)
3. Интеграция vue-маршрутизатора
4. Интеграция Vuex

1. Создать проект

Команды для создания проектов с использованием vite2.x

npm init vite 项目名

Я создал здесь vite2-demo-проект и выбрал vue + ts в качестве языка разработки.

2. Инициализация проекта (псевдоним пути, предварительная компиляция CSS, ссылка на статический ресурс)

Настроить псевдоним пути

Добавьте следующий код на страницу vite.config.ts

Если есть красная волнистая линия, вам нужно установить @type/node, чтобы решить эту проблему.

Добавьте следующий код на страницу tsconfig.json

Установить дерзость

npm i -D sass

После завершения установки lang='scss' может использовать scss.

3. Интегрируйте vue-router

Преобразование main.ts

Установите vue-роутер

npm i vue-router@4

Создайте папку маршрутизатора в каталоге src и создайте файл index.ts в этой папке.

Чтобы продемонстрировать эффект, создайте новую папку представления в каталоге src и создайте две страницы: Home.vue и About.vue.

Добавьте код в main.ts

и, наконец, измените страницу App.vue, чтобы увидеть эффект.

4. Интегрируйте Vuex

установить vuex

npm i vuex@next --save 

Создайте новую папку магазина в каталоге src и создайте новую страницу index.ts.

Добавьте следующий код на страницу main.ts

Чтобы облегчить тестирование, измените страницу Home.vue.

Базовый проект завершен.