Vue 2 + Element UI + Стартер Laravel 5.3

Любой, кто имеет опыт установки Element UI на Laravel 5.3.

http://element.eleme.io/#/en-US/component/quickstart

Может ли кто-нибудь помочь с этапами установки на Laravel 5.3? Я новичок в этом и не знаком с npm. Ниже то, что я сделал до сих пор:

npm update vue
npm i element-ui -S

пакет.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-plugin-component": "^0.8.0",
    "bootstrap": "^4.0.0-alpha.5",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-loader": "^9.5.1",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "element-ui": "^1.1.2",
    "toastr": "^2.1.2",
    "vue-html-loader": "^1.2.3",
    "vue-timeago": "^3.1.2",
    "vue2.x-core-image-upload": "^0.9.2"
  }
}

В компоненте, который мне нужен для использования пользовательского интерфейса элемента, например:

Product-show.vue

<template>
  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>

import 'element-ui/lib/theme-default/index.css';
import { Button, Select } from 'element-ui';
  export default {
    components:{
      'el-button': Button,
      'el-select': Select
    },
    data(){
      return{
        product:[],
        productChoiceSelected:{},
        productChoices:[],
        img1:false,
        img2:false,
        img3:false,
        bxslider:{},
        options: [{
          value: 'Option1',
          label: 'Option1'
        }, {
          value: 'Option2',
          label: 'Option2'
        }, {
          value: 'Option3',
          label: 'Option3'
        }, {
          value: 'Option4',
          label: 'Option4'
        }, {
          value: 'Option5',
          label: 'Option5'
        }],
        value: ''
      }
    }
.....
.....
.....
  }
</script>

Это то, что я думаю, что я должен сделать, но, конечно, это не работает для этого новичка. Может кто-нибудь помочь, пожалуйста?

РЕДАКТИРОВАТЬ №1

Ошибка журнала консоли:

    1:1 Uncaught Error: Module parse failed: C:\xampp\htdocs\soyegg\node_modules\element-ui\lib\theme-default\index.css Unexpected character '@' (1:0)
    You may need an appropriate loader to handle this file type.
    | @charset "UTF-8";.el-breadcrumb:after,.el-breadcrumb:before,.el-form-item:after,.el-form-item:before,.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-slider__button,.el-slider__button-wrapper{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.el-alert,.el-dialog,.el-notification,.el-radio__inner,.el-switch__core{box-sizing:border-box}.el-pagination--small .arrow.disabled,.el-table td.is-hidden>*,.el-table th.is-hidden>*{visibility:hidden}.el-breadcrumb:after,.el-button-group:after,.el-form-item:after,.el-form-item__content:after,.el-menu:after,.el-pagination:after,.el-picker-panel__body-wrapper::after,.el-picker-panel__body::after,.el-row:after,.el-tabs__header:after{clear:both}.el-autocomplete__suggestions.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}@font-face{font-family:element-icons;src:url(fonts/element-icons.eot?
........
........
........
........
l-collapse-item.is-active .el-collapse-item__header__arrow{-ms-transform:rotate(90deg);transform:rotate(90deg)}.el-collapse-item__header{height:43px;line-height:43px;padding-left:15px;background-color:#fff;color:#475669;cursor:pointer;border-bottom:1px solid #e0e6ed;font-size:13px}.el-collapse-item__header__arrow{margin-right:8px;transition:transform .3s}.el-collapse-item__wrap{will-change:height;background-color:#f9fafc;transition:height .3s cubic-bezier(.215,.61,.355,1);overflow:hidden;box-sizing:border-box;border-bottom:1px solid #e0e6ed}.el-collapse-item__content{padding:10px 15px;font-size:13px;color:#1f2d3d;line-height:1.769230769230769}
        at eval (eval at <anonymous> (app.js:655), <anonymous>:1:7)
        at Object.<anonymous> (app.js:655)
        at __webpack_require__ (app.js:20)
        at eval (eval at <anonymous> (app.js:187), <anonymous>:1:97)
        at Object.<anonymous> (app.js:187)
        at __webpack_require__ (app.js:20)
        at eval (eval at <anonymous> (app.js:125), <anonymous>:4:19)
        at Object.<anonymous> (app.js:125)
        at __webpack_require__ (app.js:20)
        at eval (eval at <anonymous> (app.js:273), <anonymous>:28:31)
    cdn.fontawesome.com/js/stats.js:1 Font Awesome CDN reporting has been enabled

person warmjaijai    schedule 05.01.2017    source источник
comment
Вы получаете какую-либо ошибку, используете ли вы веб-пакет или что-то еще для сборки?   -  person Saurabh    schedule 05.01.2017
comment
@saurabh Я думаю, что Laravel использует веб-пакет. Сообщение об ошибке в журнале консоли чертовски длинное: Uncaught Error: Module parse failed: C:\xampp\htdocs\soyegg\node_modules\element-ui\lib\theme-default\index.css Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @charset "UTF-8";.el-breadcrumb:after,.el............................ 10000words deleted, they seem to be the codes in index.css   -  person warmjaijai    schedule 05.01.2017
comment
@saurabh обновил ошибку, но она достигла предела слов, здесь я упрощаю. Надеюсь, это поможет всем вам решить проблему. Спасибо.   -  person warmjaijai    schedule 05.01.2017
comment
Можете ли вы добавить конфигурацию загрузчика css из веб-пакета, работал ли код до того, как вы добавили element-ui?   -  person Saurabh    schedule 05.01.2017
comment
где он должен находиться? Да, все остальные коды работают нормально без ошибок перед использованием element-ui   -  person warmjaijai    schedule 05.01.2017
comment
@saurabh это когда-нибудь решалось? Я также получаю сообщение об ошибке Неожиданный символ '@'... - и мой код работал до того, как я добавил element-ui   -  person Skyguard    schedule 17.01.2017
comment
извините, что с тех пор я перестал использовать элемент интерфейса, поэтому этот вопрос остался нерешенным. Надеюсь увидеть кого-то, чтобы ввести, чтобы оживить.   -  person warmjaijai    schedule 18.01.2017
comment
хммм, вы можете изучить эту проблему github.com/webpack/css- загрузчик/проблемы/355. Вы используете вебпак2?   -  person ira    schedule 20.01.2017
comment
@iraklisg Да, правильно, я использую webpack 2   -  person warmjaijai    schedule 25.01.2017
comment
@iraklisg да, но проблема, кажется, остается нерешенной ...   -  person warmjaijai    schedule 25.01.2017
comment
Я действительно ищу кого-то, кто может решить эту проблему, так как я столкнулся с проблемой JS, играя с начальной загрузкой 4 в vue. Пользовательский интерфейс элемента кажется хорошим.   -  person warmjaijai    schedule 25.01.2017


Ответы (2)


Попробуйте npm install --save-dev css-loader и npm install --save-dev style-loader

person Davi Zucas    schedule 31.03.2017

Я тоже столкнулся с этой проблемой, и в качестве обходного пути я скопировал css из папки node_modules, а затем вставил его прямо в свой проект.

Без сомнения, это как-то связано с установкой какого-то исключения, позволяющего css-загрузчику анализировать css из node_modules, но у меня не было времени возиться с этим.

Работал на меня.

person Rymnel    schedule 27.07.2017