Laravel 5.3 Vue 2+元素用户界面+Laravel 5.3启动器
有在Laravel 5.3上安装Element UI经验的任何人 是否有人可以帮助在Laravel 5.3上安装它的步骤?我对它很陌生,不熟悉npm。以下是我迄今为止所做的工作:Laravel 5.3 Vue 2+元素用户界面+Laravel 5.3启动器,laravel-5.3,vuejs2,Laravel 5.3,Vuejs2,有在Laravel 5.3上安装Element UI经验的任何人 是否有人可以帮助在Laravel 5.3上安装它的步骤?我对它很陌生,不熟悉npm。以下是我迄今为止所做的工作: npm update vue npm i element-ui -S package.json { "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDepende
npm update vue
npm i element-ui -S
package.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"
}
}
在我需要使用元素UI的组件中,例如:
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
尝试npm安装-保存开发css加载器和npm安装-保存开发样式加载器我也遇到了这个问题,作为一种解决方法,我从node_modules文件夹复制了css,然后将其直接粘贴到我的项目中 毫无疑问,这与设置某种异常有关,以允许css加载程序解析来自node_模块的css,但我没有时间去处理它
为我工作。你有什么错误吗,你是在使用webpack还是其他东西来构建?@saurabh我想Laravel是在使用webpack。控制台日志上的错误消息很长:未捕获错误:模块解析失败:C:\xampp\htdocs\soyegg\node\u modules\element ui\lib\theme default\index.css意外字符'@'1:0您可能需要适当的加载程序来处理此文件类型。|@字符集UTF-8;。el面包屑:在.el之后。。。。。。。。。。。。。。。。。。。。。。。。。。。。删除10000字,它们似乎是索引中的代码。css@saurabh更新了错误,但是它达到了字数限制,在这里我简化了它。希望它能帮助大家解决这个问题。谢谢。你能从网页中添加css加载器配置吗?在你添加元素ui之前,代码是否正常工作?它应该在哪里?是的,在使用元素ui之前,所有其他代码都可以正常工作,没有错误