A little template I keep around.
A small setup for Vue JS development with webpack and gulp.
To compile install the dependencies with npm i or yarn install
and then compile with gulp.
Last active
February 25, 2023 15:27
-
-
Save adinan-cenci/aaecc684ad11dcb8ce2b12d6e7972eb2 to your computer and use it in GitHub Desktop.
Vue + Webpack + Gulp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| export default { | |
| data() { | |
| return { | |
| theTruth: 'Vue used to be way easier to get into, now it is as complicated as other garbage like angular and react', | |
| } | |
| }, | |
| } | |
| </script> | |
| <template> | |
| <div class="about-vue"> | |
| <h1> | |
| About Vue.js | |
| </h1> | |
| <p> | |
| {{ theTruth }} | |
| </p> | |
| </div> | |
| </template> | |
| <style> | |
| .about-vue p { | |
| text-decoration: underline; | |
| } | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const gulp = require('gulp'); | |
| const rename = require('gulp-rename'); | |
| const webpack = require('webpack'); | |
| const webpackStream = require('webpack-stream'); | |
| const { VueLoaderPlugin } = require('vue-loader'); | |
| async function build() | |
| { | |
| return gulp.src('./main.js') | |
| .pipe(webpackStream({ | |
| mode: 'development', | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.vue$/, | |
| loader: 'vue-loader' | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: [ | |
| 'vue-style-loader', | |
| 'css-loader' | |
| ] | |
| }, | |
| ] | |
| }, | |
| plugins: [ | |
| new VueLoaderPlugin(), | |
| new webpack.DefinePlugin({ | |
| __VUE_OPTIONS_API__: true, | |
| __VUE_PROD_DEVTOOLS__: true | |
| }) | |
| ] | |
| })) | |
| .pipe(rename('bundle.js')) | |
| .pipe(gulp.dest('./')); | |
| } | |
| exports.build = build; | |
| exports.default = gulp.series(build); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <script src="bundle.js"></script> | |
| <title>Document</title> | |
| </head> | |
| <body id="app"> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createApp } from 'vue'; | |
| import App from './App.vue'; | |
| //---------------------------------------- | |
| const app = createApp(App); | |
| //---------------------------------------- | |
| document.addEventListener('DOMContentLoaded', () => | |
| { | |
| app.mount('#app'); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "vue3-webpack-gulp-template", | |
| "version": "0.0.0", | |
| "description": "A minimal template to compile vue with webpack and gulp", | |
| "main": "index.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "Adinan Cenci", | |
| "license": "ISC", | |
| "dependencies": { | |
| "vue": "^3.2.47" | |
| }, | |
| "devDependencies": { | |
| "@vue/compiler-sfc": "^3.2.47", | |
| "css-loader": "^6.7.3", | |
| "gulp": "^4.0.2", | |
| "gulp-rename": "^2.0.0", | |
| "vue-loader": "^17.0.1", | |
| "vue-style-loader": "^4.1.3", | |
| "webpack": "^5.64.1", | |
| "webpack-stream": "^7.0.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment