如何将sailsjs与vuetify整合?

问题描述 投票:0回答:1

我试图在我的sails项目中使用vuetify组件,比如表格。我可以让UI工作得很好,但是所有的操作(点击按钮)都不能工作,除非我在该页面禁用parasails。有谁有将sails与vuetify整合的经验?

sails.js vuetify.js
1个回答
0
投票

我按照这个例子。

https:/github.comndabAPvue-sails-example。

但我没有使用vue-bootstrap,而是用Vuetify的vue-cli。

vue create frontend
cd frontend
vue add vuetify

在vue.config.js中,我使用了:

// frontend/vue.config.js
outputDir: "../backend/assets/dependencies",

在后台生成一个控制器路由到index. js:

// config/routes.js
'/*': { action:'index', skipAssets: true, skipRegex: /^\/api\/v1\/.*$/ },

与内容。

// controllers/index.js
module.exports = {
  friendlyName: 'View homepage',
  description: 'Display homepage view',
  exits: {
    success: {
      statusCode: 200,
      description: 'Display the view index page.',
      viewTemplatePath: 'pages/index'
    },
  },
  fn: async function () {
    return {};
  }
};

view layoutslayout.ejs应该内容。

<% /* views/layouts/layout.ejs */ %>
<!DOCTYPE html>
<html>
  <head>
    <title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
    <!-- Viewport mobile tag for sensible mobile support -->
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--STYLES-->
    <!--STYLES END-->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id=app></div>
    <!--TEMPLATES-->
    <!--TEMPLATES END-->
    <%- exposeLocalsToBrowser() %>
    <!--SCRIPTS-->
    <!--SCRIPTS END-->
  </body>
</html>

这是我想出来的比较好的方法。如果有另一种最简单的方法,我想知道,因为我认为这是必要的修改parasails.js直接上传组件或改变注册页面的形式,通过注册组件,而不是使用一个独特的页面,以类似的方式。

© www.soinside.com 2019 - 2024. All rights reserved.