Articles of vue.js

JavaScript的ES6导入没有名称

我正在运行Webpack,Babel和Vue.js,我想分割我的入口文件。 目前我有一个app.js文件,这是我的应用程序的起点。 我有一些代码我想要放入一个bootstrap.js文件,我想包括在我的主要app.js文件我可以有一个干净的文件开始与Vue和添加组件,因为我去。 一些我想放在我的bootstrap.js文件中的例子: import messagesNL from './translations/nl'; Vue.use(VeeValidate, { locale: 'nl', dictionary: { nl: { messages: messagesNL } } }); window.Vue = Vue; 所以非常多的插件,全局configuration等设置。我觉得这不是你的典型模块,我发现很难创build一个像这个文件的结构模块,所以我基本上在我的app.js文件中使用这个: import bootstrap from './bootstrap'; 不知道这是否会起作用,似乎只是将所有东西都整齐地导入,而不需要像module exports {}那样进行module exports {} 。 现在我分配给这个文件的bootstrapvariables在app.js是未使用的,因为它只是用来请求文件,我的IDE是'greys`类的,让我知道它是未使用的。 有没有另一种语法,这样我就不必为它指定一个名字了? 这种方法可以分割我的文件,还是应该做别的? 我还没有把它放到一个适当的模块中,因为那样它就有了它自己的局部范围,我不能确定如何用所有的插件来设置Vue等等。如果有人有更好的build议,我可以打开它。 干杯。

webpack-dev-server热重新加载不起作用

我的文件结构是: dist css style.css index.html js bundle.js src css style.css index.html js main.js node_modules webpack.config.js package.json 我的webpack.config.js看起来像: module.exports = { entry: './src/js/main.js', output: { path: __dirname, filename: './dist/js/bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel', query: { presets: ['es2015'] } }, { test: /\.vue$/, loader: 'vue' } ] } }; […]

event.path未定义Firefox和vue.js

首先,我正在使用vue-js。 和NodeJs 我有一个与Firefox的问题: 我使用event.path [n] .id和firefox我得到一个错误“event.path undefined” 但它在其他浏览器罚款。 你有什么想法,为什么? 谢谢!

使用明智的手柄与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"); […]