Tag: vue.js

将Dropzone.js与Vue.js一起使用: 我试图在通过Vue.js生成的Rails表单中使用Dropzone.js。我已将dropzone.js文件放在app / assets / javascripts /中。然后我创建了一个单文件components / dropzone.vue组件： export default { data() { return { greeting: ‘blah’ } }, created: function() { var myDropzone = new Dropzone(“div#image-drop”, { url: “/file/post”}); } } 我从主vue文件中调用此组件： import Vue from ‘vue/dist/vue.esm’; import dropzone from ‘components/dropzone’; document.addEventListener(‘DOMContentLoaded’, () => { const listingForm = new Vue({ el: ‘#listing-multistep’, data: […]

无法在我的Rails5应用程序中使用vue组件: 我是vue.js和webpack配置的新手。我可以在app/javascript/packs/somecode.js使用Vue实例。但我无法渲染*.vue文件。如果我将任何*.vue文件添加到app/javascript/packs/components/目录，它说 “模块构建失败：ReferenceError：[BABEL]此错误的常见原因是存在没有相应预设名称的配置选项对象。” 但我没有创建任何新选项。环境 ruby ruby 2.4.3p205 (2017-12-14 revision 61247) [x86_64-darwin16] 轨道 5.1.0 app.vue export default { data: function () { return { message: “Hello Vue!” } } } 我的chrome浏览器中的console.log ERROR in ./node_modules/babel-loader/lib??ref–1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/packs/app.vue?vue&type=script&lang=js Module build failed: ReferenceError: [BABEL] /Users/shiho/dev/appname/app/javascript/packs/app.vue: Unknown option: base.omit. Check out http://babeljs.io/docs/usage/options/ for more information about options. A […]

Vue.js应用程序在开发中工作，但没有使用Rails 5.2.0 / Webpacker在生产中安装模板 – 空白屏幕在控制台中没有错误: 我正在使用Rails 5.2.0和Webpacker gem来部署Vue应用程序。 show.html.erb文件非常简单：然后在我的入口包中，打包/ my_vue_app.js： import TurbolinksAdapter from ‘vue-turbolinks’; import Vue from ‘vue/dist/vue.esm’ Vue.use(TurbolinksAdapter); import MyComponent from ‘../components/my_app/index.vue’ document.addEventListener(‘turbolinks:load’, () => { var element = $(‘[data-behavior=”vue-app”]’); if(!element) { return }; console.log(‘Initializing Vue’); const app = new Vue({ el: element[0], data: { }, components: { MyComponent } }) }) 在开发中，一切都很好。该应用程序已安装并正常运行。但是在生产中，在页面加载和JS运行之后，将从分页中删除，只留下。在控制台中，绝对没有错误。 […]

Rails 5 + Webpacker应用程序部署到Heroku作为空白页面，没有失败: 我有一个简单的Rails 5.1应用程序，它使用Webpacker和Vue.js. 它在webpack-dev-server开发中非常webpack-dev-server 。当我推送到Heroku存储库时，它完成时没有任何错误，也没有任何看似exception的东西。 HTML页面呈现但是应该呈现Vue.js应用程序的元素仅由注释替换： JavaScript包文件确实在那里，我看着它，似乎都是正确的。我尝试使用Node.js Buildpack替换正常的Ruby buildpack，然后使用Ruby Buildpack替换，但无济于事。这是完整的Heroku部署日志： —–> Node.js app detected —–> Creating runtime environment NPM_CONFIG_LOGLEVEL=error NPM_CONFIG_PRODUCTION=true NODE_VERBOSE=false NODE_ENV=production NODE_MODULES_CACHE=true —–> Installing binaries engines.node (package.json): unspecified engines.npm (package.json): unspecified (use default) engines.yarn (package.json): unspecified (use default) Resolving node version 8.x… Downloading and installing node 8.9.4… Using default npm version: […]

将数据从Rails视图传递到webpacker中的VueJS组件: 我正在尝试使用Rails 5.1的新webpacker gem以及VueJS，但无法获取我的erb视图以将数据传递给VueJS组件…… 假设我有一个用户显示视图 # view/users/show.html.erb 而我的javascript： // app/javascript/packs/user-card.js require(“user-card”) // app/javascript/user-card/index.js import Vue from ‘vue/dist/vue.esm’ import UserCard from ‘./components/UserCard’ document.addEventListener(‘DOMContentLoaded’, () => { let element = document.getElementById(“user-card”) let username = element.dataset.username console.log(username); // => “pecpec” const app = new Vue({ el: element, template: ”, components: { UserCard }, data () { return { username […]