webpack vue global variable
Install Vue and webpack in your project using npm:
npm install vue webpack webpack-cli --save-dev
Create a Vue component file, e.g.,
MyComponent.vue
.In the
MyComponent.vue
file, define your component and export it: ```vue
```
- Create a main entry file, e.g.,
main.js
, and import Vue and your component: ```javascript import Vue from 'vue'; import MyComponent from './MyComponent.vue';
Vue.component('my-component', MyComponent);
new Vue({ el: '#app', // Your main Vue instance configuration here }); ```
- Update your HTML file (e.g.,
index.html
) to include the main entry file and define a container with an id of 'app': ```html
```
- Configure webpack to bundle your files. Create a
webpack.config.js
file: ```javascript const path = require('path');
module.exports = { entry: './src/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', }, ], }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', }, }, }; ```
Install necessary loaders and plugins using npm:
npm install vue-loader vue-template-compiler --save-dev
Add a script to your
package.json
to run webpack:json "scripts": { "build": "webpack --mode production" }
Run the build script to generate the bundled files:
npm run build
Open your HTML file in a browser, and your Vue component should be rendered within the specified container.