Vue - глубокое погружение, чтобы создать опыт работы с приложением vue

z.png' />

За последний год Vue обновился с 1 до 2, vue-cli становился все более мощным, а Vue объявила об изменении vue-resource на vue-axios. Ниже приводится некоторая полезная информация, когда вы используете Vue для создания приложения. Мы можем обсудить более лучшее решение. :)
(эта статья подойдет тем, кто уже пользуется vue.)

1. О настройке проекта с помощью vue-cli:

С использованием:

vuex, vue-router, vuex, karma или jest (зависит от вашей версии vue-cli), nightwatch (я предпочитаю cypress).

Структура (в папке src):

• компоненты (компоненты здесь могут работать сами по себе даже вне этого проекта)
• общие (компоненты проекта Gloabal, такие как верхний колонтитул, нижний колонтитул и т. д.)
• страниц (вы можете добавить дополнительную папку подстраницы и подкомпонент внутри большей страницы.)
• store (Используйте папку модуля для категоризации вашего состояния.)
• api (о некоторых настройках асинхронных запросов, здесь я разделяю api и действие.)
• маршрутизатор (vue-router и относительная настройка.)
• js (файл глобального проекта js, например util.js, constants.js… и т. д.)
• стилус / sass / scss / less..etc. (Настройка глобального стиля проекта.)
• рассказы (сборник рассказов)
• локали (vue-i18n)
• миксины
• директива
• …

О псевдониме webpack:

// in webpack.bas.conf.js
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'), // vue-cli default setting
      'styl': resolve('src/stylus'), // for stylus using
      '~assets': resolve('src/assets'), // for js using
      'assets': resolve('src/assets') // for stylus using
    }
  },

Мы можем импортировать файл типа «@ / components / IModal» в js. Как насчет изображения src? Здесь я использую «~ assets / example.png». Почему? Потому что, когда мы пишем стиль в области препроцессора css, параметр псевдонима должен добавлять «~» для использования.

<style lang="stylus" scoped>
    @import '~styl/variables' // Here we have add more "~" to use the alias setting in stylus scope.
    div {
        background-image: url('~assets/select-arrow-double.svg') // Here we have add more "~" to use the alias setting in stylus scope.
    }
</style>

Итак, '~assets': resolve('src/assets') предназначен для js. Тогда мы можем записать ту же настройку в js / css.
Я отделяю ее от всех @ на js, css, img (assets).
Если структура проекта меняется, нам просто нужно изменить настройка псевдонима.

Что случилось? Юнит-тест не работает!

Его очень сложно кратко описать, неважно, в карме (старый vue-cli) или в шутке (новый vue-cli) с настройками вашего веб-пакета. Вы можете столкнуться с некоторыми проблемами, такими как es6, библиотека импорта, которая использует es6, игнорирует препроцессор css, img… и т. Д.

// in test/unit/index.js (old vue-cli karama setting ) be careful of the test scope and file.
// ignore api, stylus folder..etc.
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$|(?:api|stylus|stories)(?![^\/]))/)

Добавить сборник рассказов

На данный момент использовать сборник рассказов в проекте vue очень просто. Какой-то баг уже исправлен.

npm i -g @storybook/cli
cd my-vue-project
getstorybook
npm run storybook

Вы можете проверить более подробную информацию в моем github:
https://github.com/sky790312/new-website

2. Использование vue для разработки:

Обсудите инициализацию и изменение данных:

Вы можете использовать vuex для начальных данных и передать компоненту, вы хотите его изменить, но вы не можете изменить состояние напрямую. Итак, вы должны объявить данные компонента. Сценарий похож на редактирование информации о пользователе, но с совместным использованием состояния пользователя в проекте. Есть какое-то решение:

• Инициируйте значение в beforeMount / mounted / beforeRouterEnder… и т. Д. С помощью vuex для использования. Изменение данных компонента vuex / change зависит от вашего случая. У вас может быть подкомпонент и изменить состояние пользователя в другом компоненте. Если вы используете базу данных реального времени, такую ​​как «firebase», состояние пользователя может измениться не только при редактировании на странице редактирования, но и в любом месте и в любое время. Таким образом, вам может потребоваться больше «часов», чтобы изменить данные вашего компонента и обработать vuex.
• Используйте watch с немедленно, тогда вам не придется писать один и тот же код в «beforeMount» и «watch». (Добавьте дескриптор метода, такой как «handleInit ()», используйте как в beforeMount, так и в «watch».)
• Используйте computed и data. Будьте осторожны, используя «get», чтобы получить состояние vuex, и «set», чтобы вызвать действие и изменить состояние vuex.

Об асинхронных данных:

• Будьте осторожны с жизненным циклом репендора! Самый простой способ - использовать «xxxReady» v-if, чтобы предотвратить отображение субкомпонента, если ваши данные не готовы и вызывают ошибку. Вы должны прояснить поток своего приложения. Когда и что должно быть готово, чтобы предотвратить ошибку рендеринга шаблона.

Невозможно вызвать метод vue в данных компонента:

• Вы можете настроить одни и те же данные vue для v-for. Взглянем:

// html template
    <i-tab :isCentered="false">
      <i-tab-pane
        v-for="iTab in iTabs
        :key="iTab.name"
        :name="iTab.name"
        :to="iTab.to"
        :method="iTab.method">
      </i-tab-pane>
    </i-tab>
    // js
    // this iTabs config can't use directly in vue data, you can use compueted.
    iTabs () {
      const { name = '' } = this.$route.query
      return [{
        name: 'tabA',
        to: `/buildings/${name}`,
        method: () => {
            this.handleTabA()
        }
      }, {
        name: 'tabB',
        to: `/buildings/${name}`,
        method: () => {
          this.handleTabB()
        }
      }]

Событие любит кнопки. Мы можем захотеть написать меньше кода с помощью v-for и config в js. Вы можете использовать computed.

Будьте осторожны с vue-i18n, если хотите изменить язык на клиентском сайте:

Если мы сможем изменить язык на клиентском сайте, мы можем столкнуться с некоторыми проблемами при отображении / редактировании и изменении языка. watch ваш язык и установите данные компонента редактирования. Какой-то случай вроде select option. или некоторые данные только что начальные в компоненте mount не в шаблоне.

Если у вас есть какой-то генераторный компонент, то следует справиться с более сложным:

Некоторые компоненты генератора, такие как «IForm», «ITable», вы можете настроить в своем файле vue data / computed. Все, о чем мы говорим, должны быть осторожны!

Mixins - это хорошо, но вы можете не найти метод в компоненте.

Миксины нельзя импортировать, например:

import { 
    toUpperCase,
    sort,
    ...
} from '@/js/utils'
// import and use it to vue method.

Таким образом, может быть сложно отладить, где находится метод. Но все же хорошо использовать миксины data / method. Просто нужно поосторожнее!

Используйте vuex для обработки асинхронных запросов.

Мне нравится использовать vuex для управления всеми асинхронными запросами. Все дескрипторы асинхронных запросов в действии, но не все действия должны обрабатывать асинхронные запросы.

3. О HTML в vue:

Будьте осторожны с html в vue:

Vue html шаблон постоянно обновляется. У нас могут возникнуть проблемы с написанием чего-то вроде user.plan.id в html из компонента или vuex.

// You may fetch some async data. You must make sure when your html template render this line, your object is already define! (user.id may from "undefined" to "some value", but when user.plan is"undefined", user.plan.id will trigger error!)
You can define your data structure fully. Or you can use v-if to make sure your flow and the component will render correct without problem.

Вы можете импортировать какой-либо метод из файла js, например util.js. Если вы хотите использовать его непосредственно в шаблоне vue html, это может вызвать ошибку, потому что при рендеринге vue vue не знает, что это за метод.

<template>
<select>
    <option 
      v-for="country in countriesList" // use it directly may trigger error!
      :key="country.id">
    </option>
    ...
  </select>
</template>
// You can import it and attach it to vue method like:
    import {
      countriesList
    } from '@/util'
    
    methods: {
        countriesList,
        ...

Если он используется часто, вы можете напрямую добавить его в прототип vue.

«V-if» очень прост в использовании, переместите еще две логики в элемент управления js:

<div
    v-if="itemType === 'list' && isPayUser()"
    class="container">
    ...
</div>
// replace this to..
<div
    v-if="shouldShowList()"
    class="container">
    ...
</div>
<div
    :type="itemType === 'list' ? 'list' : 'item'"
    class="container">
    ...
</div>
<div
    :type="getItemType()"
    class="container">
    ...
</div>
// replace this to..

Будьте осторожны при использовании v-if v-else с v-for, v-for execute перед v-if. Не используйте больше HTML-тегов, используйте «шаблон»

// don't use html tag, you can use more template tag
<template v-if="isBrowserSupport">
</template>
...
<template v-else>
</template>

v-if в v-for: https://github.com/vuejs/vue/issues/3106

4. О CSS в vue:

Стиль проекта и стиль компонента

// No matter the component create by yourself, or by library/framework. Component should have itself style even in other projects. This kind of component like modal, dropdown, table, alert, datepicker..etc. If you create your own components. Be careful of mixing the project style into your component. (same to js config)

Настройка глобального стиля проекта

Одно из решений использовать общий стиль в вашем проекте:

// in global stylus setting, you may have variable.stylus, extend,stylus..etc.
// in App.vue, use it without "scoped"
<style lang="stylus">
@import '~styl/index'
</style>
// use "scoped" vue way to have css scoped for all components.
<style lang="stylus" scoped>
@import '~styl/variables'
#app {

Вы можете столкнуться с изменением стиля компонента вне компонента, но он уже отображается с data-xxxx.
Вы можете изменить его, выбрав «›››»:

// in App.vue
<style lang="stylus" scoped>
>>> .i-modal {
    ...
}

Настройка класса

Задайте имя класса напрямую для обычного тега html и используйте js для настройки компонента vue.

// assign it's class name directly to normal html tag.
<button
  class="btn btn-round btn-primary"
  :disabled="isUserExpired()"
  @click="handleEditItem()">
  {{ $t('button.update') }}
</button>
// assign it's class name setting to vue component(If the component create by yourself).
// some plugin maybe control style by js directly
<i-modal
  v-if="exampleModal.options.shouldShow"
  :className="exampleModal.className"
  :options="exampleModal.options">
</i-modal>

Следует ли управлять стилем с помощью js или css?

Сложный способ использования js, легкий для css. Тем не менее, некоторая анимация должна управлять им напрямую.

// control in js
<i-icon
  :name="socialIcon.name"
  :color="socialIcon.color"
  :width="socialIcon.width"
  :height="socialIcon.height">
</i-icon>
// replace this to..
<i-icon
  :name="socialIcon.name"
  :className="socialIcon.className">
</i-icon>
// you may have default icon style, and setting your project style by class.

Переход

Все принципы одинаковы, если анимация сложная или может быть повторно использована даже в сочетании со сложным правилом. Вам следует использовать vue transation. Если вы просто хотите, чтобы через две секунды появилось постепенное исчезновение. Просто используйте css напрямую. Попробуйте использовать js для настройки и управления стилем с помощью css.

// html
<transition :name="animationType">
    <keep-alive>
        <router-view id="view"></router-view>
    </keep-alive>
</transition>
// js
this.animationType = 
    animationType === 1 ?  'slide-left' :
    animationType === 2 ?  'slide-right' :
    animationType === 3 ?  'slide-top' :
    animationType === 4 ?  'slide-bottom' : ''

На официальном сайте vue есть пример преобразования, и вы можете расширить его самостоятельно или просто использовать какую-нибудь библиотеку.

Заключение

Использование vue для разработки приложений - хороший опыт. Vue стал еще мощнее! Я хочу, чтобы vue привлекал больше внимания на любом рабочем месте. Добро пожаловать, чтобы обсудить лучший способ развития проекта vue. Спасибо, что прочитали этот пост. :)

Спасибо