├── .eslintrc.json ├── .gitignore ├── README.md ├── babel.config.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── App.vue ├── components │ └── TheHeader.vue ├── index.html ├── main.js ├── routes │ ├── About.vue │ ├── Home.vue │ └── index.js ├── scss │ └── _variables.scss ├── store │ ├── heropy.js │ └── index.js └── utils │ ├── checkType.js │ └── index.js ├── static ├── favicon.ico └── favicon.png └── webpack.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | "extends": [ 7 | "eslint:recommended", 8 | "plugin:vue/vue3-recommended" 9 | ], 10 | "rules": { 11 | "semi": ["error", "never"], 12 | "quotes": ["error", "single"], 13 | "eol-last": ["error", "always"], 14 | 15 | "vue/html-closing-bracket-newline": ["error", { 16 | "singleline": "never", 17 | "multiline": "never" 18 | }], 19 | "vue/html-self-closing": ["error", { 20 | "html": { 21 | "void": "always", 22 | "normal": "never", 23 | "component": "always" 24 | }, 25 | "svg": "always", 26 | "math": "always" 27 | }], 28 | "vue/comment-directive": "off", 29 | "vue/multi-word-component-names": "off" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | **/dist/ 3 | **/.idea/ 4 | **/.vscode/ 5 | **/.DS_Store/ 6 | **/.cache/ 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue3 Webpack Template 2 | 3 | - Webpack + Babel + PostCSS(SCSS) 4 | - Vue3 + Vuex + Vue-Router 5 | - ESLint 6 | 7 | ## 클론 후 .git 삭제하기 8 | 9 | ```bash 10 | # macOS 11 | rm -rf .git 12 | 13 | # Windows 14 | rmdir /s .git 15 | ``` 16 | 17 | ## 프로젝트 시작 전 패키지 설치 18 | 19 | ```bash 20 | npm i 21 | ``` 22 | 23 | ## 개발 서버 시작 24 | 25 | ```bash 26 | npm run dev 27 | ``` 28 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": [ 4 | ["@babel/plugin-transform-runtime", { 5 | "corejs": 3 6 | }] 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-template", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "webpack serve --mode development", 7 | "build": "webpack --mode production" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "browserslist": [ 13 | "> 1%", 14 | "last 2 versions" 15 | ], 16 | "engineStrict": true, 17 | "engines": { 18 | "node": ">= 14" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.17.10", 22 | "@babel/plugin-transform-runtime": "^7.17.10", 23 | "@babel/preset-env": "^7.17.10", 24 | "@babel/runtime-corejs3": "^7.17.9", 25 | "autoprefixer": "^10.4.5", 26 | "babel-loader": "^8.2.5", 27 | "copy-webpack-plugin": "^10.2.4", 28 | "css-loader": "^6.7.1", 29 | "eslint": "^8.14.0", 30 | "eslint-plugin-vue": "^8.7.1", 31 | "html-webpack-plugin": "^5.5.0", 32 | "postcss": "^8.4.13", 33 | "postcss-loader": "^6.2.1", 34 | "sass": "^1.51.0", 35 | "sass-loader": "^12.6.0", 36 | "vue-loader": "^17.0.0", 37 | "vue-style-loader": "^4.1.3", 38 | "webpack": "^5.72.1", 39 | "webpack-cli": "^4.9.2", 40 | "webpack-dev-server": "^4.9.0" 41 | }, 42 | "dependencies": { 43 | "vue": "^3.2.33", 44 | "vue-router": "^4.0.14", 45 | "vuex": "^4.0.2" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | -------------------------------------------------------------------------------- /src/components/TheHeader.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 22 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from '~/App.vue' 3 | import router from '~/routes' 4 | import store from '~/store' 5 | 6 | const app = createApp(App) 7 | app.use(router) 8 | app.use(store) 9 | app.mount('#app') 10 | -------------------------------------------------------------------------------- /src/routes/About.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/routes/Home.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 15 | -------------------------------------------------------------------------------- /src/routes/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import Home from './Home' 3 | import About from './About' 4 | 5 | export default createRouter({ 6 | history: createWebHistory(), 7 | scrollBehavior: () => ({ top: 0 }), 8 | routes: [ 9 | { 10 | path: '/', 11 | component: Home 12 | }, 13 | { 14 | path: '/about', 15 | component: About 16 | } 17 | ] 18 | }) 19 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $color-primary: royalblue; 2 | -------------------------------------------------------------------------------- /src/store/heropy.js: -------------------------------------------------------------------------------- 1 | export default { 2 | namespaced: true, 3 | state: () => ({ 4 | message: 'Hello HEROPY?!' 5 | }) 6 | } 7 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'vuex' 2 | import heropy from './heropy' 3 | 4 | export default createStore({ 5 | modules: { 6 | heropy 7 | } 8 | }) 9 | -------------------------------------------------------------------------------- /src/utils/checkType.js: -------------------------------------------------------------------------------- 1 | export function checkType(data, type) { 2 | return Object.prototype.toString.call(data).slice(8, -1) === type 3 | } 4 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | export { checkType as default } from './checkType' 2 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ParkYoungWoong/vue3-template/6383cafa1a8e44ff67b6e277f398a3a0d3e88a25/static/favicon.ico -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ParkYoungWoong/vue3-template/6383cafa1a8e44ff67b6e277f398a3a0d3e88a25/static/favicon.png -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const { VueLoaderPlugin } = require('vue-loader') 2 | const HtmlPlugin = require('html-webpack-plugin') 3 | const CopyPlugin = require('copy-webpack-plugin') 4 | 5 | module.exports = (env, options) => { 6 | console.log(env, options) 7 | return { 8 | resolve: { 9 | extensions: ['.js', '.vue'], 10 | alias: { 11 | '~': `${__dirname}/src` 12 | } 13 | }, 14 | entry: './src/main.js', 15 | // entry: { main: './src/main.js' }, 16 | output: { 17 | // path: `${__dirname}/dist`, 18 | // filename: '[name].js', 19 | publicPath: '/', 20 | clean: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.js$/, 26 | exclude: /node_modules/, 27 | use: 'babel-loader' 28 | }, 29 | { 30 | test: /\.vue$/, 31 | use: 'vue-loader' 32 | }, 33 | { 34 | test: /\.s?css$/, 35 | use: [ 36 | 'vue-style-loader', 37 | 'css-loader', 38 | 'postcss-loader', 39 | { 40 | loader: 'sass-loader', 41 | options: { 42 | additionalData: ` 43 | @use "sass:color"; 44 | @use "sass:list"; 45 | @use "sass:map"; 46 | @use "sass:math"; 47 | @use "sass:meta"; 48 | @use "sass:selector"; 49 | @use "sass:string"; 50 | @import "~/scss/_variables"; 51 | ` 52 | } 53 | } 54 | ] 55 | }, 56 | // https://webpack.kr/guides/asset-modules/ 57 | { 58 | test: /\.(png|jpe?g|svg|gif|webp)/, 59 | type: 'asset/resource' 60 | } 61 | ] 62 | }, 63 | plugins: [ 64 | new VueLoaderPlugin(), 65 | new HtmlPlugin({ 66 | template: './src/index.html' 67 | }), 68 | new CopyPlugin({ 69 | patterns: [ 70 | { from: 'static' } 71 | ] 72 | }) 73 | ], 74 | devServer: { 75 | // port: 8080, 76 | historyApiFallback: true 77 | } 78 | } 79 | } 80 | --------------------------------------------------------------------------------