amber

amber

FastAdmin Personal Records - Introduction of Vue

Introduction#

Just directly download the package and import it into the project. I saw that there is Bower in the FastAdmin framework, which is a package manager for web development. I'm going to try installing and using it.

Installing Vue with Bower#

  • Since I haven't installed Bower before, I need to install it first with npm install bower.
  • Open the bower.json file in the root directory of the project and add a line following the existing package name and version: "vue": "~2.6.14".
  • After saving, execute bower update.
  • Because the framework has a configuration file .bowerrc, it will automatically download to the specified directory public/assets/libs.

Importing Vue#

  • Modify the content of the file public/assets/js/backend-init.js as follows to import Vue:
  • Execute php think min -m all -r all to compress the JavaScript files, so that debug=false can also be used.
define(['backend'], function (Backend) {
    require.config({
        paths: {
            'layui': '../libs/layui/layui',
            'vue': '../libs/vue/dist/vue.min',
        },
        shim: {
            'layui':{
                deps:['css!../libs/layui/css/layui.css'],
                exports: "layui"
            },
        }
    });
});

Usage#

define(['jquery', 'bootstrap', 'backend','vue'], function ($, undefined, Backend, Vue) {
    var app = new Vue({
        el: '#main',
        created: function (){
            console.log('hello vue')
        }
    })
});
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.