欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

laravel5.4+vue+element簡(jiǎn)單搭建的示例代碼

 更新時(shí)間:2017年08月29日 10:55:39   作者:sangjinchao  
本篇文章主要介紹了laravel5.4+vue+element簡(jiǎn)單搭建的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

如今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多行有

復(fù)制代碼 代碼如下:

window.axios.defaults.headers.common = {    'X-CSRF-TOKEN': .......,    'X-Requested-With': 'XMLHttpRequest'};

把'X-CSRF-TOKEN'這一項(xiàng)改為

復(fù)制代碼 代碼如下:

'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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue.js內(nèi)置組件之keep-alive組件使用

    vue.js內(nèi)置組件之keep-alive組件使用

    keep-alive是Vue.js的一個(gè)內(nèi)置組件。這篇文章主要介紹了vue.js內(nèi)置組件之keep-alive組件使用,需要的朋友可以參考下
    2018-07-07
  • el-select組件綁定change事件的踩坑記錄

    el-select組件綁定change事件的踩坑記錄

    這篇文章主要介紹了el-select組件綁定change事件的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue3使用全局函數(shù)或變量的2種常用方式代碼

    Vue3使用全局函數(shù)或變量的2種常用方式代碼

    在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺會(huì)方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下
    2023-09-09
  • 利用Vue實(shí)現(xiàn)卡牌翻轉(zhuǎn)的特效

    利用Vue實(shí)現(xiàn)卡牌翻轉(zhuǎn)的特效

    這篇文章主要介紹了如何利用Vue實(shí)現(xiàn)一個(gè)春節(jié)抽??撁妫捎昧丝ㄅ品D(zhuǎn)的形式。文中的實(shí)現(xiàn)方法講解詳細(xì),快跟隨小編一起學(xué)習(xí)一下吧
    2022-02-02
  • vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案

    vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案

    vite+vue3項(xiàng)目發(fā)布后,瀏覽器上還是舊代碼,沒有及時(shí)更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧
    2024-06-06
  • Vue3+Ts實(shí)現(xiàn)緩存功能的示例代碼

    Vue3+Ts實(shí)現(xiàn)緩存功能的示例代碼

    這篇文章主要為大家詳細(xì)介紹了Vue3+Ts如何實(shí)現(xiàn)緩存,用戶搜索詞本地排名,延遲消費(fèi)或者消息隊(duì)列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下
    2024-03-03
  • vue實(shí)現(xiàn)橫向斜切柱狀圖

    vue實(shí)現(xiàn)橫向斜切柱狀圖

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫向斜切柱狀圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 基于form-data請(qǐng)求格式詳解

    基于form-data請(qǐng)求格式詳解

    今天小編就為大家分享一篇基于form-data請(qǐng)求格式詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • 詳解如何使用webpack在vue項(xiàng)目中寫jsx語法

    詳解如何使用webpack在vue項(xiàng)目中寫jsx語法

    本篇文章主要介紹了詳解如何使用webpack在vue項(xiàng)目中寫jsx語法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • vue如何通過src引用assets中的圖片

    vue如何通過src引用assets中的圖片

    這篇文章主要介紹了vue如何通過src引用assets中的圖片,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03

最新評(píng)論