Подключение и использование VUE и VUEX
  • 2019-04-08
  • 11
  • 0

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

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

  • Подключим vue
  • Подключим vuex
  • Разберемся, как использовать vue в верстке
  • Вставим изображения в 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 компонентов

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'
})

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

Исходный код: https://github.com/vedees/webpack-template