前書き#
プロジェクトにパッケージをダウンロードして導入するだけです。Fastadmin フレームワークには Bower があり、Web 開発向けのパッケージマネージャーです。
試しにインストールしてみます。
参考リンク#
Bower を使って Vue をインストールする#
- 以前 Bower をインストールしていないため、まずは npm install bower を実行します。
- プロジェクトのルートディレクトリにある bower.json ファイルを開き、既存のパッケージ名 + バージョンを参考にして "vue": "~2.6.14" を追加します。
- 保存後、bower update を実行します。
- フレームワークには .bowerrc という設定ファイルがあるため、自動的に public/assets/libs ディレクトリにダウンロードされます。
Vue の導入#
- ファイル public/assets/js/backend-init.js を以下の内容で編集し、Vue を導入します。
- php think min -m all -r all を実行して、js を圧縮し、debug=false の状態でも使用できるようにします。
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"
},
}
});
});
使用方法#
define(['jquery', 'bootstrap', 'backend','vue'], function ($, undefined, Backend, Vue) {
var app = new Vue({
el: '#main',
created: function (){
console.log('hello vue')
}
})
});