Поскольку эпидемия слишком серьезная, я могу оставаться только дома, поэтому я использовал ее несколько дней назад.React+ AntdНаписал виджет эпидемического запроса:Реакт версия, и это можно рассматривать как небольшой вклад в профилактику и борьбу с эпидемией. За последние два дня я увидел, что версия Vue3-Alpha была выпущена до версии v3.0.0-alpha.4, как показано на рисунке:
Vue3: Vue-Composition-Api + TypescriptДавайте реорганизуем наш виджет Epidemic Viewer.
Vue3 простые знания
Прежде чем мы начнем, давайте немного узнаем об этом.
setup
setup()Функции — это новые свойства, предоставляемые специально для компонентов в vue3. Он предоставляет нам унифицированную запись для использования новых функций Composition API vue3. Функция настройки будет вbeforeCreate 之后,created.setup()Функция принимает два параметра,setup(props,context). в:
-
props: получить реквизиты данных
Определите имена параметров, которые текущий компонент позволяет внешнему миру передавать в свойствах:
Получить данные пропса через первый параметр функции настройки:props: { propsName: String }setup(props) { console.log(props.p1) } -
context: Этот объект контекста содержит некоторые полезные свойства. Доступ к этим свойствам должен осуществляться через this в vue 2.x. В vue 3.x доступ к ним осуществляется следующим образом:setup(props, context) { context.attrs context.slots context.parent context.root context.emit context.refs }
reactive()
reactive()Функция принимает простой объект и возвращает реактивный объект данных.
Давайте посмотрим на его основное использование:
// js部分
import { reactive } from '@vue/composition-api'
setup() {
// 创建响应式数据对象
const state = reactive({count: 0})
// setup 函数中将响应式数据对象 return 出去，供 template 使用
return state // 必须return
}
// template里面使用
<p>当前的 count 值为：{{ state.count }}</p>
мы проходимreactiveОбернутый объект после возврата эквивалентен Vue 2.x.data()крючки. Мы можем выполнять с ним такие операции, как двусторонняя привязка.
ref
ref()Функция используется для создания реактивного объекта данных на основе заданного значения.Возвращаемое значение вызова функции ref() — это объект, который содержит только свойство .value:
// js部分
import { ref } from '@vue/composition-api'
setup() {
// 创建响应式数据对象 count，初始值为 0
const count = ref(0)
// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以
console.log(count.value) // 输出 0
// 让 count 的值 +1
count.value++
// 再次打印 count 的值
console.log(count.value) // 输出 1
return {
count,
name: ref('zs')
}
}
// template里面使用
<template>
<p>{{count}}-{{name}}</p>
</template>
начать
Инициализировать проект
Сначала мы используемVue CliСкаффолдинг для инициализации нашего приложения:
Примечание. Использовать синтаксис компонента в стиле класса? Нам нужно выбрать нет для этого элемента, нам не нужен декоратор, мы используем API композиции
Создайте каталог проекта
Затем начните создавать каталог нашего проекта:
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.ts
│ ├── map
│ ├── pages
│ ├── plugins
│ ├── services
│ ├── shims-vue.d.ts
│ └── utils
├── tsconfig.json
├── vue.config.js
├── yarn-error.log
└── yarn.lock
каталог страницы:
├── home
│ └── Home.vue
├── line
│ └── TrendLine.vue
├── map
│ └── Map.vue
├── news
│ └── News.vue
├── pie
│ └── Pie.vue
└── rumor
└── Rumor.vue
Импортировать Vue-Composition-Api
yarn add @vue/composition-api //根目录执行
// main.ts
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
Создать корневой компонент
Мы используем Home в качестве корневого компонента, давайте сначала определим этот компонент:
import { createComponent, onMounted, onUnmounted, reactive } from '@vue/composition-api'
export default createComponent({
name: 'Home',
components: {
},
setup() {
// 生命周期部分
onMounted(() => {
console.log('onMounted...')
console.log(state)
})
onUnmounted(() => {
console.log('onUnmounted...')
})
return {
}
}
})
пройти через
createComponent函数Разработка проекта осуществляется в сочетании с выводом типов, предоставляемым TypeScript.
Определить адаптивные данные
Затем мы должны определить некоторые данные ответа:
export interface HomeState {
newsList?: []
caseList?: []
}
// 在 setup()里面
const origin: HomeState = {
newsList: [],
caseList: []
}
const state = reactive(origin)
асинхронный запрос
Затем нам нужно инициировать асинхронный запрос для инициализации данных.
setup(){
// methods
const getRumorList = async () => {
....
}
const getTrendList = async () => {
....
}
const initData = async () => {
....
}
// 在生命周期里面调用
onMounted(() => {
console.log('onMounted...')
initData()
getRumorList()
getTrendList()
})
}
Импорт и использование компонентов
Предположим, мы хотим импортироватьNewsКомпоненты:
import News from '@/pages/news/News.vue'
// components
components: {
News
},
setup(){
.....
}
// template 中使用
<News :newlist="state.newsList" />
Внутри компонента:
import { createComponent } from '@vue/composition-api'
export default createComponent({
name: 'News',
props: {
newlist: Array
}
})
Развертывание докера
# ncov-vue3 Dockerfile
#指定node镜像对项目进行依赖安装和打包
FROM node:10.16.0 AS builder
# 将容器的工作目录设置为/app(当前目录，如果/app不存在，WORKDIR会创建/app文件夹)
WORKDIR /app
COPY package.json /app/
RUN npm config set registry "https://registry.npm.taobao.org/" \
&& npm install
COPY . /app
RUN npm run build
#指定nginx配置项目，--from=builder 指的是从上一次 build 的结果中提取了编译结果(FROM node:alpine as builder)，即是把刚刚打包生成的dist放进nginx中
FROM nginx
COPY --from=builder app/dist /usr/share/nginx/html/
COPY --from=builder app/nginx.conf /etc/nginx/nginx.conf
#暴露容器80端口
EXPOSE 80
Смотрите здесь, маленькие друзья понимают в основном связанные операции и базовый ввод Vue3, мы также работаем с ним!
Скриншот эффекта
Давайте посмотрим на скриншот эффекта:
Наконец, давай, Ухань⛽️!