laravel5.4+vue+element简单搭建的示例代码

发布时间：2020-12-17 02:49:10 所属栏目：百科来源：网络整理

导读：如今laravel来到5.4版本，更方便引入vue了，具体步骤如下： 1.下载laravel5.4,这边是（里面的配置文件都写得差不多了）！ 2.打开package.json 内容如下修改一下修改的地方看清楚哦 lodash的版本改为^4.17.4，否则编译会出错，请注意红色字体 laravel5.4的m

如今laravel来到5.4版本，更方便引入vue了，具体步骤如下：

1.下载laravel5.4,这边是（里面的配置文件都写得差不多了）！

2.打开package.json

内容如下

修改一下

修改的地方看清楚哦

lodash的版本改为^4.17.4，否则编译会出错，请注意红色字体

laravel5.4的mix挺好用，建议大家去看一下，这是地址

3.在根目录运行 cnpm install

注意是cnpm，尤其是windows用户，不然将会报错

4.然后修改resources/assets/js/bootstrap.js

30多行有

代码如下:

把'X-CSRF-TOKEN'这一项改为

代码如下:

否则，不能成功获取csrf

5.修改resources/assets/js/app.js

这里简单测试一下，并没有引入element

require('./bootstrap');

/**

Next,we will create a fresh Vue application instance and attach it to
the page. Then,you may begin adding components to this application
or customize the JavaScript scaffolding to fit your unique needs.
*/

import App from "./components/Example.vue"

const app = new Vue({
el: '#app',render: h => h(App)
});

6.修改resources/views/welcome.blade.php

123

然后运行npm run watch

这就简单搭建成功了

第二种方法，没有用到mix

下图为我动到的文件

1.下载laravel5.4

2.命令行（laravel5.4目录下）：composer install

3.新建.env文件，把.env.example里的内容复制到.env文件中

4.生成key，命令行：PHP artisan key:generate

5.配置文件package.json，内容如下：

6.命令行（没有npm的自行下载）：npm install

7.resources/assets/js下新建App.vue文件，内容如下：

8.resources/assets/js/app.js

require('./bootstrap');
/**

Next,you may begin adding components to this application
or customize the JavaScript scaffolding to fit your unique needs.
*/
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(VueRouter)
Vue.use(ElementUI)

const router = new VueRouter({
routes: [
{ path: '/',component: require('./components/Example.vue') }
]
})

const app = new Vue({
el: '#app',router,template: '',components: { App }
});

9.把resources/view/welcome.blade.php改为：

Hello

10.在主目录下新建gulpfile.js文件，内容：

require('laravel-elixir-vue-2');
/
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean,fluent API for defining some basic Gulp tasks
| for your Laravel application. By default,we are compiling the Sass
| file for our application,as well as publishing vendor resources.
|
/

elixir(mix => {
// Elixir.webpack.config.module.loaders = [];

Elixir.webpack.mergeConfig({
resolveLoader: {
root: path.join(__dirname,'node_modules'),},module: {
loaders: [
{
test: /.css$/,loader: 'style!css'
}
]
}
});

mix.sass('app.scss')
.webpack('app.js')
});

11.命令行（没有gulp,自行下载）：gulp watch

这样就简单的搭建完成了，可以访问了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!