Build-free Vue development¶

Build-free Vue development is a technique that allows developers to write and run Vue.js applications directly in the browser without a compilation step or build tools like Webpack or Vite^[600-developer__frontend__vue__vue-module.md]. This approach leverages modern browser features to enable a faster workflow for simple applications or demos.

Core Mechanism¶

The primary technical requirement for build-free development is the use of native ES6 Modules. In the HTML entry point (typically index.html), script tags must include the type="module" attribute^[600-developer__frontend__vue__vue-module.md]. This allows the browser to parse and execute JavaScript modules natively, handling imports and exports dynamically.

Because the browser executes the code directly, there is no intermediate compilation process involving tools like Babel^[600-developer__frontend__vue__vue-module.md].

Component Structure¶

Even without a build step, it is possible to maintain a Single File Component (SFC)-like architecture by separating components into individual JavaScript files^[600-developer__frontend__vue__vue-module.md].

Application Entry (`app.js`)¶

The main JavaScript file imports the component logic and initializes the Vue instance^[600-developer__frontend__vue__vue-module.md].

import SingleFileComponent from './SingleFileComponent.js';

new Vue({
  el: '#app',
  components: {
    SingleFileComponent
  }
});

Component Definition¶

Individual components can be defined in separate files and exported as default objects^[600-developer__frontend__vue__vue-module.md]. These objects define the component's template, data, and logic.

export default {
  template: `
    <div>
     <h1 id="h1Msg">這個是用 script type=module 產生的 message </h1>
     <p v-text="message" ></p>
    </div>
  `,
  data() {
    return {
      message: 'brower module'
    }
  }
}

HTML Integration¶

The component is rendered in the DOM by including a standard HTML tag matching the component's name within the Vue app's mount element^[600-developer__frontend__vue__vue-module.md].

[[Vue.js]]
[[JavaScript Modules]]
[[Frontend Development]]

Sources¶

600-developer__frontend__vue__vue-module.md