Блог

Я настраиваю новый проект Vue с базовыми строительными лесами, используя Vue CLI и Vuetify с встряхиванием дерева, чтобы исключить любые компоненты, которые мне не нужны. На самом деле меня интересуют только файлы поставщиков, в которых есть компоненты Vuetify (предположительно, chunk-vender… файлы в dist / js и dist / css).

HTML в моем проекте включает эти файлы поставщика, но я не понимаю, как зарегистрировать плагин с помощью Vue. Например, в файле JS моего приложения:

 Vue.use(vuetify); // where do I get the vuetify plugin object from?
new Vue({...})
  

Просто для ясности, меня не интересуют файлы app JS / CSS, созданные сборкой npm. Я использую всю эту настройку только для того, чтобы вручную выбирать нужные компоненты Vuetify и создавать необходимые JS / CSS.

Если я включу полноразмерный скрипт Vuetify / css в свой HTML из CDN, например

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.17/vuetify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.17/vuetify.min.css" rel="stylesheet" type="text/css"/>
  

… затем я могу инициализировать Vuetify в своих приложениях JS, например:

 new Vue({
    el: '#my-app',
    vuetify: new Vuetify(),
})
  

… итак, я надеюсь выяснить, есть ли способ инициализировать Vuetify, используя JS-файл поставщика, созданный из сборки Vue CLI, вместо полной версии CDN. Если я попытаюсь использовать тот же метод инициализации, описанный выше, при использовании JS-файла сборки поставщика, я получаю сообщение об ошибке Vuetify is not defined .

На самом деле существует более идиоматичный способ создания библиотеки с помощью Vue CLI. В вашем build NPM-скрипте должен быть указан тип сборки библиотеки и точка входа, которая экспортирует плагин Vue (например, src/plugins/vuetify.js ), где установлены только определенные компоненты Vuetify.

Например, для создания плагина Vue, который устанавливает только VApp (требуется как корневой компонент в Vuetify 2.x), VContainer VBtn , и VTextField компоненты:

1. Выполните эти команды, чтобы сгенерировать проект Vue CLI с параметрами по умолчанию:

    npx @vue/cli create --default my-vuetify
   cd my-vuetify
     

2. Запустите эту команду из корневого каталога проекта, чтобы добавить Vuetify в проект (и выберите предустановку по умолчанию в командной строке):

    npx @vue/cli add vuetify
     

3. Отредактируйте build NPM-скрипт проекта package.json , чтобы создать библиотеку с именем MyVuetify (это будет глобальная переменная, установленная при импорте библиотеки в ваш <script> тег):

    // package.json
   {
     "scripts": {
       // BEFORE:
       "build": "vue-cli-service build",
   
       // AFTER:
       "build": "vue-cli-service build --target lib --name MyVuetify src/plugins/vuetify.js",
     }
   }
     

4. В файле ввода плагина экспортируйте vuetify функцию, которая создает новый Vuetify экземпляр:

    // src/plugins/vuetify.js
   import Vuetify from 'vuetify/lib'
   
   export const vuetify = options => new Vuetify({ ...options })
     

   Также экспортируйте plugin объект, содержащий install функцию, которая определяет только интересующие компоненты Vuetify:

    // src/plugins/vuetify.js
   import { VApp, VContainer, VBtn, VTextField } from 'vuetify/lib'
   
   export const plugin = {
     install(app, options) {
       app.use(Vuetify, {
         components: {
           // Vuetify 2.x requires `VApp` to be the root component, so `VApp`
           // needs to be exported unless you prefer the consumer app provided it
           VApp,
           VContainer,
   
           VBtn,
           VTextField,
         },
         ...options
       })
     }
   }
     

5. Запустите эту команду для сборки библиотеки:

    npm run build
     

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

dist/demo.html Из выходных данных сборки библиотеки загрузите скрипт UMD ( MyVuetify.umd.js ), который задает глобальное имя MyVuetify , содержащее экспорт из выходных данных сборки (определенный ранее на шаге 4). Также загрузите styles ( MyVuetify.css ), который содержит CSS для используемых компонентов Vuetify.

 <script src="./MyVuetify.umd.js"></script>
<link rel="stylesheet" href="./MyVuetify.css">
  

Наконец, создайте <script> блок, который устанавливает плагин MyVuetify.plugin и инициализирует приложение Vue vuetify с помощью MyVuetify.vuetify() :

 <script>
Vue.use(MyVuetify.plugin)

new Vue({
  vuetify: MyVuetify.vuetify(/* Vuetify options (e.g., `theme`) */),
})
</script>
  

Вот полный dist/demo.html :

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="./MyVuetify.umd.js"></script>
<link rel="stylesheet" href="./MyVuetify.css">

<v-app id="app">
  <v-container>
    <form @submit.prevent="greet">
      <v-text-field v-model="name" label="Name"></v-text-field>
      <v-btn type="submit">Greet</v-btn>
    </form>
  </v-container>
</v-app>

<script>
Vue.use(MyVuetify.plugin)

new Vue({
  el: '#app',
  vuetify: MyVuetify.vuetify(),
  data: () => ({
    name: '',
  }),
  methods: {
    greet() {
      alert(`Hi ${this.name.trim() || 'there'}!`)
    }
  }
})
</script>
  

Демонстрация на GitHub