Подключение и использование VUE и VUEX

В этой статье:

1. Подключим vue
2. Подключим vuex
3. Разберемся, как использовать vue в верстке
4. Вставим изображения в html и css

Webpack обработка .vue файлов

Для обработки файлов с расширением .vue нужно регулярное выражение:

В исходном файлеbuild/webpack.base.conf.js:

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loader: {
      scss: 'vue-style-loader!css-loader!sass-loader'
    }
  }
},

Также в консоли: npm i vue-loader vue-style-loader vue-template-compiler --save-dev

И конечно же подключаем сам vue.js и vuex: npm i vue vuex --save

Плагин VueLoaderPlugin

Один из самых простых плагинов. Настройка VueLoaderPlugin будет выглядеть так: (webpack.base.conf.js)

plugins: [new VueLoaderPlugin()]

И не забываем объявить плагин в webpack.base.conf.js

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

Подключение vue компонентов

Исходный код с прмиером подключения Vue компонентов:

window.Vue = require('vue')
import store from './store'

Vue.component('example-component', require('./components/Example.vue').default)

const app = new Vue({
  data () {
    return {
      component: false,
    }
  },
  store,
  el: '#app'
})

// Example: Without vuex and store
// const app = new Vue({
//   el: '#app'
// })

Исходный код: На гитхабе