vitejs / create-vite-app Goto Github PK
View Code? Open in Web Editor NEWCreate a Vite-powered app in seconds!
License: MIT License
Create a Vite-powered app in seconds!
License: MIT License
Vite is really good. However, I want to create my own template and use this template to create many projects. Without this feature I have to do many repeat works. Any solution or plan for this feature?
At present, the cooperation between vue template and TypeScript is not perfect. The development of @vuedx
is currently stalled. We can add a template-vue-jsx-ts first. Let everyone experience the development of vue + ts.
I have linter error on fresh generated project
[vue/valid-template-root]
The template root requires exactly one element.eslint-plugin-vue
Does vue-3 changed the rule of one root element in template ?
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
Should it be wrapped with div ?
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</div>
</template>
I believe the HMR for react is broken with this template.
Whenever I change anything in my source code, the whole page reloads, instead of just updating the parts that need to. I don't know if this is a problem with vite-plugin-react 2.0 or with vite.
Please can you confirm that HMR is indeed broken for react or did it just break with reason ?
Thank you guys so much for your work on vite, it is AWESOME ❤️
For example, make the directory structure of react and Vue consistent, index.html All files are in the public directory, so static resources that do not need to be packaged can be put into the public directory.
What problem does this feature solve?
At the moment, yarn create vite-app my_app
, creates a bare scaffolded project with simply supporting Vue.
As you know a real project needs more packages and configurations like unit-testing, babel, router, SCSS loader, etc...
It will be great if it works like vue-cli
and does the configuration behind the scene like vue-cli
after asking what the user wants:
Thank you in advance for your and your teams great works.
keep up the good work.
Please add a template for nuxt.js
❱❱❱ npm init vite-app wuhan-admin4 --template react-ts
❱❱❱ yarn dev
yarn run v1.22.4
warning package.json: No license field
$ vite
vite v1.0.0-beta.1
[vite] failed to load config from /Users/limichange/limiCode/wuhan-admin4/vite.config.ts:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/limichange/limiCode/wuhan-admin4/node_modules/rollup/dist/es/rollup.browser.js
require() of ES modules is not supported.
require() of /Users/limichange/limiCode/wuhan-admin4/node_modules/rollup/dist/es/rollup.browser.js from /Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename rollup.browser.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/limichange/limiCode/wuhan-admin4/node_modules/rollup/dist/es/package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:13)
at Module.load (internal/modules/cjs/loader.js:993:32)
at Function.Module._load (internal/modules/cjs/loader.js:892:14)
at Module.require (internal/modules/cjs/loader.js:1033:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.resolveConfig (/Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/config.js:57:28)
at resolveOptions (/Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/cli.js:117:39)
at /Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/cli.js:65:27
at Object.<anonymous> (/Users/limichange/limiCode/wuhan-admin4/node_modules/vite/dist/cli.js:79:3)
at Module._compile (internal/modules/cjs/loader.js:1144:30) {
code: 'ERR_REQUIRE_ESM'
}
And here is a relative issue about npm init npm/npm#1862
Is your feature request related to a problem? Please describe.
It's not allowed to create vite-app in existing directory:
"Error: target directory is not empty.
error Command failed."
Describe the solution you'd like
Provide options to merge or overwrite when creating vite-app in existing directory, just like vue-cli does.
例如我想用个cssModule,sas之类的。我该怎么配置?再单独配置一个sass也太费劲了吧
vite-app <project name>
Is possible just use 1 command line instead 4 command lines ?
it's really hard to remember and understand use npm init to create vite-app !????
Why we have to manually click keyboard cd project folder and lanuch project, and wait, wait ,wait. wast of time.
Such as the react templates that contain unit tests, integration tests, prettier and eslint maintained by other people.
It looks like Vite will automatically inject Fragment
, so I needn't import this manually, but if I didn't import this, ide will highlight this error, say Fragment is not defined.
, so I can use only syntactic sugar, <> </>
. but, if i need to add key or other property, how can I do.
My suggestion is that if there are already has Fragment
in the scope, cancel automatic injection.
App.tsx:20 Uncaught SyntaxError: Identifier 'Fragment' has already been declared
Not quite sure if this should be here or in the react-plugin/vite repo but I noticed that HMR does not work anymore since the latest beta releases.
Just create a new vite app with the reason-react template and run it, no other steps needed. Changes in the .re files always trigger a full page refresh. On vite 0.20.10 and plugin 2.x, this would hot replace the modules instead. Since the beta releases this doesnt work anymore.
Only testet on Windows so far.
而且把名字放在前面,创建的也是vue的模板
Hi,
I just trying to create new app using vite with the following commands:
npm init vite-app reason-app-vite --template reason-react
$ cd reason-app-vite
$ npm install
$ npm run dev
The project was successfully instantiated, but when I run it localy npm run dev
I see a blank screen and the error in the browser:
Failed to load resource: the server responded with a status of 404 (Not Found) Index.bs.js:1
I have the following file structure after I ran all the commands:
My node version is: v14.4.0
NPM: 6.14.5
Chrome: Version 83.0.4103.9
please add Typescript option during "npm init vite-app" like vue-cli. Thanks a lot
It is 2020 and having responsive websites is really important. So if the starter template had the meta viewport tag that will be really nice.
I apologize for making this an issue when it's more applicable for a google search, but I can't find anything about this.
How do you build with the prod version of React?
When running the vite build
command that comes with the react-ts
template, React is bundled in development mode, causing a 267kb js file.
yarn init vite-app ts-react --template react-ts
cd ts-react
yarn
yarn build
dist/_assets/
and the size of the JS file.The file has
/** @license React v16.13.0
* react-dom.development.js
*
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
NODE_ENV=production && tsc && vite build
just to try to be sure. I see this, but even with the setting, it bundles development.I want to create the project built on Vue3 and TypeScript.
Hello , I follow the this repo but I dont know whats is the Vite ? Can you explain that ? @yyx990803
All the NPM packages required should be installed by the CLI itself rather than manual installation. It should be ready to use as one creates a new app using this CLI.
Installation Fails with an error below when running npm init vite-app
Possible due to my windows username has space in the name which might be the cause
C:\Users\Reza Seedin\AppData
D:\_STUDY\Vue_2020\014_vite>npm init vite-app vite-test
npm ERR! code ENOLOCAL
npm ERR! Could not install from "Seedin\AppData\Roaming\npm-cache\_npx\11336" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Reza Seedin\AppData\Roaming\npm-cache\_logs\2020-06-08T23_18_05_513Z-debug.log
Install for [ 'create-vite-app@latest' ] failed with code 1
Please provide a link to a repo that can reproduce the problem you ran into.
A reproduction is required unless you are absolutely sure that the the problem is obvious and the information you provided is enough for us to understand what the problem is. If a report has only vague description (e.g. just a generic error message) and has no reproduction, it will be closed immediately.
vite
version: latestvite
or vite build
with the --debug
flag.0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Users\\Reza Seedin\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'install',
1 verbose cli 'create-vite-app@latest',
1 verbose cli '--global',
1 verbose cli '--prefix',
1 verbose cli 'C:\\Users\\Reza',
1 verbose cli 'Seedin\\AppData\\Roaming\\npm-cache\\_npx\\11336',
1 verbose cli '--loglevel',
1 verbose cli 'error',
1 verbose cli '--json'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 312c571a9f0f677a
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 silly fetchPackageMetaData error for file:Seedin\AppData\Roaming\npm-cache\_npx\11336 Could not install from "Seedin\AppData\Roaming\npm-cache\_npx\11336" as it does not contain a package.json file.
8 http fetch GET 304 https://registry.npmjs.org/create-vite-app 955ms (from cache)
9 silly pacote tag manifest for create-vite-app@latest fetched in 974ms
10 timing stage:rollbackFailedOptional Completed in 0ms
11 timing stage:runTopLevelLifecycles Completed in 983ms
12 verbose stack Error: ENOENT: no such file or directory, open 'D:\_STUDY\Vue_2020\014_vite\Seedin\AppData\Roaming\npm-cache\_npx\11336\package.json'
13 verbose cwd D:\_STUDY\Vue_2020\014_vite
14 verbose Windows_NT 10.0.19041
15 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Reza Seedin\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "create-vite-app@latest" "--global" "--prefix" "C:\\Users\\Reza" "Seedin\\AppData\\Roaming\\npm-cache\\_npx\\11336" "--loglevel" "error" "--json"
16 verbose node v12.16.1
17 verbose npm v6.14.5
18 error code ENOLOCAL
19 error Could not install from "Seedin\AppData\Roaming\npm-cache\_npx\11336" as it does not contain a package.json file.
20 verbose exit [ 1, true ]
After building the project the output file names are hashed like index.4555a4.js and style.23432423.css . How can I use my custom name? Did not find any doc on it.
TIA
Add exclude: ["node_modules"]
to tsconfig.json
for running tsc more efficient.
Create-react-app has lint, and unit tests.
I want to add jest and eslint to the react and react-ts template.
Can I create a PR for this?
I just init my project: npm init vite-app myApp --template vue-ts
. Then run npm run build
.
But i got this error:
.\src\main.ts
=============
=> .\src\main.ts:2:17
Error :: Cannot find module './App.vue' or its corresponding type declarations. (code 2307)
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
| ^^^^^^^^^^^
3 | import './index.css'
4 |
It just a new project. How to fix this error?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.