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

如今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'这一项改为

代码如下:

Meta[name="X-CSRF-TOKEN"]').content,

否则，不能成功获取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

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <Meta name="X-CSRF-TOKEN" content="{{csrf_token()}}"> 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，内容如下：

css-loader": "^0.25.0","element-ui": "^1.1.1","gulp": "^3.9.1","handsontable": "0.27.0","laravel-elixir": "^6.0.0-15","laravel-elixir-vue-2": "^0.2.0","laravel-elixir-webpack-official": "^1.0.10","style-loader": "^0.13.1","vue": "^2.1.4","vue-loader": "^10.0.0","vue-resource": "^1.0.3","vue-router": "^2.1.1","vue-template-compiler": "^2.1.4","axios": "^0.15.2","laravel-mix": "^0.5.0","lodash": "^4.16.2" },"dependencies": {} }

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改为：

<Meta charset="UTF-8"> 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

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

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

原文链接：https://www.f2er.com/vue/36775.html

element element laravel laravel vue vue vue 搭建搭建搭建

上一篇：详解从新建vue项目到引入组件Eleme 下一篇：基于Vue实现后台系统权限控制的示例

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

猜你在找的Vue相关文章