tmpl-cli
api
docs
env
git
hbs
html
husky
jest
lintstaged
lisp
node
prettier
python
react
readme
schema
style
util
vue
Summaryvue component [name]vue init
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

// Tools
const path = require("path");
// Plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
// Variables - Directory Target
const 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 Targets
const srcIndex = "index.js";
const srcTemplate = "index.html";
const distHtml = "index.html";
// Variables - Environment
const webpackMode = process.env.NODE_ENV === "production" ? "production" : "development";
const isProduction = webpackMode === "production";
// Variables - Other
const devPort = process.env.DEV_SERVER_PORT || 8080;
// Main Webpack Config
module.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()
]
};