laravel5.4+vue+element簡(jiǎn)單搭建的示例代碼
如今laravel來到5.4版本,更方便引入vue了,具體步驟如下:
1.下載laravel5.4,這邊是下載地址(里面的配置文件都寫得差不多了)!
2.打開package.json
內(nèi)容如下
{ "private": true, "scripts": { "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.15.2", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.0", "laravel-mix": "^0.6.0", "lodash": "^4.16.2", "vue": "^2.0.1" } }
修改一下
{ "private": true, "scripts": { "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-en NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.15.3", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.1", "laravel-mix": "^0.8.3", "cross-env": "^3.2.3", "lodash": "^4.17.4", "vue": "^2.1.10", "element-ui": "^1.2.8", "vue-loader": "^11.3.4", "vue-router": "^2.4.0" } }
修改的地方看清楚哦
lodash的版本改為^4.17.4,否則編譯會(huì)出錯(cuò),請(qǐng)注意紅色字體
laravel5.4的mix挺好用,建議大家去看一下,這是地址
3.在根目錄運(yùn)行 cnpm install
注意是cnpm,尤其是windows用戶,不然將會(huì)報(bào)錯(cuò)
4.然后修改resources/assets/js/bootstrap.js
30多行有
window.axios.defaults.headers.common = { 'X-CSRF-TOKEN': ......., 'X-Requested-With': 'XMLHttpRequest'};
把'X-CSRF-TOKEN'這一項(xiàng)改為
'X-CSRF-TOKEN': document.querySelector('meta[name="X-CSRF-TOKEN"]').content,
否則,不能成功獲取csrf
5.修改resources/assets/js/app.js
這里簡(jiǎn)單測(cè)試一下,并沒有引入element
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ 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
<!DOCTYPE html> <html lang="{{ config('app.locale') }}"> <head> <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()}}"> <title>123</title> </head> <body> <div id="app"></div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
然后運(yùn)行npm run watch
這就簡(jiǎn)單搭建成功了
第二種方法,沒有用到mix
下圖為我動(dòng)到的文件
1.下載laravel5.4
2.命令行(laravel5.4目錄下):composer install
3.新建.env文件,把.env.example里的內(nèi)容復(fù)制到.env文件中
4.生成key,命令行:PHP artisan key:generate
5.配置文件package.json,內(nèi)容如下:
{ "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "babel-core": "^6.20.0", "babel-loader": "^6.2.9", "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", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.0", "laravel-mix": "^0.5.0", "lodash": "^4.16.2" }, "dependencies": {} }
6.命令行(沒有npm的自行下載):npm install
7.resources/assets/js下新建App.vue文件,內(nèi)容如下:
<template> <div id="app"> <router-view></router-view> </div> </template>
8.resources/assets/js/app.js
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ 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 './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: '<App/>', components: { App } });
9.把resources/view/welcome.blade.php改為:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello</title> </head> <body> <div id="app"></div> <script src="{{ asset('js/app.js') }}"></script> </body> </html>
10.在主目錄下新建gulpfile.js文件,內(nèi)容:
const elixir = require('laravel-elixir'); const path = require('path'); 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.命令行(沒有g(shù)ulp,自行下載):gulp watch
這樣就簡(jiǎn)單的搭建完成了,可以訪問了!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解Laravel5.6 Passport實(shí)現(xiàn)Api接口認(rèn)證
- 在Laravel5.6中使用Swoole的協(xié)程數(shù)據(jù)庫查詢
- 淺析Laravel5中隊(duì)列的配置及使用
- Laravel5框架自定義錯(cuò)誤頁面配置操作示例
- Laravel5中Cookie的使用詳解
- Laravel5中contracts詳解
- Laravel5權(quán)限管理方法詳解
- Laravel5中防止XSS跨站攻擊的方法
- CKeditor4 字體顏色功能配置方法教程
- 手把手教你 CKEDITOR 4 擴(kuò)展插件制作
- CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】
- Laravel5.6框架使用CKEditor5相關(guān)配置詳解
相關(guān)文章
vue.js內(nèi)置組件之keep-alive組件使用
keep-alive是Vue.js的一個(gè)內(nèi)置組件。這篇文章主要介紹了vue.js內(nèi)置組件之keep-alive組件使用,需要的朋友可以參考下2018-07-07利用Vue實(shí)現(xiàn)卡牌翻轉(zhuǎn)的特效
這篇文章主要介紹了如何利用Vue實(shí)現(xiàn)一個(gè)春節(jié)抽??撁妫捎昧丝ㄅ品D(zhuǎn)的形式。文中的實(shí)現(xiàn)方法講解詳細(xì),快跟隨小編一起學(xué)習(xí)一下吧2022-02-02vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項(xiàng)目發(fā)布后,瀏覽器上還是舊代碼,沒有及時(shí)更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06詳解如何使用webpack在vue項(xiàng)目中寫jsx語法
本篇文章主要介紹了詳解如何使用webpack在vue項(xiàng)目中寫jsx語法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11