Skip to content

Commit

Permalink
feat: initial batch of templates
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Jan 2, 2021
1 parent 7785958 commit 2168ed0
Show file tree
Hide file tree
Showing 12 changed files with 143 additions and 26 deletions.
2 changes: 1 addition & 1 deletion docs/guide/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ When it is time to deploy your app for production, simply run the `vite build` c

The production bundle assumes a baseline support for [Native ES modules dynamic imports](https://caniuse.com/es6-module-dynamic-import). By default, all code is minimally transpiled with target `es2020` (only for terser minification compatibility). You can specify the target range via the [`build.target` config option](/config/#build-target), where the lowest target available is `es2015`.

Legacy browsers _can_ be supported via plugins that post-process the build output for compatibility (e.g. [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel) + [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) + [SystemJS](https://github.com/systemjs/systemjs)), however this is not a built-in feature.
Legacy browsers _can_ be supported via plugins that post-process the build output for compatibility (e.g. [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel) + [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) + [SystemJS](https://github.com/systemjs/systemjs)). This is not a built-in feature, but there is plan to provide an official plugin that automatically emits a separate legacy bundle.

## Public Base Path

Expand Down
Empty file.
1 change: 1 addition & 0 deletions packages/create-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ npm init @vitejs/app my-vue-app --template vue

Currently supported template presets include:

- `vanilla`
- `vue`
- `vue-ts`
- `react`
Expand Down
42 changes: 35 additions & 7 deletions packages/create-app/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,30 @@ const path = require('path')
const argv = require('minimist')(process.argv.slice(2))
const { prompt } = require('enquirer')

const targetDir = argv._[0] || '.'
const cwd = process.cwd()
const root = path.join(cwd, targetDir)

const renameFiles = {
_gitignore: '.gitignore'
}
console.log(`Scaffolding project in ${root}...`)

async function init() {
let targetDir = argv._[0]
if (!targetDir) {
/**
* @type {{ name: string }}
*/
const { name } = await prompt({
type: 'input',
name: 'name',
message: `Project name:`,
initial: 'vite-project'
})
targetDir = name
}

const root = path.join(cwd, targetDir)
console.log(`Scaffolding project in ${root}...`)

if (!fs.existsSync(root)) {
fs.mkdirSync(root, { recursive: true })
} else {
Expand All @@ -26,6 +41,7 @@ async function init() {
const { yes } = await prompt({
type: 'confirm',
name: 'yes',
initial: 'Y',
message:
`Target directory ${targetDir} is not empty.\n` +
`Remove existing files and continue?`
Expand All @@ -38,10 +54,22 @@ async function init() {
}
}

const templateDir = path.join(
__dirname,
`template-${argv.t || argv.template || 'vue'}`
)
// determine template
let template = argv.t || argv.template
if (!template) {
/**
* @type {{ t: string }}
*/
const { t } = await prompt({
type: 'select',
name: 't',
message: `Select a template:`,
choices: ['vanilla', 'vue', 'vue-ts', 'react', 'react-ts']
})
template = t
}

const templateDir = path.join(__dirname, `template-${template}`)

const write = (file, content) => {
const targetPath = renameFiles[file]
Expand Down
31 changes: 22 additions & 9 deletions packages/create-app/template-react-ts/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,32 @@ function App() {
<img src={logo} className="App-logo" alt="logo" />
<p>Hello Vite + React!</p>
<p>
<button onClick={() => setCount(count => count + 1)}>count is: {count}</button>
<button onClick={() => setCount((count) => count + 1)}>
count is: {count}
</button>
</p>
<p>
Edit <code>App.tsx</code> and save to test HMR updates.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
{' | '}
<a
className="App-link"
href="https://vitejs.dev/guide/features.html"
target="_blank"
rel="noopener noreferrer"
>
Vite Docs
</a>
</p>
</header>
</div>
)
Expand Down
31 changes: 22 additions & 9 deletions packages/create-app/template-react/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,32 @@ function App() {
<img src={logo} className="App-logo" alt="logo" />
<p>Hello Vite + React!</p>
<p>
<button onClick={() => setCount(count => count + 1)}>count is: {count}</button>
<button onClick={() => setCount((count) => count + 1)}>
count is: {count}
</button>
</p>
<p>
Edit <code>App.jsx</code> and save to test HMR updates.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
{' | '}
<a
className="App-link"
href="https://vitejs.dev/guide/features.html"
target="_blank"
rel="noopener noreferrer"
>
Vite Docs
</a>
</p>
</header>
</div>
)
Expand Down
13 changes: 13 additions & 0 deletions packages/create-app/template-vanilla/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
6 changes: 6 additions & 0 deletions packages/create-app/template-vanilla/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import './style.css'

document.querySelector('#app').innerHTML = `
<h1>Hello Vite!</h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`
11 changes: 11 additions & 0 deletions packages/create-app/template-vanilla/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"name": "vite-starter",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"vite": "^2.0.0-beta.1"
}
}
8 changes: 8 additions & 0 deletions packages/create-app/template-vanilla/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
12 changes: 12 additions & 0 deletions packages/create-app/template-vue-ts/src/components/HelloWorld.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<template>
<h1>{{ msg }}</h1>

<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>

<p>
Recommended setup:
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
Expand Down Expand Up @@ -46,3 +52,9 @@ export default defineComponent({
}
})
</script>

<style scoped>
a {
color: #42b983;
}
</style>
12 changes: 12 additions & 0 deletions packages/create-app/template-vue/src/components/HelloWorld.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<template>
<h1>{{ msg }}</h1>

<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>

<button @click="state.count++">count is: {{ state.count }}</button>
<p>
Edit
Expand All @@ -16,3 +22,9 @@ defineProps({
const state = reactive({ count: 0 })
</script>

<style scoped>
a {
color: #42b983;
}
</style>

0 comments on commit 2168ed0

Please sign in to comment.