Установите Vue 2 в приложении Phoenix 1.4 с Webpack 4

Question

Я хочу установить Vue 2 в новый проект Phoenix 1.4.

Я использую Webpack 4. Документация для Vue не дает особых указаний.

Answer 1

Установить Vue:

cd assets/

npm install vue vue-loader vue-template-compiler --save

В webpack.config.js при необходимости добавьте следующие строки, учитывая существующую конфигурацию:

const { VueLoaderPlugin } = require('vue-loader');

module.exports = (env, options) => ({
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader',
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },  
  },  

Эта конфигурация Webpack должна быть объединена с тем, что уже поставляется с вашим проектом Phoenix.

Создайте папку для ваших компонентов Vue (т. Е. Ваших .vue файлов):

mkdir js/components/

В assets/js/app.js добавить:

import Vue from 'vue';
const files = require.context('./components/', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
document.addEventListener('DOMContentLoaded', function(event) {
  const app = new Vue({
      el: '#app',
  });
});

Обязательно добавьте идентификатор #app к элементу где-то в макете.