Meteor.js新手求助：如何基于Meteor.js+Vue.js启动项目及获取文件管理示例

Hey there! As someone who’s worked with Meteor + Vue projects for a while, I totally get how overwhelming the file structure can feel when you’re starting out. Let me break down a standard, clean project structure for you, along with key explanations and quick code examples to get you going.

First, start by initializing an official Meteor + Vue project with this command—it’ll set up a compliant base structure automatically:

meteor create my-vue-meteor-app --vue

Here’s how to organize your code beyond the initial setup:

Core Directories & Their Purpose #

• .meteor/: Meteor’s internal config directory (you rarely need to edit this manually—Meteor manages dependencies, build settings, and environment config here).
• client/: All front-end code that only runs in the browser:
  • client/main.js: Front-end entry point—mount your Vue instance, set up routing, and initialize global plugins here.
  • client/App.vue: Root Vue component, the container for all your app’s pages and components.
  • client/components/: Reusable Vue components (e.g., Button.vue, UserProfileCard.vue) that you’ll use across multiple pages.
  • client/pages/: Page-level components (e.g., Home.vue, Dashboard.vue) mapped to your app’s routes.
  • client/router/: If using Vue Router, store your route config here (e.g., index.js to define path-to-component mappings).
• server/: Back-end logic that only runs on the server:
  • server/main.js: Back-end entry point—initialize Meteor methods, data publications, and database connections here.
  • server/methods/: Store server-side Meteor methods (e.g., userMethods.js for handling user creation or updates).
  • server/publications/: Define data publications to control what database data gets sent to clients (e.g., postPublications.js to publish only user-owned posts).
• imports/: Meteor’s recommended home for modular, shared code (code here won’t auto-load—you’ll import it explicitly):
  • imports/api/: Database collection definitions and shared business logic (e.g., posts/collection.js to define a MongoDB collection schema).
  • imports/utils/: Universal utility functions (e.g., date formatting, data validation) that work both client and server-side.
• public/: Static assets accessible to the browser (e.g., images, fonts, favicons)—you can reference these directly via URLs like /logo.png.
• private/: Server-only private assets (e.g., seed data, sensitive config files)—clients can’t access these directly.

Quick Example Snippets #

Client Entry (client/main.js) #

import { Meteor } from 'meteor/meteor';
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Meteor.startup(() => {
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app');
});

Server Entry (server/main.js) #

import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base';
import '../imports/api/users/collection';
import '../imports/api/users/methods';

Meteor.startup(() => {
  // Example: Create a default admin user if none exists
  if (!Accounts.findUserByUsername('admin')) {
    Accounts.createUser({
      username: 'admin',
      password: 'admin123',
      email: 'admin@example.com'
    });
  }
});

Pro Tips for Maintainability #

• Stick to single-responsibility files: Keep components, methods, and utilities focused on one task each.
• Use imports/ for code you want to control the loading order of (unlike client/ and server/, which auto-load files alphabetically).
• For Vue state management (Vuex), add a client/store/ directory or place it in imports/ui/store/ if you need shared state logic.

内容的提问来源于stack exchange，提问作者Hasibul-