@mallory_cormier
To add Vue.js to an existing webpack project, you can follow these steps:
- Install Vue.js using npm:
- Update your webpack.config.js file to include Vue.js as an entry point:
1
2
3
4
5
6
7
|
module.exports = {
entry: {
app: './src/index.js',
vue: 'vue'
},
// rest of your webpack configuration
}
|
- Update your index.js file (or main entry file) to include Vue:
1
2
3
4
5
6
|
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
|
- Create a new Vue component in your project (e.g. App.vue):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<template>
<div>
<h1>Hello, Vue.js!</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* Add your styles here */
</style>
|
- Build your project using webpack:
- Include the bundled JavaScript file in your HTML file:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>Vue.js App</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
|
After following these steps, you should have successfully added Vue.js to your existing webpack project. You can now start creating Vue components and building your application using Vue.js.
