如何在sailsjs中导入和使用常规的vuejs组件? [英] How to import and use a regular vuejs component in sailsjs?
问题描述
我需要使用 vue 组件包作为带有风帆的 npm 模块.
I need to use a vue component packages as npm module with sails.
什么都试过了:
不能导入到页面实例中，那里不允许导入；
can't import it into the page instance, import not allowed there;
无法将其导入 parasails.registerCompnent，同样的错误；
can't import it into a parasails.registerCompnent, same error;
require 也不起作用；
require also not working;
在主 app.js 中导入它不起作用.
importing it in the main app.js doesn't serve.
到处看，非常令人沮丧，任何地方都没有信息.
Looked everywhere, it is terribly frustrating, no information anywhere.
这是我后悔为我的项目选择风帆的时刻之一.
It is one of the moments I regret choosing sails for my project.
任何人都知道如何在风帆实例页面中使用 npm pachages vue 组件的工作示例?
Anyone having a working example of how to use a npm pachages vue component in a sails instance page?
推荐答案
据我所知，您不能将组件作为包导入.您需要做的是将 .Vue 文件的内容放入 parasails.registerComponent 文件中.使用assests/js/components 文件夹中的现有组件之一作为指南.你可能需要做一些摆弄.
From what I can tell, you can't import in the component as a package. What you need to do is to put the contents of the .Vue file into a parasails.registerComponent file. Use one of the existing components in the assests/js/components folder as a guide. You may need to do some fiddling.
举个例子，我拿了:https://vuejs.org/v2/examples/grid-component.html
我在welcome.ejs中放置了以下内容
I placed the following in welcome.ejs
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{ active: sortKey == key }">
{{key}}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredData">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
</script>
<!-- demo root element -->
<demo-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</demo-grid>
我删除了搜索栏并将过滤器大写以简化此示例(并使其正常工作).
I dropped the search bar and capitalize filter to simplify this example (and to get it working).
我在welcome.page.js 中添加了数据部分
I added to data section in welcome.page.js
index: 0,
entry: 0,
key: 0,
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
{ name: 'Chuck Norris', power: Infinity },
{ name: 'Bruce Lee', power: 9000 },
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 },
],
index、entry 和 key 是模板中使用的变量.它们必须在数据部分中定义，否则会出现未定义的错误.
index, entry and key are variables used in the template. They have to be defined in the data section or you get an undefined error.
然后我创建了 grid.component.js 文件
I then created the grid.component.js file
parasails.registerComponent('demo-grid', {
// ╔═╗╦═╗╔═╗╔═╗╔═╗
// ╠═╝╠╦╝║ ║╠═╝╚═╗
// ╩ ╩╚═╚═╝╩ ╚═╝
props: [
'data',
'columns',
'filterKey',
],
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: function (){
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
// ╦ ╦╔╦╗╔╦╗╦
// ╠═╣ ║ ║║║║
// ╩ ╩ ╩ ╩ ╩╩═╝
template: '#grid-template',
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
beforeMount: function() {
},
mounted: function(){
},
// ^Note that there is no `beforeDestroy()` lifecycle callback in this
// component. This is on purpose, since the timing vs. `leave()` gets tricky.
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
});
请注意 props 部分的格式与原始 .Vue 文件中的格式有何不同.我还删除了过滤器部分.
Notice how the props section formatting is different from in the .Vue file of the original. Also I dropped the filter section.
我把css放在welcome.less文件中
I put the css in the welcome.less file
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}
table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
td {
background-color: #f9f9f9;
}
th, td {
min-width: 120px;
padding: 10px 20px;
}
th.active {
color: #fff;
}
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
我在其他几个组件上取得了成功.有一些试验和错误，我不得不从一些组件中删除一些功能.如果你真的需要让一部分工作，你的项目中有 parasails 源代码，挖掘并添加你需要的能力.然后提交更改.
I've had success with several other components. There is some trial and error and I had to remove some functions from some of the components. If you really need to get a part going, you have the parasails source code in your project, dig in and add the abilities you need. Then submit the changes.
这篇关于如何在sailsjs中导入和使用常规的vuejs组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
