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

前端之家收集整理的这篇文章主要介绍了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

<script src="{{ mix('js/app.js') }}">

然后运行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

<script src="{{ asset('js/app.js') }}">

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

猜你在找的Vue相关文章