Articles of vue.js

vueify + node:编译单独的.vue文件

是否有可能以这种方式设置vueify,所以它编译单个.vue文件到相应的.js文件? 例如: input: my-component.vue <template> <div>{{ message }}</div> </template> <script> module.exports = { data() { return { message: 'Hello World', }; }, }; </script> 输出: my-component.js Vue.component('my-component', { template: '<div>{{ message }}</div>', data() { return { message: 'Hello World', }; }, });

你能够在ejs文件中使用vue.js吗?

对不起,我是新来的node.js,并想知道我们是否被允许在一个ejs文件中使用vue.js。

使用Express进行Vue.js路由

我在这里创build了一个组合https://temp-portfolio.herokuapp.com 。 我的问题是,当用户刷新除index.html以外的页面或直接到另一个链接,如https://temp-portfolio.herokuapp.com/projects路由不呈现。 我已经使用Node.js和Express在Heroku按照本指南设置了一切https://medium.com/@sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku- b522d3904bc8 。 我试图重写服务器到这个https://stackoverflow.com/a/44226999/4178637,但应用程序崩溃。 server.js var express = require('express'); var path = require('path'); var serveStatic = require('serve-static'); app = express(); app.use(serveStatic(__dirname)); var port = process.env.PORT || 5000; app.listen(port); console.log('server started '+ port); index.js import Vue from 'vue' import Router from 'vue-router' import Nav from '@/components/Nav' import Home from '@/components/Home' import Projects from […]

在Vue中dynamic改变CSS

有没有办法改变css属性asynchronous? 我有完整的访问node , vue ,它是坐在一个chrome浏览器,我需要更新CSS的文本是不同的页面长,所以浏览器缓慢爬行,而CSS正在申请。 fontSize (newSize) { document.getElementById('text').style.fontSize = `${newSize}px` } 我需要修改它以更好地更新页面,我不知道如何去做。 我在看async模块,但它非常密集,我不是100%确定它提供了我所需要的。

运行npm run build vue后,某些图片没有被加载

我完成了我的Vue应用程序,并运行npm run build部署应用程序。 一切似乎都很好。 但是,我的一些图片将无法运行。 我的四个图像渲染得很好。 但是,这四个图像不在我的img文件夹中。 在控制台上,我得到这个错误: GET file:///C:/static/img/Two.550dff0.jpeg net::ERR_FILE_NOT_FOUND 图像名称是“Two.550dff0.jpeg”,它位于img文件夹中,但应用程序无法访问它。 这是为什么? 而且,对于渲染的四个图像,这些图像不在img文件夹中。 我也无法在dist文件夹中find这四个图像。 这是index.HTML代码: <script type=text/javascript src=static/js/manifest.1f30a815db1d214533a9.js></script> <script type=text/javascript src=static/js/vendor.0757592c5dae8c3165a1.js></script> <script type=text/javascript src=static/js/app.53c259c8c3df1ec9179f.js></script>

我无法在v-for loop |中绑定图像源 vue.js,node.js

我尝试在v-for循环中绑定图像源。 我的数组是由函数填充,而不是静态的。 我的代码看起来像: <section class="section"> <div class="container"> <div v-for="match in matches" class="card"> <img :src="match.avatar" alt=""> </div> </div> </section> 和 created() { ipcRenderer.send('get:all:champions') ipcRenderer.send('summoner:recent:matches:request') ipcRenderer.on('summoner:recent:matches:response', (event, matches) => { matches.splice(-15, 15) // -15, 15 this.matches = matches for (let match in matches) { ipcRenderer.send('matches:champion:avatar:request', { element: match, championId: matches[match].champion }) } ipcRenderer.on('matches:champion:avatar:response', (event, data) => { […]

为什么eslint错误导致网站在vue.js-cli安装后不显示?

我在Windows机器上安装了node.js。 然后我安装了npm i -g vue-cli 。 npm run dev在http:// localhost:8080提出了vue.js-cli站点。 closures并在我的电脑上,当我键入npm run dev ,我得到这个错误: 但是当我安装vuejs-cli的时候,我明确的表示我不想在安装的时候使用eslint。 在我的设置中没有eslint错误: 在我的浏览器中,我看到这个: 否则,我没有改变这些文件,并且在我安装了一次之后它就工作了。 我怎样才能得到这些eslint错误不会发生,并显示的网站更正?

带有JSON输出的平面文件CMS

我试图创build一个简单的网站,平面文件内容pipe理和Vue.js前端。 我希望近似下面的文件结构: app – various vue files and folders – data.json – posts – – post1.md – – post2.md 会有某种构build过程,将app/posts每个markdown文件,markdown,并将所有内容存储在app/data.json 。 然后,vue.js前端可以导入data.json并根据需要使用它来保存各种组件。 我在寻找解决scheme时遇到的问题是,有大量的平面文件CMS,但是它们中很less有人似乎允许您在平面文件的处理和模板的渲染之间进行切换。 我遇到的大多数平面文件CMS都是为了生成html文档的静态网站文件夹结构而devise的。 因为我打算使用带路由的前端框架(我使用的是Vue,但它可能是React,Choo等),所以我需要一个平面文件CMS,它可以轻松地将它从文件夹结构处理的数据转储到一个单一的JSON文件,可以适应作为Vue的数据模型。 我用了很多次Googlesearch。 事实上,尽pipe前端js框架无所不在,事实上回来的结果却是如此之less,这让我怀疑是否有一些显而易见的原因,就是你不会这样build立一个网站,或者是我错过了一些关键术语。 所以,我的问题是: 是否有一个平面文件的CMS,可以让您轻松收集它提取的数据,而不会产生一个完整的静态网站? 如果没有,为什么? 是否是一个文件夹处理完整的降价文件是非常简单的,只需要一个自定义的npm脚本? 有一个显而易见的理由,从平面文件系统生成一个js框架友好的迷你数据库是一个愚蠢的想法?

安装vue-cli时出错

当我运行npm install -g vue-cli时,它不断的抛出这个错误信息: npm ERR! pathC:\ Users \ End User \ AppData \ Roaming \ npm \ node_modules \ vue-cli \ node_modules \ nan \ package.json npm ERR! 代码EPERM npm ERR! errno -4048 npm ERR! 系统调用unlink npm ERR! Error:EPERM:operation not permitted,unlink'C:\ Users \ End User \ AppData \ Roaming \ npm \ node_modules \ […]

用两个configuration创build一个webpack.config,但插件相同

我正在开发一个基于vue.js的项目,在那里我将有一个用于pipe理仪表板的SPA和一个公共端的SPA。 我想单独处理这些项目,但是同时build立它们。 (或者这将是很好的东西,如:运行生成 – 公共或–admin(指定要build立哪一个)) 我创build了一个configuration数组,并使用此设置创build输出,但由于某种原因,它不会缩小。 它只有一个configuration。 我试图把插件像插件分开configuration:[..]但没有成功。 webpack.config.js: var path = require('path')var webpack = require('webpack') module.exports = [ { entry: { public : './resources/js/public-spa/main.js', }, output: { path: path.resolve(__dirname, './public/public-spa/dist/'), filename: '[name].build.js', chunkFilename: "public.[name].chunk.js" }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } } […]