小编jun*_*ell的帖子

用于WP管理菜单页面的VueJS SPA无法正常工作

VueJS项目由vue-cli使用Webpack模板生成.当我为生产而构建时,我得到一个static包含2个文件夹和1个index.html文件的文件夹.这两个文件夹是css和js.只有一个css文件.但是有3个javascript文件.一app.xxxxxxx.js,manifest.xxxxxxxx.js和vendor.xxxxxxx.js.

我已将生产VueJS项目包装在Node服务器和Apache服务器中.对于Node服务器,我使用了ExpressJS:

...
app.use('/public', express.static(__dirname + '/public'));
app.use('/static', express.static(__dirname + '/public/static'));
app.use('/js', express.static(__dirname + '/public/static/js'));
app.use('/css', express.static(__dirname + '/public/static/css'));
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});
...

Run Code Online (Sandbox Code Playgroud)

SPA适用于Node.

对于Apache服务器,我只是将生成的所有HTML标记转移index.html到a index.php,并确保读取CSS和JS目录.

我正试着用WordPress做同样的事情.但没有运气.

到目前为止,我对WP所做的是我分别使用wp_enqueue_script()和加载了所有JS和CSS文件wp_enqueue_style().但我不能让html标记与CSS和JS文件一起使用.也许这就是问题所在.我错过了什么？

这是index.html从生产中生成后的样子:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>wan_admin3</title>

   <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

<link href=/static/css/app.49437cdf2228a91c12a30d39ae35bb58.css rel=stylesheet>
</head>

<body>

<div id=app></div>
<script type=text/javascript src=/static/js/manifest.989a96caedc89ff03309.js</script>
<script type=text/javascript …

Run Code Online (Sandbox Code Playgroud)

javascript wordpress vue.js

jun*_*ell

2017 07-10

13
推荐指数

1
解决办法

394
查看次数

Browserify中的require.context()等价物

在使用Webpack的项目中,我们可以使用require.context()将一些.js文件导出到一个模块中.所以在一个modules目录中,有几个模块:

modules
-counter.js
-index.js
-mod2.js
somefile.js

Run Code Online (Sandbox Code Playgroud)

这是counter.js和mod2.js模块.的index.js有require.context():

const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach((key) => {
   if (key === './index.js') return
   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules

Run Code Online (Sandbox Code Playgroud)

所以在文件modules夹之外的单独文件中somefile.js,我可以这样做:

import modules from './modules';
new Something({
  modules
});

Run Code Online (Sandbox Code Playgroud)

但require.context()仅限于Webpack.由于Browserify与Webpack相当,是否有一个与此相似的Browserify？

javascript browserify webpack

jun*_*ell

lucky-day

7
推荐指数

1
解决办法

223
查看次数

有没有办法获取 Strapi CMS 内容类型的结构？

内容类型“产品”具有以下字段：

string标题
int数量
string描述
double价格

是否有 API 端点来检索“产品”内容类型的结构或模式而不是获取值？

例如：在端点上localhost:1337/products，响应可以是这样的：

[
  {
    field: "title",
    type: "string",
    other: "col-xs-12, col-5"
  },
  {
    field: "qty",
    type: "int"
  }, 
  {
    field: "description",
    type: "string"
  },
  {
    field: "price",
    type: "double"
  }
]

Run Code Online (Sandbox Code Playgroud)

模式或表的结构而不是实际值发送到哪里？

如果不在 Strapi CMS 中，这在其他无头 CMS（例如 Hasura 和 Sanity）上是否可行？

strapi sanity hasura headless-cms

jun*_*ell

lucky-day

6
推荐指数

1
解决办法

2644
查看次数

HTML5 Canvas .translate和.scale会导致图像上出现锯齿状边缘

这是一个示例:Codepen.只需单击画布中的任意位置(它将具有黑色边框),将绘制一个紫色星.

如你所见,这颗恒星有锯齿状的边缘.它是用.translate和绘制的.scale.要证明.translate并.scale导致锯齿状边缘,请转到第28行(在CodePen JavaScript部分中)并取消注释.然后注释掉第27行.当您单击画布时,不使用.translate和绘制星形.scale,但它没有锯齿状边缘.

该明星是在Adobe Illustrator中绘制的,并以300x300px PNG格式导出.

更新: 我需要PNG顺便使用.不JPG,SVG等等.

我该如何解决这个问题？

到目前为止我尝试过但没有帮助:

在Adobe Illustrator的"常规首选项"中关闭了消除锯齿功能
在Adobe Illustrator的文档栅格和效果设置中关闭了消除锯齿功能
在Illustrator的文档栅格和效果设置中使用屏幕72ppi而不是300ppi(默认)
在星形上放置一个笔划(边框)并使此笔划具有0%的不透明度.我以为它只是边缘/边缘变得锯齿状.因此,我认为中风是"看不见的",canvas只会使0%的不透明度笔划呈锯齿状,因此没有任何东西看起来像是锯齿状.但这也不起作用.
我尝试过使用这些CSS建议"黑客":

canvas { image-rendering: crisp-edges; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ /*image-rendering: pixelated; // Awesome future-browsers */ image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; …

javascript html5 canvas

jun*_*ell

2016 02-02

5
推荐指数

1
解决办法

371
查看次数

是否选择退出Google Play App永久签名？

我只看过有关Google App签名如何运作的指南和文章,它如何让您受益,并且一旦您选择加入,它就是永久性的.但我找不到任何证据表明如果您选择退出一次,您会不会能够在将来使用它吗？

示例:我正在尝试发布应用,但我现在不想选择加入.在将来,我可能会.如果我改变了主意,我能再次选择加入吗？

android keystore android-app-signing app-signing

jun*_*ell

2017 08-26

5
推荐指数

1
解决办法

2119
查看次数

为什么给定日期变为使用新Date()前一天？

给定的日期是2016-02-04.那假设是2016年2月4日.但是当我使用时new Date(),它会返回,Wed Feb 03 2016 16:00:00 GMT-0800 (PST)而不是Thu Feb 04....

以下是我真正做的事情:

var _entryDate = new Date("2016-02-04");
console.log(_entryDate); // Wed Feb 03 2016 16:00:00 GMT-0800 (PST)

Run Code Online (Sandbox Code Playgroud)

为什么会发生这种情况,如何得到我想要的结果,即2月4日而不是前一天呢？

javascript date

jun*_*ell

lucky-day

4
推荐指数

2
解决办法

1598
查看次数

Vue SCSS减轻()

如何lighten( );在VueJS中使用SASS颜色功能？下面的确切代码:

<style lang="scss">
@import "../assets/variables";

.disable-primary {
  lighten( $primary, 10% );
}
</style>

Run Code Online (Sandbox Code Playgroud)

但我在VS代码中遇到编译错误:

Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue- 
loader/lib/style-compiler?{"vue":true,"id":"data-v- 
8dc7cce2","scoped":false,"hasInlineConfig":false}!./node_modules/sass- 
loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue- 
loader/lib/selector.js?type=styles&index=1!./src/components/Home.vue
Module build failed: 
lighten( $color-primary, 10% );
^
  Property "lighten" must be followed by a ':'

Run Code Online (Sandbox Code Playgroud)

sass node-sass vue.js visual-studio-code vuejs2

jun*_*ell

lucky-day

0
推荐指数

1
解决办法

290
查看次数