Tag: vue.js

使用明智的手柄与vue js

我正在build立一个应用程序使用快车手柄为服务器端模板。 在客户端，我想使用vue.js. 但是，它们都共享相同的双括号记法{{ variable }} 。 现在，我的vue.jsvariables不显示，因为我的句柄模板重写它。 例如： home.html的： <div id="app"> {{message}} //this will not show up </div> home.js： new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); 不过，如果我在我的服务器端控制器中定义message ： res.render('../views/home', { message: 'message from handlebars' }); 该消息将显示。 所以总之，有没有一种方法可以使用vue.js进行客户端模板，同时仍然使用express-handlebars进行服务器端模板化？ 提前致谢！

没有NodeJS的vue文件？

我想在节点JS之外托pipe我的应用程序，但我想使用.vue文件和可能的npm作为构build系统（如果需要的话）。 有可能吗？ 我不需要任何向后兼容性，如果它在最新的Chrome开发工作，这对我来说是好的。 有没有例子可以做到？ 我试图build立一些webpack模板，但它只能在NodeJS内工作。 在其他服务器上，当我访问放置在.vue文件中的URL时，我得到了404。 看来，他们不能被其他服务器处理。

SyntaxError：意外的标记'const' – 尽pipe我取代了const

我试图导出我的firebase应用程序，所以我可以称之为摩卡testing规范，以及我试图testing的源代码。 我的摩卡testing规格如下所示： import Vue from 'vue' import Edit from '@/components/Edit' import filedata from '../../../static/filedata.js' import submitFile from '../../../helpers/submitFile.js' import firebaseapp from '../../../src/db.js' var db = firebaseapp.database() var storage = firebaseapp.storage() describe('Edit.vue', () => { it('should let me add files without choosing a category', () => { // add files to appear on the homepage var […]

如何将一个vuejs项目部署到heroku

我正在这个项目在本地https://github.com/misterGF/CoPilot工作，但现在，它已经完成，我想推它到heroku。 问题是告诉heroku启动应用程序。 在heroku示例中，演示服务器在从Procfile包含此数据的信息后运行 web: node index.js 但在我的vuejs项目中，没有index.js服务器的内容。 我只有主要的入口点是index.html和procfile不适用于HTML。

如何发布Vue.js组件库？

我正在研究一个包含Vuex模块和用户可以扩展的抽象组件的项目。 我很乐意在NPM上发布这个代码来清理我的代码库，并将其从我的项目中抽离出来，作为一个经过严格testing的模块。 我已经指定了package.json的主文件来加载一个索引，它导入我想要公开的所有东西： https://github.com/stephan-v/vue-search-filters/ 该指数目前包含这一点： import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue'; import Search from './src/store/modules/search'; module.exports = { AbstractFilter, Search }; 为了这个工作，我需要transpile，因为一个babel编译器通常不会transpile从node_modules导入文件（如果我在这里错了，纠正我）。 此外，我可能是一个好主意，这样做可以被不同的系统使用。 如何仅使用Webpack只传输我需要的文件？ 我必须为此创build一个单独的configuration吗？ 这样的configuration是什么样的？ 我知道vue-cli有一个单一文件组件的build命令，但是这有些不同。 任何提示或build议如何transpile这样的东西是值得欢迎的。 编辑 这似乎也是一个好的开始： https://github.com/Akryum/vue-share-components Webpack用户要注意的最重要的事情是，您需要在UMD中传输您的文件，可以通过以下方式进行设置： libraryTarget: 'umd' 这将确保您正在进行Universal Module Definition ，这意味着您的代码可以在不同的环境中工作，如AMD，CommonJS，作为简单的脚本标记等。 除此之外，在webpack中提供外部属性是重要的： externals: {} 在这里，您可以定义哪些库是您的项目用户，但不应将其构build到您的dist文件中。 例如，您不希望将Vue库编译/转译到您的NPM软件包的源代码中。 我会研究一下，到目前为止，最好的select看起来像自己创build一个自定义项目如果我想灵活性和unit testing。 Webpack文档 这也是深入了解如何使用Webpack发布内容的一个有用的页面： https://webpack.js.org/guides/author-libraries/#add-librarytarget

如何通过Vue.js组件（使用Vueify）显示数据？

我无法获得数据显示在我的Vue组件。 我正在使用Vueify，并试图从listings.vue .vue组件加载列表的数组，我不断收到错误。 此外，我不明白如何通过computed方法拉入数据。 任何帮助，将不胜感激。 这是我在控制台中得到的错误： [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. [Vue warn]: $mount() should be called only once. 这是我的app.vue // app.vue <style> .red { color: #f00; } </style> <template> <div class="container"> <div class="listings" v-component="listings" v-repeat="listing"></div> </div> </template> <script> module.exports = { replace: […]

Vueify + Gulp：改进CSS处理

Vue的单文件模板语法为任务运行者创build了一个独特的难题，因为在单个文件中发现了两个单独的pipe道（JS和CSS）。 现在我知道使用Browserify的命令行工具，下面的工作： browserify -t vueify -p [ vueify/plugins/extract-css -o dist/app.css ] -e src/index.js | uglifyjs -o dist/app.js 这将创build两个输出文件： app.css和app.js ，并且在浏览器中加载时，按预期显示我的组件样式 现在我想改进这个输出。 正如您在示例中所看到的，我将生成的JS传递给uglifyjs – 在准备生产时将其uglifyjs 。 但是没有这样的转换应用于CSS。 它没有被缩小，不必要的CSS不被删除，自动前缀不被执行等等。 由于NPM脚本只允许你运行一个单一的命令，在我看来，像我想要的那样，在一个命令行指令中是不可能的。 我需要一个命令来提取CSS和另一个来修改它 – Grunt / Gulp风格。 这让我看到了在我的项目中使用Gulp。 使用Vueify的extract-css插件，我可以将这个CSS转储到文件中，如下所示： browserify('./main.js') .transform('vueify') .plugin('vueify/plugins/extract-css', { out: 'dist/bundle.css' }) .bundle() 这是直接从Vueify的文档 ，虽然他们提到，“也可以是一个可写的stream”，没有提供任何例子，这是什么意思，这个或如何做到这一点。 不过，这是我遇到第一个问题的地方。 这个小小的示例代码没有为我工作： const gulp = require("gulp"); const browserify = require("browserify"); […]