Tag: vue.js

Vuejs $ emit在callback中不会触发: 在下面的代码中： export default { props: ['note'], methods: { remove(){ NoteRepo.remove(this.note, (err) => { if (err) { console.log('Should Fire') this.$emit('alerted', { type: 'error', message: 'Failed to remove note' }); } }) } } } 当调用remove函数时，控制台会logging“Should Fire”，但是$ emit事件不会被触发。如果我将$ emit放在callback之外，如下所示： export default { props: ['note'], methods: { remove(){ this.$emit('alerted', { type: 'error', message: 'Failed to remove note' […]

Webpack：如何将电子应用程序中的用户界面从业务逻辑中分离出来？: 我在Electron + Vue 2 + Webpack 2 + Bootstrap 3上开发了一个桌面应用程序。目前，所有的JS代码都被webpack捆绑在一起，并作为单个文件包含在HTML中。的index.html <body> <script src="bundle.js"></script> </body> 一切正常，但… 主要的缺点是bundle.js大小太大了。虽然，我用Webpack CommonsChunkPlugin将bundle.js拆分为app.js （我的代码）和vendor.js（第三方库），但我仍然觉得有些问题。在Electron中，不需要将所有的东西捆绑在一起，因为文件不会通过networking传输。但在另一方面，我需要Webpack来编译Vue模板。所以，我想find一种将UI与业务逻辑分开的方法： <body> <!– UI: views, controllers, etc / bundled by webpack –> <script src="app.js"></script> <script src="vendor.js"></script> <!– business logic : models, services, DAO etc / NOT bundled by webpack –> <script src="logic.js"></script> […]

node.js和chrome浏览器之间console.log的奇数输出: 我正在玩节点的crypt() ，只是想要确认Diffie-Hillman在节点（'Alice'）和Chrome客户端（'Bob'）之间共享的秘密是匹配的。我把socket.io上的公共密钥发送给对方，并且在他们各自的控制台输出中使用base64编码正确输出，但是当我输出共享密钥时，节点的控制台显示正确，但是Chrome的控制台给了我一串数字。有什么想法吗？节点的代码： var Alice = crypto.getDiffieHellman(group); Alice.generateKeys('base64'); console.log("receiving Bob's public key from browser"); var BobsPublicKey = message.data; console.log(BobsPublicKey); console.log("sending Alice's public key to browser"); var AlicesPublicKey = Alice.getPublicKey('base64'); console.log(AlicesPublicKey); client.emit('message', AlicesPublicKey); // compute shared secret var AlicesSharedSecret = Alice.computeSecret(BobsPublicKey, 'base64', 'base64'); console.log("Alice's shared secret:"); console.log(AlicesSharedSecret); 节点的控制台输出（为简洁起见，缩写）： receiving Bob's public key from browser […]

带有vuejs和nodejs的Google oauth2: 我开发一个错误记者应用程序。整个项目分为两个不同的项目 – 两个都有不同的package.json文件 – 一个用于客户端，我使用Vue.js 2，一个用Nodejs 8和Express.js构build的服务器部分。这两部分将通过REST API进行通信。要访问信息中心并报告错误，用户必须login他的Google帐户。到目前为止，我已经初始化Vuejs中用户将会触发login事件的结构。我使用a标签，当按下时触发signin()方法：in <a @click="sign">SIGN IN</a> // … export default { methods: { signin() { // start animation let loadingInstance = this.$loading({ fullscreen: true, text: 'Waiting for Google authorization…' }); // opens the Google sign in window // when ready stop the loading loadingInstance.close(); }, […]

Vue在input时searchAjax响应数组: 我试图过滤一个列表，当input到我从Ajax调用中获得的文本框。问题似乎是在Ajax准备好之前应用filter。 HTML： <input type="text" class="form-control" v-model="searchTerm"> <table> <tr v-for="food in filteredItems"> <td>{{ food.name }}</td> <td>{{ food.energy }}</td> </tr> </table> 助手/ index.js： export default { getFoods() { return Vue.http.get('http://localhost:3000/foods/allfoods') .then((response) => { return response.data; }); } } Vue组件： import helpers from '../helpers' export default { name: 'Search', mounted() { helpers.getFoods().then((response) => { this.foodData = response; […]

使用Java和Vue创buildWeb应用程序的更好方法: 我开始进入更多的Web开发。目前我使用Spark Framework和Vue来创build我所做的几个应用程序。虽然这当然有用，但并不理想。这个项目是用Maven（和用于Vue的NPM）构build的，构build过程看起来像这样。 Maven包装了Spark Framework Java应用程序 Maven（使用前端Maven插件）下载node / npm并构buildVue前端 Maven将编译后的资源作为静态资源复制到jar中所以文件系统看起来像这样 / src / main / java（Spark Framework） / src / main / resources（Vue）这导致了一些烦恼。一切都在一个存储库中。理想情况下，我可以为项目的每一层都有一个单独的回购（一个用于Java，一个用于Vue）开发stream程并不理想。如果我只想testing应用程序的Java部分，我仍然花时间编译前端（Vue）一个小问题，但在IDE中工作时，我正在处理深度嵌套的文件夹。任何时候我想编辑前端，我的文件夹结构看起来像/ src / main / resources / project-vue / 这是我使用这个模型的一个项目所以我的问题是：什么是更好的方式来构build我的应用程序？

节点webpack dev服务器在vuejs项目中失败“Can not GET /”: 当我通过webpack运行我的节点开发服务器时，我得到了一个超级无用的消息'Can not GET /'打印到我的浏览器中。我正在构build一个Vuejs应用程序，内容如下： VueJs以这种Vue模板表示的方式构build，其中我的节点脚本与默认命令相同基于Vue Loader的 Webpackconfiguration 路由通过Vue路由器处理我知道这并不是什么大事，但是对于发生这个错误的一个想法（Node？Webpack？Vue Router？）来说，它将指向我正确的方向，我们将不胜感激。

Vue Js：通过vue-loader在组件中使用指令: 我正在使用vue-loader，而且我正面临一个问题，因为我已经在主要的app.js中创build了一个用于组件的指令，但不能在组件中使用该指令。我收到这个消息： vue.common.js?e881:1014 [Vue warn]: Failed to resolve directive: swiper (found in component: <testimonial-comp>) app.js import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, directives: { swiper: { bind: function () { console.log('my directive'); } } } }); App.vue <template lang="jade"> testimonial-comp </template> <script> import TestimonialComp from './components/Testimonial.vue' […]

如何阻止Webpack文件名更改？: 我对webpack很陌生。我已经用vue-clibuild立了样板模板。目前，当我运行npm run build我的文件将编译到/dist/build文件夹，然后拆分成js和css文件夹。我正在制作一个WordPress主题，并且正在从<script>和<style>标签访问这些文件。它的工作原理…但每次我通过npm run build重新编译Webpack时，文件名随机化，在末尾添加一串随机字符（使得不能直接从index.php引用文件）。有没有办法阻止Webpack随机化的文件名？我不想每次编译时都更新我的index.php。或者我正在做这个错误的方式？

如何在VS代码中debuggingvue js应用程序？: 我已经使用vue init webpack my-test3创build了新的vue.js应用程序。在VS代码（v1.7.1），我试图debugging这个应用程序和默认launch.json程序设置为： "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceRoot}/app.js", "cwd": "${workspaceRoot}" }, 但是app.js不存在。我是否需要创buildapp.js ，如果是这样的内容？如果不是，我在哪里点program ？还是我需要做一些完全不同的事情？更新1 好的，所以我试着改变program来指向/src/main.js 。这是现在扔ES 2015错误。 (function (exports, require, module, __filename, __dirname) { import Vue from 'vue' ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:542:28) at Object.Module._extensions..js […]