Repository: vue-land/create-vue-app
Branch: master
Commit: 61f52182bcb3
Files: 25
Total size: 15.2 KB
Directory structure:
gitextract_cly6_6tk/
├── .editorconfig
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── circle.yml
├── cli.js
├── docs/
│ └── unit-test.md
├── package.json
├── sao.js
├── template/
│ ├── .editorconfig
│ ├── README.md
│ ├── gitignore
│ ├── index.ejs
│ ├── package.json
│ ├── poi.config.js
│ ├── src/
│ │ ├── components/
│ │ │ ├── App.test.js
│ │ │ └── App.vue
│ │ ├── index.js
│ │ ├── polyfills.js
│ │ └── pwa.js
│ └── static/
│ └── manifest.json
└── test/
├── snapshots/
│ ├── test.js.md
│ └── test.js.snap
└── test.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .gitattributes
================================================
* text=auto
================================================
FILE: .gitignore
================================================
node_modules
packages/*/yarn.lock
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) egoist <0x142857@gmail.com> (https://egoistian.com)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# create-vue-app
[](https://npmjs.com/package/create-vue-app) [](https://npmjs.com/package/create-vue-app) [](https://circleci.com/gh/vue-land/create-vue-app/tree/master) [](https://github.com/egoist/donate) [](https://chat.egoist.moe)
## Features
- No config until you need, thanks to [Poi](https://github.com/egoist/poi).
- Support all CSS preprocessors and CSS modules
- Hot mode reloading
- Unit tests with [Jest](https://github.com/avajs/ava) with no config by default thanks to [Tyu](https://github.com/egoist/tyu).
- Progressive Web App by default, thanks to [poi-preset-offline](https://github.com/egoist/poi/tree/master/packages/poi-preset-offline) and [offline-plugin](https://github.com/NekR/offline-plugin).
## Install
```bash
yarn global add create-vue-app
```
## Usage
```bash
# Generate project in cwd
mkdir my-vue-app && cd my-vue-app
create-vue-app .
# Generate project in specific folder
create-vue-app my-vue-app
cd my-vue-app
```
Alternatively, if you have Yarn^0.24, you can use the `yarn create` command:
```bash
yarn create vue-app my-vue-app
```
### Folder structure
```bash
.
├── README.md
├── index.ejs
├── package.json
├── poi.config.js
├── src
│ ├── components
│ │ ├── App.test.js
│ │ └── App.vue
│ ├── index.js
│ └── polyfills.js
├── static
│ └── favicon.ico
└── yarn.lock
```
## Recipes
- [Unit Test](./docs/unit-test.md)
## FAQ
### Where are the docs?
**This project is using Poi under the hood**, so for most questions, hopefully go to [this page](https://poi.js.org/#/home) and you will get the answer.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**create-vue-app** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/create-vue-app/contributors)).
> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)
================================================
FILE: circle.yml
================================================
machine:
node:
version: 7
environment:
PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
dependencies:
override:
- yarn
cache_directories:
- ~/.cache/yarn
test:
override:
- yarn test
================================================
FILE: cli.js
================================================
#!/usr/bin/env node
const path = require('path')
const cac = require('cac')
const sao = require('sao')
const update = require('update-notifier')
const pkg = require('./package')
const cli = cac()
cli.command('*', 'Generate a new project', input => {
if (input.length === 0) {
return cli.showHelp()
}
const folderName = input[0]
const targetPath = path.resolve(folderName)
console.log(`> Generating project in ${targetPath}`)
return sao({
template: __dirname,
targetPath
})
})
cli.parse()
update({
pkg
}).notify()
================================================
FILE: docs/unit-test.md
================================================
# Unit Test
Refer to [Tyu](https://github.com/egoist/tyu) which is using Jest under the hood.
================================================
FILE: package.json
================================================
{
"name": "create-vue-app",
"version": "2.0.0",
"description": "Create Vue app with no build configurations",
"scripts": {
"test": "npm run lint && npm run ava",
"ava": "ava test/test.js",
"lint": "xo"
},
"bin": {
"cva": "cli.js",
"create-vue-app": "cli.js"
},
"files": [
"sao.js",
"cli.js",
"template"
],
"repository": "git@github.com:egoist/create-vue-app.git",
"author": "EGOIST <0x142857@gmail.com>",
"license": "MIT",
"devDependencies": {
"ava": "^0.24.0",
"eslint-config-rem": "^3.1.0",
"lerna": "^2.0.0-rc.5",
"xo": "^0.18.2"
},
"dependencies": {
"cac": "^4.2.0",
"sao": "^0.22.2",
"superb": "^1.3.0",
"update-notifier": "^2.1.0"
},
"xo": {
"extends": "rem/prettier",
"ignores": [
"template/**"
],
"rules": {
"ava/no-ignored-test-files": 0
}
}
}
================================================
FILE: sao.js
================================================
const superb = require('superb')
module.exports = {
prompts: {
name: {
message: `What's the name of your new project`,
default: ':folderName:'
},
description: {
message: 'How would your describe your superb project',
default: `My ${superb()} Vue project`
},
pwa: {
type: 'confirm',
default: true,
message: 'Add Progressive Web App (PWA) support',
store: true
},
manifest: {
type: 'confirm',
default: true,
when: 'pwa',
message: 'Use default manifest.json and icons for PWA',
store: true
},
unitTest: {
type: 'confirm',
default: true,
message: 'Use Tyu(Jest) to run unit tests',
store: true
},
username: {
message: `What's your GitHub username`,
default: ':gitUser:',
store: true
},
email: {
message: `What's your GitHub email`,
default: ':gitEmail:',
store: true
}
},
move: {
gitignore: '.gitignore'
},
filters: {
'src/pwa.js': 'pwa',
'static/manifest.json': 'manifest',
'static/icons/**': 'manifest',
'src/components/App.test.js': 'unitTest'
},
gitInit: true,
installDependencies: true,
post(_) {
_.showTip()
console.log(_.chalk.cyan('\n To develop it:'))
console.log('\n yarn dev')
console.log(_.chalk.cyan('\n To build for production:'))
console.log('\n yarn build')
console.log(
_.chalk.dim('\n For more usages, please check out ./README.md')
)
console.log()
}
}
================================================
FILE: template/.editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: template/README.md
================================================
# <%= name %>
> <%= description %>
## Commands
You can replace `yarn` with `npm run` here.
```bash
# build for production
yarn build
# development mode
yarn dev
# run unit tests
yarn test
# serve the bundled dist folder in production mode
yarn serve
```
## Polyfills
By default we only polyfill `window.Promise` and `Object.assign`. You can add more polyfills in `./src/polyfills.js`.
## Analyze bundle size
Run `yarn report` to get a report of bundle size which helps you:
- Realize what's really inside your bundle
- Find out what modules make up the most of it's size
- Find modules that got there by mistake
- Optimize it!
<% if (pwa){ -%>
## Progressive Web App
Your app is now offline-ready (only in production bundle), which means you can visit it without network.<% if (manifest) { %>
Here we use a default [manifest.json](./static/manifest.json) to configurure your pwa, for example, to enable *Add to Home Screen* feature on Android. It will be copied directly to `./dist/manifest.json`.
<% } %>
For all the available options, please head to [poi-preset-offline](https://github.com/egoist/poi/tree/master/packages/poi-preset-offline#api).
<% } %>
---
This project is generated by [create-vue-app](https://github.com/vue-land/create-vue-app).
================================================
FILE: template/gitignore
================================================
node_modules
*.log
.DS_Store
# poi dist
dist
================================================
FILE: template/index.ejs
================================================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title><%%= htmlWebpackPlugin.options.title %%></title>
<% if (manifest) { %>
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4DBA87">
<% } %>
<%% if (htmlWebpackPlugin.options.description) { %%>
<meta name="description" content="<%%= htmlWebpackPlugin.options.description %%>"/>
<%% } %%>
<%% for (var chunk of webpack.chunks) {
for (var file of chunk.files) {
if (file.match(/\.(js|css)$/)) { %%>
<link rel="<%%= chunk.initial?'preload':'prefetch' %%>" href="<%%= htmlWebpackPlugin.files.publicPath + file %%>" as="<%%= file.match(/\.css$/)?'style':'script' %%>"><%% }}} %%>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app"></div>
</body>
</html>
================================================
FILE: template/package.json
================================================
{
"private": true,
"name": "<%= name %>",
"productName": "<%= name %>",
"description": "<%= description %>",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"dev": "poi",
"build": "poi build",
"report": "poi build --bundle-report",
"serve": "serve dist --single"<% if (unitTest) { %>,
"test": "tyu"<% } %>
},
"author": {
"name": "<%= username %>",
"email": "<%= email %>"
},
"dependencies": {<% if (pwa) { %>
"offline-plugin": "^4.8.0",<% } %>
"normalize.css": "^7.0.0",
"object-assign": "^4.1.1",
"promise-polyfill": "^6.0.2"
},
"devDependencies": {
"poi": "^9.0.0",
"poi-preset-bundle-report": "^2.0.0",
"serve": "^6.1.0"<% if (unitTest) { %>,
"tyu": "^1.0.4"<% } %><% if (pwa) { %>,
"poi-preset-offline": "^9.0.0"<% } %>
}
}
================================================
FILE: template/poi.config.js
================================================
const path = require('path')
const pkg = require('./package')
module.exports = {
entry: [
'src/polyfills.js',
'src/index.js'
],
html: {
title: pkg.productName,
description: pkg.description,
template: path.join(__dirname, 'index.ejs')
},
postcss: {
plugins: [
// Your postcss plugins
]
},
presets: [
require('poi-preset-bundle-report')()<%_ if (pwa) { %>,
require('poi-preset-offline')({
pwa: './src/pwa.js', // Path to pwa runtime entry
pluginOptions: {} // Additional options for offline-plugin
})<% } %>
]
}
================================================
FILE: template/src/components/App.test.js
================================================
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
it('does not crash', () => {
const Ctor = Vue.extend(App)
const vm = new Ctor().$mount()
expect(vm.$el.textContent).toMatch(/Welcome to Vue\.js/)
})
================================================
FILE: template/src/components/App.vue
================================================
<template>
<div id="app">
<div class="banner">
<img
src="https://vuejs.org/images/logo.png"
width="100"
alt="vue"
class="logo"
/>
<h1>Welcome to Vue.js</h1>
</div>
<div class="bottom">
To get started, edit <code>./src/components/App.vue</code> and save to reload.<br/>
<span class="fade">
Checkout <code>./README.md</code> for more usages.
</span>
</div>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<!-- CSS libraries -->
<style src="normalize.css/normalize.css"></style>
<!-- Global CSS -->
<style>
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
font-size: 0.9em;
white-space: pre-wrap;
color: #2c3e50;
}
code::before, code::after {
content: '`';
}
</style>
<!-- Scoped component css -->
<!-- It only affect current component -->
<style scoped>
#app {
text-align: center;
}
#app h1 {
color: #2c3e50;
font-weight: 300;
margin: 0;
}
.banner {
height: 200px;
background-color: #f6f6f6;
padding: 50px 10px;
}
.bottom {
padding: 80px 10px;
font-size: 24px;
font-weight: 300;
}
.fade {
font-size: 14px;
}
.logo {
animation: spin 4s 1s infinite linear
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
</style>
================================================
FILE: template/src/index.js
================================================
import Vue from 'vue'
import App from './components/App.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
================================================
FILE: template/src/polyfills.js
================================================
if (!window.Promise) {
window.Promise = require('promise-polyfill')
}
Object.assign = require('object-assign')
================================================
FILE: template/src/pwa.js
================================================
import runtime from 'offline-plugin/runtime'
runtime.install({
onUpdateReady() {
runtime.applyUpdate()
}
})
================================================
FILE: template/static/manifest.json
================================================
{
"name": "<%= name %>",
"short_name": "<%= name %>",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#4DBA87"
}
================================================
FILE: test/snapshots/test.js.md
================================================
# Snapshot report for `test/test.js`
The actual snapshot is saved in `test.js.snap`.
Generated by [AVA](https://ava.li).
## defaults
> Snapshot 1
[
'.editorconfig',
'.gitignore',
'README.md',
'index.ejs',
'package.json',
'poi.config.js',
'src/components/App.test.js',
'src/components/App.vue',
'src/index.js',
'src/polyfills.js',
'src/pwa.js',
'static/favicon.ico',
'static/icons/android-chrome-192x192.png',
'static/icons/android-chrome-512x512.png',
'static/manifest.json',
## no unit test
> Snapshot 1
[
'.editorconfig',
'.gitignore',
'README.md',
'index.ejs',
'package.json',
'poi.config.js',
'src/components/App.vue',
'src/index.js',
'src/polyfills.js',
'src/pwa.js',
'static/favicon.ico',
'static/icons/android-chrome-192x192.png',
'static/icons/android-chrome-512x512.png',
'static/manifest.json',
]
> scripts
{
build: 'poi build',
dev: 'poi',
report: 'poi build --bundle-report',
serve: 'serve dist --single',
}
> devDependencies
{
poi: '^9.0.0',
'poi-preset-bundle-report': '^2.0.0',
'poi-preset-offline': '^9.0.0',
serve: '^6.1.0',
}
================================================
FILE: test/test.js
================================================
import path from 'path'
import test from 'ava'
import sao from 'sao'
const template = path.join(__dirname, '..')
test('defaults', async t => {
const res = await sao.mockPrompt(template, {})
t.snapshot(res.fileList)
})
test('no unit test', async t => {
const res = await sao.mockPrompt(template, {
unitTest: false
})
t.snapshot(res.fileList)
const pkg = JSON.parse(res.fileContents('package.json'))
t.snapshot(pkg.scripts, 'scripts')
t.snapshot(pkg.devDependencies, 'devDependencies')
})
gitextract_cly6_6tk/
├── .editorconfig
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── circle.yml
├── cli.js
├── docs/
│ └── unit-test.md
├── package.json
├── sao.js
├── template/
│ ├── .editorconfig
│ ├── README.md
│ ├── gitignore
│ ├── index.ejs
│ ├── package.json
│ ├── poi.config.js
│ ├── src/
│ │ ├── components/
│ │ │ ├── App.test.js
│ │ │ └── App.vue
│ │ ├── index.js
│ │ ├── polyfills.js
│ │ └── pwa.js
│ └── static/
│ └── manifest.json
└── test/
├── snapshots/
│ ├── test.js.md
│ └── test.js.snap
└── test.js
SYMBOL INDEX (2 symbols across 2 files)
FILE: sao.js
method post (line 54) | post(_) {
FILE: template/src/pwa.js
method onUpdateReady (line 4) | onUpdateReady() {
Condensed preview — 25 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (18K chars).
[
{
"path": ".editorconfig",
"chars": 187,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ni"
},
{
"path": ".gitattributes",
"chars": 12,
"preview": "* text=auto\n"
},
{
"path": ".gitignore",
"chars": 34,
"preview": "node_modules\npackages/*/yarn.lock\n"
},
{
"path": "LICENSE",
"chars": 1113,
"preview": "The MIT License (MIT)\n\nCopyright (c) egoist <0x142857@gmail.com> (https://egoistian.com)\n\nPermission is hereby granted, "
},
{
"path": "README.md",
"chars": 2607,
"preview": "# create-vue-app\n\n[](https://npmjs.com/package"
},
{
"path": "circle.yml",
"chars": 234,
"preview": "machine:\n node:\n version: 7\n environment:\n PATH: \"${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin\"\n"
},
{
"path": "cli.js",
"chars": 547,
"preview": "#!/usr/bin/env node\nconst path = require('path')\nconst cac = require('cac')\nconst sao = require('sao')\nconst update = re"
},
{
"path": "docs/unit-test.md",
"chars": 95,
"preview": "# Unit Test\n\nRefer to [Tyu](https://github.com/egoist/tyu) which is using Jest under the hood.\n"
},
{
"path": "package.json",
"chars": 885,
"preview": "{\n \"name\": \"create-vue-app\",\n \"version\": \"2.0.0\",\n \"description\": \"Create Vue app with no build configurations\",\n \"s"
},
{
"path": "sao.js",
"chars": 1551,
"preview": "const superb = require('superb')\n\nmodule.exports = {\n prompts: {\n name: {\n message: `What's the name of your ne"
},
{
"path": "template/.editorconfig",
"chars": 187,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ni"
},
{
"path": "template/README.md",
"chars": 1269,
"preview": "# <%= name %>\n\n> <%= description %>\n\n## Commands\n\nYou can replace `yarn` with `npm run` here.\n\n```bash\n# build for produ"
},
{
"path": "template/gitignore",
"chars": 46,
"preview": "node_modules\n*.log\n.DS_Store\n\n# poi dist\ndist\n"
},
{
"path": "template/index.ejs",
"chars": 1053,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\"/>\n <meta http-"
},
{
"path": "template/package.json",
"chars": 823,
"preview": "{\n \"private\": true,\n \"name\": \"<%= name %>\",\n \"productName\": \"<%= name %>\",\n \"description\": \"<%= description %>\",\n \""
},
{
"path": "template/poi.config.js",
"chars": 585,
"preview": "const path = require('path')\nconst pkg = require('./package')\n\nmodule.exports = {\n entry: [\n 'src/polyfills.js',\n "
},
{
"path": "template/src/components/App.test.js",
"chars": 240,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\nit('does not crash', () => {\n cons"
},
{
"path": "template/src/components/App.vue",
"chars": 1487,
"preview": "<template>\n <div id=\"app\">\n <div class=\"banner\">\n <img\n src=\"https://vuejs.org/images/logo.png\"\n "
},
{
"path": "template/src/index.js",
"chars": 145,
"preview": "import Vue from 'vue'\nimport App from './components/App.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n el: '#app',\n"
},
{
"path": "template/src/polyfills.js",
"chars": 114,
"preview": "if (!window.Promise) {\n window.Promise = require('promise-polyfill')\n}\n\nObject.assign = require('object-assign')\n"
},
{
"path": "template/src/pwa.js",
"chars": 117,
"preview": "import runtime from 'offline-plugin/runtime'\n\nruntime.install({\n onUpdateReady() {\n runtime.applyUpdate()\n }\n})\n"
},
{
"path": "template/static/manifest.json",
"chars": 414,
"preview": "{\n \"name\": \"<%= name %>\",\n \"short_name\": \"<%= name %>\",\n \"icons\": [\n {\n \"src\": \"/icons/android-chrome-192x192"
},
{
"path": "test/snapshots/test.js.md",
"chars": 1310,
"preview": "# Snapshot report for `test/test.js`\n\nThe actual snapshot is saved in `test.js.snap`.\n\nGenerated by [AVA](https://ava.li"
},
{
"path": "test/test.js",
"chars": 510,
"preview": "import path from 'path'\nimport test from 'ava'\nimport sao from 'sao'\n\nconst template = path.join(__dirname, '..')\n\ntest("
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the vue-land/create-vue-app GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 25 files (15.2 KB), approximately 5.0k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.