api
docs
env
git
hbs
html
husky
jest
lintstaged
lisp
node
prettier
python
react
readme
schema
style
util
web
$ tmpl vue init
Create a new Vue project.
Files
project
└─src
└──index.html
└──index.js
└──root.js
└─.babelrc
└─package.json
└─webpack.config.js
↑ index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="robots" content="noindex"><title>Vue Project</title></head><body><div role="app" id="root">{{message}}</div></body></html>
↑ index.js
import { initVue } from "./root";window.addEventListener("DOMContentLoaded", initVue);
↑ root.js
import Vue from "vue";export const initVue = () => {const rootId = "root";const rootElement = document.getElementById(rootId);if (rootElement) {new Vue({el: `#${rootId}`,data: {message: "Vue working"}});} else {console.error(`Could not find element with ID: ${rootId}`);}};
↑ .babelrc
{"presets": ["@babel/preset-env"]}
↑ package.json
{"name": "project","version": "0.0.0","description": "","browserslist": ["last 2 versions","IE 11"],"scripts": {"build": "webpack","start": "webpack-dev-server"},"keywords": [],"author": "developer<developer@developer.dev>","license": "ISC","dependencies": {"vue": "^2.6.12"},"devDependencies": {"@babel/core": "^7.12.13","@babel/preset-env": "^7.12.13","autoprefixer": "^10.2.4","babel-core": "^7.0.0-bridge.0","babel-loader": "^8.2.2","css-loader": "^5.0.1","cssnano": "^4.1.10","html-webpack-plugin": "^5.0.0","mini-css-extract-plugin": "^1.3.5","postcss-import": "^14.0.0","postcss-loader": "^5.0.0","postcss-preset-env": "^6.7.0","vue-loader": "^15.9.6","vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.12","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0","webpack": "^4.44.2"}}
↑ webpack.config.js
// Toolsconst path = require("path");// Pluginsconst HtmlWebpackPlugin = require("html-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const VueLoaderPlugin = require("vue-loader/lib/plugin");// Variables - Directory Targetconst dir = path.resolve(__dirname);const srcDir = path.join(dir, "src");const distDir = path.join(dir, "dist");const nodeModulesDir = path.join(dir, "node_modules");// Variables - File Targetsconst srcIndex = "index.js";const srcTemplate = "index.html";const distHtml = "index.html";// Variables - Environmentconst webpackMode = process.env.NODE_ENV === "production" ? "production" : "development";const isProduction = webpackMode === "production";// Variables - Otherconst devPort = process.env.DEV_SERVER_PORT || 8080;// Main Webpack Configmodule.exports = {target: "web",mode: webpackMode,entry: path.join(srcDir, srcIndex),devServer: {compress: true,port: devPort,open: true,openPage: distHtml},output: {path: path.resolve(distDir),filename: "[name].[contenthash].js"},resolve: {alias: ["alias: vue/dist/vue.esm.js,"],extensions: [".js", ".vue", ".json"],mainFields: ["browser", "main", "module"],plugins: []},module: {rules: [{test: /.(js|jsx)$/,use: "babel-loader",exclude: /node_modules/},{test: /\.vue$/,loader: ["vue-loader"],exclude: /node_modules/},{test: /.(sa|sc|c)ss$/,include: dir,enforce: "pre",use: [MiniCssExtractPlugin.loader,{loader: "css-loader",options: { importLoaders: 1, sourceMap: !isProduction, url: false }},vue - style - loader,{loader: "postcss-loader",options: {postcssOptions: {ident: "postcss",plugins: () => [require("autoprefixer")(),require("postcss-import")(),require("postcss-preset-env")({ stage: 3 }),isProduction? require("cssnano")({preset: ["default",{discardComments: { removeAll: true }}]}): () => {}]}}}]},{test: /.(png|jp(e*)g|svg|ico)$/,use: [{loader: "url-loader",options: {limit: 512,name: "images/[hash]-[name].[ext]"}}],exclude: nodeModulesDir}]},plugins: [new HtmlWebpackPlugin({filename: distHtml,template: path.join(srcDir, srcTemplate)// minify: { collapseWhitespace: true }}),new MiniCssExtractPlugin({filename: "main.[contenthash].css",chunkFilename: "[name].[contenthash].css"}),new VueLoaderPlugin()]};