Учебное пособие по Vue3: разрабатывайте небольшие программы с помощью Vue3, вот практический код!

Vue.js Taro
Учебное пособие по Vue3: разрабатывайте небольшие программы с помощью Vue3, вот практический код!

После выпуска Vue 3 я недавно изучал и писал несколько демонстраций и проектов Vue3.Я думал о том, когда новые функции можно использовать в небольших программах.После периода практики я, наконец, составил эту статью.

предисловие

XunXunMiao холоден и одинок, несчастен и несчастен.

После выпуска Vue 3 я недавно изучал и писал несколько демонстраций и проектов Vue 3. Я думал о том, когда я смогу использовать новые функции в апплете?

Поэтому я порылся в небольших программных фреймворках на рынке, таких как uni-app, wepy и mpvue.На данный момент (по состоянию на 5 ноября 2020 г.) я не смог написать совместимый Vue 3, пока не нашел очень неприятный вещи,TaroНа самом деле поддерживает Vue 3.

Сюрприз!

Открыть! спешить спешить

Не говори ерунды, ставь код, сразу все откроем!

Исходный код, представленный в этой статье, был открыт на GitHub.vue3-examplesна складе.

Сначала нужно установить глобально@tarojs/cli:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

Если вы установили его локально@tarojs/cli, а версия 3.x, то вышеуказанную операцию можно пропустить. Но если ваша версия 2.x, вам нужно сначала удалить ее, а затем выполнить установку, описанную выше, удаление следующим образом:

$ npm uninstall -g @tarojs/cli
# 或者
$ yarn global remove @tarojs/cli

При необходимости сделайте и то, и другое.

Вот мой номер версии:

Инициализировать проект

Инициализируйте проект с помощью следующей командной строки:

taro init taro-vue3

Варианты следующие: обратите внимание на предварительную обработку CSS, чтобы выбрать Sass, который позже будет использоваться фреймворком пользовательского интерфейса:

Через некоторое время проект будет инициализирован.

После окончания войдите в проект и выполните команду:

npm run dev:weapp

После успешной компиляции откройте каталог dist с помощью инструмента разработчика WeChat и просмотрите проект, как показано ниже:

Добавлена ​​библиотека пользовательского интерфейса

Для разработки проекта хоть и не обязательно использовать UI-библиотеку, но это лучше, чем ничего. Конечно, чистый почерк также проверяет технические навыки фронтенд-инженера, но длительность проекта никого не ждет, а повышение эффективности разработки стоит на первом месте.

Когда я искал, есть ли у Taro библиотека пользовательского интерфейса, связанная с Vue, я обнаружилtaro-ui-vue, я чувствую себя очень комфортно, и скоро я смогу написать демо.

Позже, когда пакет компонентов был установлен и компонент был введен, компиляция пошла не так, я, вероятно, посмотрел и обнаружил, что он несовместим с Vue 3.

Поэтому я решил временно сдаться, а затемtaro-ui-vueПроблема была поднята в репозитории следующим образом:

Я снова закипаю, есть еще эта штукаtaro-ui-vue3, В этот момент я вдруг хочу быть братьями со своим братом, хахахаха.

Продолжать идти! Можем пройти в проектnpm install taro-ui-vue3Добавляем пакет компонента.По подсказкам официального сайта я перенял метод глобального введения стилей здесь:

// app.js
import { createApp } from 'vue'
import store from './store'

import 'taro-ui-vue3/dist/style/index.scss'

const App = createApp({
  onShow (options) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})

App.use(store)

export default App

Страница используется напрямую путем введения компонентов:

<template>
  <view class="index">
    <NumberDisplay/>
    <NumberSubmit/>
    <AtButton class="add-btn" type='primary'>测试</AtButton>
  </view>
</template>

<script>
import NumberDisplay from '../../components/NumberDisplay.vue'
import NumberSubmit from '../../components/NumberSubmit.vue'
import { AtButton } from 'taro-ui-vue3'
export default {
  name: 'Index',
  components: {
    NumberDisplay,
    NumberSubmit,
    AtButton
  }
}
</script>

<style>
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Как показано ниже:

Дополнительные компоненты для использования, пожалуйста, проверьте самостоятельноtaro-ui-vue3 официальная документация.

Практический случай

Эта статья в основном для Amway, фреймворка, который может писать небольшие программы на синтаксисе Vue 3. Здесь я также практиковался на основе приведенного выше кода и сделал небольшой кейс TodoList:

Исходный код был открыт на GitHub.vue3-examplesНа складе адрес склада:vue3-examples, Этот репозиторий будет время от времени обновлять различные знания, связанные с Vue3.0, и различные советы по интеграции Demo и Vue3. Вы можете обратить на это внимание. Если у вас есть какие-либо предложения, вы можете оставить мне сообщение.

Если не указана перепечатка/источник, все они являются оригинальными автором.Перепечатки приветствуются, но это утверждение должно быть сохранено без согласия автора, а ссылка на исходный текст дается в видном месте на странице статьи. , в противном случае сохраняется право на юридическую ответственность.

Категории