Bảng điều khiển bootstrap github

Chào các bạn, bài viết này mình sẽ giới thiệu với các bạn kết hợp vue admin template vào project laravel, và mình chọn một admin template khá đẹp là CoreUi CoreUi cung cấp rất nhiều verison khác nhau, không chỉ riêng Vue

• HTML5
• AJAX
• góc cạnhJS
• góc4
• Phản ứng
• Vue

Bạn có thể trải nghiệm nhiệm vụ với link demo https. //coreui. io/demo/Vue_Demo/

Đầu tiên ta cần khởi động dự án laravel, nếu bạn đã có sẵn một dự án laravel rồi thì hãy kết hợp trực tiếp vào dự án của bạn. Chúng ta sẽ làm trên laravel 5. 6 - phiên bản laravel mới nhất hiện tại và ta sẽ khởi động dự án với tên

git clone https://github.com/mrholek/coreui-free-vue-admin-template

composer create-project laravel/laravel laravel-vue-coreui

Sau khi có project laravel, giờ ta sẽ clone mã nguồn của teplate về, bạn có thể thấy link git của template trên trang chủ của nó

git clone https://github.com/mrholek/coreui-free-vue-admin-template

Sau khi sao chép xong, thư mục của mẫu sẽ như sau

Sẽ có 2 bản là đầy đủ và khởi động, ta sẽ sử dụng bản khởi động, về mã nguồn cơ bản của 2 bản là giống nhau, chỉ khác bản đầy đủ thì đầy đủ các thành phần, còn bản khởi động thì chỉ bao gồm các khung mà thôi

Bạn có thể chạy mẫu trực tiếp bằng câu lệnh

git clone https://github.com/mrholek/coreui-free-vue-admin-template

git clone https://github.com/mrholek/coreui-free-vue-admin-template

Để có thể chuyển mẫu đã được sang laravel, chúng ta cũng phải hiểu cấu trúc của mẫu đã có, về mã nguồn cơ bản của mẫu nằm trong thư mục

git clone https://github.com/mrholek/coreui-free-vue-admin-template

• // The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  
  require('../bootstrap');
  
  import Vue from 'vue'
  import BootstrapVue from 'bootstrap-vue'
  import App from './App'
  import router from './router'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
      App
    }
  })
  
  

  0,

  // The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  
  require('../bootstrap');
  
  import Vue from 'vue'
  import BootstrapVue from 'bootstrap-vue'
  import App from './App'
  import router from './router'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
      App
    }
  })
  
  

  1 để cấu hình webpack, css loader

• // The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  
  require('../bootstrap');
  
  import Vue from 'vue'
  import BootstrapVue from 'bootstrap-vue'
  import App from './App'
  import router from './router'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
      App
    }
  })
  
  

  2 used to test

• // The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  
  require('../bootstrap');
  
  import Vue from 'vue'
  import BootstrapVue from 'bootstrap-vue'
  import App from './App'
  import router from './router'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
      App
    }
  })
  
  

  3 bao gồm tệp tài nguyên ảnh, tệp tĩnh

• git clone https://github.com/mrholek/coreui-free-vue-admin-template
  

  9 thư mục chứa toàn bộ mã nguồn của mẫu
• and some number file config check quy ước

Ta chỉ quan tâm đến thư mục

git clone https://github.com/mrholek/coreui-free-vue-admin-template

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

require('../bootstrap');

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

git clone https://github.com/mrholek/coreui-free-vue-admin-template

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

require('../bootstrap');

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

Nhìn qua thì file

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

require('../bootstrap');

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

composer create-project laravel/laravel laravel-vue-coreui

Việc test and check convension chưa cần thiết nên không cần thêm vào, với việc đóng gói các file js, scss thì đã có gói

composer create-project laravel/laravel laravel-vue-coreui

Kết quả là ta không cần quan tâm đến phần devDependencies nữa, chỉ cần quan tâm đến phần

composer create-project laravel/laravel laravel-vue-coreui

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

require('../bootstrap');

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

Thư mục

git clone https://github.com/mrholek/coreui-free-vue-admin-template

Xem qua một mã nguồn giống như, ta sẽ thấy mọi thứ bắt đầu từ tệp

composer create-project laravel/laravel laravel-vue-coreui

Tên các thư mục cũng đã nói lên nhiệm vụ và ý nghĩa của nó nên mình không giải thích được nhiều. Đó chỉ là tập trung vào việc chuyển nó sang dự án laravel, ta sẽ sao chép toàn bộ thư mục src này sang thư dự án laravel

Cụ sẽ copy vào thư mục

composer create-project laravel/laravel laravel-vue-coreui

git clone https://github.com/mrholek/coreui-free-vue-admin-template

composer create-project laravel/laravel laravel-vue-coreui

Red khoanh vùng là mục thư mục

git clone https://github.com/mrholek/coreui-free-vue-admin-template

composer create-project laravel/laravel laravel-vue-coreui

Tiếp theo mở tệp ________ 165 và thêm dòng ________ 282

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

require('../bootstrap');

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

file

git clone https://github.com/mrholek/coreui-free-vue-admin-template

Giờ đến phần cấu hình

composer create-project laravel/laravel laravel-vue-coreui

git clone https://github.com/mrholek/coreui-free-vue-admin-template

composer create-project laravel/laravel laravel-vue-coreui

tập tin

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

require('../bootstrap');

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

git clone https://github.com/mrholek/coreui-free-vue-admin-template

Có 1 lưu ý nhỏ ở file

git clone https://github.com/mrholek/coreui-free-vue-admin-template

git clone https://github.com/mrholek/coreui-free-vue-admin-template

rồi chạy

git clone https://github.com/mrholek/coreui-free-vue-admin-template

git clone https://github.com/mrholek/coreui-free-vue-admin-template

git clone https://github.com/mrholek/coreui-free-vue-admin-template

git clone https://github.com/mrholek/coreui-free-vue-admin-template

git clone https://github.com/mrholek/coreui-free-vue-admin-template

git clone https://github.com/mrholek/coreui-free-vue-admin-template