hypejunction / vue-boot
Vue 的 Elgg 引擎包
1.0.0
2019-09-30 16:31 UTC
Requires
- php: >=7.0
- composer/installers: ~1.0
- dev-master
- 1.0.0
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/express-4.18.2
- dev-dependabot/npm_and_yarn/qs-6.5.3
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-and-webpack-cli-1.4.2
- dev-dependabot/npm_and_yarn/eventsource-1.1.1
- dev-dependabot/npm_and_yarn/grunt-1.5.3
- dev-dependabot/npm_and_yarn/url-parse-1.5.10
- dev-dependabot/npm_and_yarn/follow-redirects-1.14.8
- dev-dependabot/npm_and_yarn/ajv-6.12.6
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
- dev-dependabot/npm_and_yarn/ws-6.2.2
- dev-dependabot/npm_and_yarn/dns-packet-1.3.4
- dev-dependabot/npm_and_yarn/browserslist-4.16.6
- dev-dependabot/npm_and_yarn/hosted-git-info-2.8.9
- dev-dependabot/npm_and_yarn/lodash-4.17.21
- dev-dependabot/npm_and_yarn/handlebars-4.7.7
- dev-dependabot/npm_and_yarn/underscore-1.12.1
- dev-dependabot/npm_and_yarn/ssri-6.0.2
- dev-dependabot/npm_and_yarn/y18n-4.0.1
- dev-dependabot/npm_and_yarn/elliptic-6.5.4
- dev-dependabot/npm_and_yarn/http-proxy-1.18.1
- dev-dependabot/npm_and_yarn/websocket-extensions-0.1.4
- dev-dependabot/npm_and_yarn/acorn-6.4.1
This package is auto-updated.
Last update: 2024-09-04 15:45:57 UTC
README
为在 Elgg 中使用 Vue 组件提供了一个通用的引导包。
设置
在您的插件中创建以下文件
package.json
{ "private": true, "scripts": { "build": "npm run production && rm ./views/default/mix-manifest.json && php ../../elgg-cli flush", "production": "npm run components:parse && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "components:parse": "node node_modules/@hypejunction/vue-scanner/cli/scan.js" }, "dependencies": { "cross-env": "^5.2.0", "global": "^4.4.0", "laravel-mix": "^4.1.2", "lodash.camelcase": "^4.3.0", "vue": "^2.6.10", "vue-template-compiler": "^2.6.10" }, "devDependencies": { "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@hypejunction/vue-scanner": "^1.1.3" }, "vue-scanner": { "src": { "components": { "dirs": [ "./src/PLUGIN_NAME/components/" ], "async": false } }, "target": { "js": "./src/PLUGIN_NAME/components.js", "json": "./src/PLUGIN_NAME/components.json" }, "chunks": true, "requestChunks": true, "chunkPrefix": "PLUGIN_NAME/" } }
webpack.mix.js
let mix = require('laravel-mix'); mix.setPublicPath('views/default/') .setResourceRoot('views/default/') .js('src/PLUGIN_NAME/init.js', 'views/default/PLUGIN_NAME/init.js'); mix.webpackConfig({ externals: { elgg: 'elgg', vue: 'vue', }, optimization: { splitChunks: false, }, output: { libraryTarget: 'umd', publicPath: `/mod/PLUGIN_NAME/views/default/`, } });
src/PLUGIN_NAME/init.js
在您的 init.js
中,您可以使用 ES6 导入 Vue,注册您的组件,设置 Vue 扩展等。
import Vue from 'vue'; // Vue.component(); import './components';
上述设置使得使用组件更简单,使用 vue-scanner
可自动为您注册所有组件。您只需在 init.js
中导入 components.js
即可。
然后运行 yarn build
- 这将构建您的组件到 views/default
,这样您就可以在模板中使用它们。
然后您可以将这些组件添加到您插件的视图中
echo \hypeJunction\VueBoot\Vue::instance()->render('MyComponent', [ 'params' => $entity->getParams(), // list all props to pass to the component ], [ 'PLUGIN_NAME/init', // load the init script ]);