vuejs / create-vue Goto Github PK
View Code? Open in Web Editor NEW🛠️ The recommended way to start a Vite-powered Vue project
License: Other
🛠️ The recommended way to start a Vite-powered Vue project
License: Other
> html:src/App.vue:5:7: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
5 │ import '@/components/HelloWorld.vue'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> html:/src/views/HomeView.vue:5:7: error: Could not resolve "@/components/TheWelcome.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
5 │ import '@/components/TheWelcome.vue'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// import { fileURLToPath } from 'url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
// '@/': fileURLToPath(new URL('./src/', import.meta.url))
'@': resolve(__dirname, 'src')
}
}
})
In comparison to vue-cli, create-vue is very opinionated when it comes to tooling choices. Instead of asking for a selection from a list, it asks yes/no for much more limited options.
In order to make migration easier, the same options from Vue CLI should be allowed. The default choices can be opinionated but when no alternatives are provided it is discouraging. Using completely different tooling, while it might have significant improvements, increases the overhead of moving to Vue 3.
If it is the case that some of the options will cause conflict and extra work to integrate, then they can be omitted. But an approach of asking for a selection from a list would be much appreciated. This will also serve as guidance as to what is or is not supported.
In my case, the reason I am asking for this and the reason I mention
If it is the case that some of the options will cause conflict and extra work to integrate, then they can be omitted
is because I am having trouble using Jest with Vue 3.
After the website guided me to use the new Vue [3] website, I followed the new app creation instructions there. After declining the recommended unit test framework, I was left trying to install Jest myself.
You might think that I am lazy, and silly for not being able to install Jest on my own. But especially since many Vue packages are still scrambling to get going with Vue 3[1], I would much appreciate official guidance from the Vue team and other people smarter than I about this, which could come in the form of installing Jest for me.
To illustrate my problem, this StackOverflow question has three completely different package recommendations for Vue + Jest.
I found myself descending into some sort of dependency hell trying to install Jest for Vue with TypeScript.
Although I have mentioned my troubles, resolving them in a straightforward sense is not the point of this issue.
Since there is no jest
and the test:unit
command is configured to run cypress how do we unit test js/ts files that doesn't contains any vue stuffs?
For example a todoApi.ts
that contains just business logic to fetch todos.
npm init vue@2, there is no eslint prompt option offered. but vue@3 does have.
why? could you add eslint support for vue2?
Just want to know the difference between with vue-cli and vite-cli?
The vue-tsc version in this repo is 0.3.0, newest is 0.28.x
Scenario where this matters:
/home/user/vue-tsc-component-library-example/node_modules/vue-tsc/proxy.js:8
throw 'emit mode is not yet support';
error.
The fix for the above error is to just run npm i -D vue-tsc@latest
after npm init vue@next
, but it'd be nice if the project shipped with the new version
vite-env.d.ts
to just env.d.ts
since it's no longer vite-specificjsconfig.json
and env.d.ts
for non-TS projects (no longer necessary for latest Volar)src/welcome
directory so the user can easily delete them. src/App.vue
should just import and render a src/welcome/Welcome.vue
component.devDependencies
+ bundle with esbuild
before publishing to reduce network requestsvue3 boilerplate here is composition by default but pinia is still fully options-api, can we make that composition by default for consistency?
Currently, create-vue does not set up a linter or formatter solution.
It is fairly common in JS/TS projects to have ESLint as a linter (especially now that TSLint is deprecated), and to even have Prettier as a formatter.
It would be great to have support for ESlint and Prettier out-of-the-box, to avoid developers the hassle of setting it up manually every time.
If the team is willing to add this, I can work on a PR.
Sorry for not understanding, but can anyone explain what is going on with the vue tooling?
During the last year or so, several dev tools have popped up, i.e. vue-cli, vite, create-vue etc
I would appreciate if someone would explain why use one over the other and which one to use? It's confusing and creating fragmentation in the community. Thanks.
Many people strongly prefer the Options API and all the benefits it offers over Composition API (most importantly, inherent and enforced organizational structure). Much like all the documentation on the Vue website. Composition API and Options API should be treated equally as a choice.
Does this warning need to add shims-vue.d.ts files to eliminate it?
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
The plugin "prettier-plugin-tailwindcss" is supposed to work when you install it with no more setup needed, but in create-vue projects it doesnt work. Supposedly it should sort your tailwindcss on format (with prettier) but it just doesnt, no errors, nothing.
Using VSCode
d.ts
into single file, move to rootrouter
and vuex
into separate optionsjsx
optionalnpm init vue -- --ts
Currently the App.vue file is created with a global style tag (not scoped) that imports a base.css style. This is perfectly fine as it's intended to be available throughout the app.
@import '@/assets/base.css';
When we try to run npm run test:unit
Cypress doesn't import the base.css automatically. So the HelloWorld.spec.ts file executes correctly without failing, but the style from main.css is missing.
This can be easily fixed with a simple import "@/assets/base.css";
inside the spec file, but having to import it in every component spec file is inefficient.
One could use that same line inside the cypress/support/index.ts
file: this runs before each spec, so they can all use the global css. But this breaks npm run test:e2e
as integration tests will not be able to resolve the path.
What's the best way to import a stylesheet in every component spec file?
A best practice should be defined, and added to the default template for new projects, when the user chooses to include Cypress.
Hello, the current project basically uses the CSS extension language to write styles, so I think that might be good to provide an option to choose to add it.
What do you think?
When I run npm init vue vue3-project
to create a project, the package.json dosen't has name:
{
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 5050"
},
"dependencies": {
"vue": "^3.2.29"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.1.0",
"vite": "^2.7.13"
}
}
步骤:
1、npm init vue@next
安装脚手架选择 TypeScript;(不设置 TypeScript 模板测试没有报错)
2、运行 npm run test:unit
;
[vite] Internal server error: Cannot read property 'uid' of undefined
Plugin: vite:import-analysis
File: /Users/xxxx/projects/temp/vue-next/src/components/__tests__/HelloWorld.spec.ts
I've posted the following in the vue-cli
repo vuejs/vue-cli@7f3d511#comments
@yyx990803 Thanks for clarifying the fact that Vue CLI is now in maintenance mode and that you discourage its use for new Vue 3 projects.
I would recommend adding some proper, detailed documentation for the new Vite-based scaffolding tool create-vue
because at the moment it's not trust inspiring - it is rather minimal and lacking any description.
Otherwise a lot of developers will probably stick to webpack-based vue-cli
- this is the situation I am in now. I'd rather use Vue CLI 5 still in beta/rc than jump the ship from the tried-and-true webpack-based tooling, to new bells and whistles (just because it's seemingly faster).
It seems that the Volar and TypeScript Vue Plugin have moved to the vue
publisher ID in the VS Code marketplace where they previously were johnsoncodehk
. They still are johnsoncodehk
in the package.json
of the version that currently gets installed (Guess they weren't released since the rename), but that no longer works in extensions.json
to recommend them and it should now be:
"vue.volar", "vue.vscode-typescript-vue-plugin"
It's not possible to initialize a project when there is existing files/folders in the project directory. In most cases that makes sense, but in the case of git-repositories it could be sensible to make an exception.
I'm new to Vue. I'm copying directly from the Vue tutorial.
Philip Smolen@DESKTOP-UOBK4AV MINGW64 /c/simple-projects/vue-test
$ npm init vue@latest
Error: EPERM: operation not permitted, mkdir 'C:\Users\Philip'
command not found: create-vue
Philip Smolen@DESKTOP-UOBK4AV MINGW64 /c/simple-projects/vue-test
$
It looks like a script is choking because my home directory has a space in it.
I tried several variations on this theme with no success. I tired it under Git Bash and Windows Power Shell. I moved to a directory without any spaces in the name. I tried vue@3
as recommended on another page. I tried --verbose but it didn't show anything useful.
Please advise. How do I get started with Vue? Thanks!
When creating a new app with TypeScript, any imports using absolute path syntax '@/' show as errors in Visual Studio Code with the Volar extension. The app still runs fine.
IDE: Visual Studio Code
Extension: Volar
npm init vue@3
Typescript support: yes
Everything else: no
pnpm install (or npm install)
Change an import to use @/
absolute syntax, such as in App.vue
change the HelloWorld.vue import to import HelloWorld from '@/components/HelloWorld.vue'
There will now be a red line error: Cannot find module '@/components/HelloWorld.vue' or its corresponding type declarations.ts(2307)
Note: if you choose to install router when configuring create-vue, App.vue
will already use the absolute path syntax and have an error.
npm-cache_npx\2f7e7bff16d1c534\node_modules\create-vue\outfile.cjs:5897
const userAgent = process.env.npm_config_user_agent ?? "";
^
SyntaxError: Unexpected token '?'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47
First line of HomeView.vue:
<script setup>
First line of HomeView.vue:
<script setup lang="ts">
I can find the mistake inside playground/router-pinia-with-tests/src/views/HomeView.vue
but I'm not sure which template was used to generate it.
All projects without typescript should be created without lang="ts"
in any of the files.
Scaffold a new project with:
I tried to init new project with command "npm init vue@3"
but got this.
const isFeatureFlagsUsed = typeof (argv.default ?? argv.ts ?? argv.jsx ?? argv.router ?? argv.pinia ?? argv.tests ?? argv.vitest ?? argv.cypress ?? argv.eslint) === "boolean";
^
SyntaxError: Unexpected token ?
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
[ERROR] [plugin vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/vue/dist/vue.runtime.esm-bundler.js" when it was imported here:
node_modules/pinia/node_modules/vue-demi/lib/index.mjs:1:21:
1 │ import * as Vue from 'vue'
╵ ~~~~~
The original metadata for that path comes from when it was imported here:
dep:vue:2:14:
2 │ export * from "./node_modules/vue/dist/vue.runtime.esm-bundler.js"
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The difference in metadata is displayed below:
{
- "pluginName": null,
+ "pluginName": "vite:dep-pre-bundle",
}
This is a bug in the "vite:dep-pre-bundle" plugin. Plugins provide metadata for a given path in an
"onResolve" callback. All metadata provided for the same path must be consistent to ensure
deterministic builds. Due to parallelism, one set of provided metadata will be randomly chosen for
a given path, so providing inconsistent metadata for the same path can cause non-determinism.
It seems that on newly created Vue 3 projects simply running npm run build
does not perform a typecheck, in fact the result is identical as running only the second part of the build script (vite build
).
Steps to reproduce:
npm init [email protected]
TheWelcome.vue
and at the end of script
tag add const a: number = "888";
npm run build
("build": "vue-tsc --noEmit && vite build"
)Expected result - build failure due to ts error
Current result - successful build
Can you please clarify if my interpretation that vue-tsc --noEmit
in build
script is supposed to perform type check is wrong or if it was in fact meant to perform a typecheck?
When scaffolding a vue app with Typescript and Pinia it throws this error:
Node: 16.13.0
OS: Windows 10 Pro
Terminal: Powershell
How to reproduce:
$ npm init vue@3
√ Project name: ... my-create-vue-app
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Cypress for testing? ... No / Yes
Scaffolding project in C:\Users\danny\Documents\code\my-create-vue-app...
Done. Now run:
cd my-create-vue-app
npm install
npm run dev
$ cd my-create-vue-app
$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR! dev typescript@"~4.4.4" from the root project
npm ERR! peer typescript@"*" from [email protected]
npm ERR! node_modules/vue-tsc
npm ERR! dev vue-tsc@"^0.29.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^4.5.2" from [email protected]
npm ERR! node_modules/pinia
npm ERR! pinia@"^2.0.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/typescript
npm ERR! peerOptional typescript@"^4.5.2" from [email protected]
npm ERR! node_modules/pinia
npm ERR! pinia@"^2.0.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\danny\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\danny\AppData\Local\npm-cache\_logs\2021-12-03T14_00_21_729Z-debug.log
vite.confg.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
function resolve(dir: string) {
return `${path.resolve(__dirname, dir)}/`;
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
// "@/": new URL("./src/", import.meta.url).pathname,
"@/": resolve("src/"),
},
},
});
when i use the default configuration of 'alias', my project will fail to build.like this
when i use node v12,it will exit with error.
Alternatively, it can be reproduced by cloning the following repository for reproduction.
https://github.com/tetradice/create-vue_issue_20220121
When I run the npm run test:unit
command, I get the following error:
$ npm run test:unit
> test:unit
> vitest --environment jsdom
WATCH d:/work/temp/vue3-no-test-issue
? src/components/__tests__/HelloWorld.spec.js (0)
??????????????????????????????? Failed Suites 1 ????????????????????????????????
FAIL src/components/__tests__/HelloWorld.spec.js [ src/components/__tests__/HelloWorld.spec.js ]
Error: No tests found in suite src/components/__tests__/HelloWorld.spec.js
? runSuite node_modules/vitest/dist/entry.js:1755:30
? async runSuites node_modules/vitest/dist/entry.js:1769:5
? async startTests node_modules/vitest/dist/entry.js:1774:3
? async node_modules/vitest/dist/entry.js:1798:7
? async withEnv node_modules/vitest/dist/entry.js:1481:5
? async run node_modules/vitest/dist/entry.js:1797:5
??????????????????????????????????????????????????????????????????????????[1/1]?
Test Files 1 failed (1)
Tests no tests
Time 6.10s (in thread 1ms, 543803.87%)
FAIL Tests failed. Watching for file changes...
press h to show help, press q to quit
OS: Windows 10 Home
Node: v14.17.5
so we can automate vue3 project creation
When trying to create a new Vue 3 project using npm init vue@latest
with the defaults selected, I get a Cannot read property 'split' of undefined
error when trying to run the project. See output below:
$ npm init vue@latest
npx: installed 1 in 1.371sVue.js - The Progressive JavaScript Framework
✔ Project name: … vue-defaults
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / YesScaffolding project in /home/aner/vue-defaults...
Done. Now run:
cd vue-defaults
npm install
npm run dev$ cd vue-defaults
$ npm install[email protected] postinstall /home/aner/vue-defaults/node_modules/esbuild
node install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/vite/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"android","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-darwin-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-freebsd-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"freebsd","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"ia32"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-mips64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"mips64el"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-freebsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"arm"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-ppc64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"ppc64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-s390x):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"s390x"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-linux-riscv64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"linux","arch":"riscv64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-openbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"openbsd","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-netbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"netbsd","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-sunos-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"sunos","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-windows-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"ia32"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-windows-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/esbuild/node_modules/esbuild-windows-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"win32","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.added 32 packages from 51 contributors and audited 51 packages in 2.642s
4 packages are looking for funding
runnpm fund
for detailsfound 0 vulnerabilities
$ npm run dev
[email protected] dev /home/aner//vue-defaults
viteerror when starting dev server:
TypeError: Cannot read property 'split' of undefined
at /home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70782:33
at Array.reduce ()
at _interpolate (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70768:18)
at expand (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70812:32)
at loadEnv (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:71436:13)
at resolveConfig (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:70919:9)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async createServer (/home/aner/vue-defaults/node_modules/vite/dist/node/chunks/dep-1412e872.js:56404:20)
at async CAC. (/home/aner/vue-defaults/node_modules/vite/dist/node/cli.js:688:24)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev:vite
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR! /home/aner/.npm/_logs/2022-02-11T19_59_42_034Z-debug.log
Hi!
I'm trying to get unit tests to work properly and don't know how to deal with the following situation:
I started a new project with npm init vue@3
like so:
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
At root of the src
folder I add a simple TS file:
export const add = (a: number, b: number) => a + b;
And in my test, when I import it:
import { add } from '../utils';
I get the following error message:
module "...../src/utils"
File '..../src/utils.ts' is not listed within the file list of project '..../tsconfig.vitest.json'. Projects must list all files or use an 'include' pattern.ts(6307)
I left the tsconfigs file untouched, but here there are:
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"references": [
{
"path": "./tsconfig.vite-config.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"types": ["node", "jsdom"]
}
}
Currently, create-vue creates a project with cypress-ct as the unit testing solution.
Some of the rationales are explained by @yyx990803 in this video
As much as we all love Cypress, Jest is a very popular solution in the unit testing world.
Would it be possible to have the choice to use Jest at the project creation?
That would be a tremendous help to teams who want to migrate existing projects. I understand that Jest + Vite is complicated at the moment, but the issue is already really popular vitejs/vite#1955
Even if we can't leverage Vite with jest, maybe we can offer a simple setup using Jest + @vue/vue3-jest
+ VTU as the CLI does?
If the team is willing to add Jest support out-of-the-box, I can work on a PR to add this.
html:D:/myProject/fresh_homw/src/App.vue:2:23: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
2 │ import HelloWorld from '@/components/HelloWorld.vue'
After all, only some people use vscode, it is not recommended to add the .vscode directory to the template
Hi,
I just created a Vue app using the npm init vue
command.
When I run the test:e2
and test:e2e:ci
commands on my machine, Cypress does not run after starting the server.
These errors are fixed when I replace http://127.0.0.1:5050/
with tcp:5050
in test:e2e
and test:e2e:ci
scripts.
This means replacing:
{
"scripts": {
"test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
"test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
}
}
with:
{
"scripts": {
"test:e2e": "start-server-and-test preview tcp:5050 'cypress open'",
"test:e2e:ci": "start-server-and-test preview tcp:5050 'cypress run'",
}
}
fixed these errors.
Do you agree ? Can I create a pull request to fix this error?
Hello, maybe some newbie questions.
But I just want to remove the semicolons(I don't know why create-vue
not set this as default rules)
so i added a .prettierrc
file with the following settings, I think this is pretty common.
{
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 120,
"trailingComma": "es5"
}
now vscode started to complain about these settings, how can I remove these warnings?
The following is how I started the project.
I hope see command
deno run {comeurl}/create-vue-node.ts
the result same as npm init vue@latest
and
deno run {comeurl}/create-vue-deno.ts
result similar to npm init vue@latest but for deno tools
beside
npm init vue@latest
Hi,
Thank you for creating this tool!
It would be really great if create-vue
could setup and configure (including with JS or TS support) a chosen ruleset - like Vue CLI does.
For example when using Vue CLI a choice is presented:
vue-create
today:
I have looked into how this can be setup and honestly it's pretty hard to understand - ESLint is powerful but hard to configure correctly. There appears to be many possible solutions but once Typescript is in the mix the complexity increases for anyone, like me, that isn't that familiar with the really low level details of configuring ESLint. Even if someone is able to work through the (many) conflicting articles on setting this up there is still the reality of needing to go through the same complexity for every new project.
One of the great features of Vue CLI is that this is already configured for a user if they pick TS, ESLint, Aibnb.
Please could this prompt be added to create-vue
? (and the Standard
standard too for users of that)
Since node 12 is still widly used, it will be convenient to set esbuild target as node 12
Currently (v3.1.4), the type-checking task uses the default tsconfig.json
file, which excludes unit tests.
It would be nice to also typecheck tests: as a member of the VTU team, I can attest we spend a lot of time on the TypeScript support, so it would be sad to not check them by default 😄
Sadly, when running yarn typecheck -p tsconfig.vitest.json
, the task fails with:
$ vue-tsc --noEmit -p tsconfig.vitest.json
incremental mode is not yet supported
/Users/cedric/Code/temp/test/node_modules/typescript/lib/tsc.js:99310
function createIncrementalProgram(_a) { console.error('incremental mode is not yet supported'); throw 'incremental mode is not yet supported';
^
incremental mode is not yet supported
This leads to this issue in the Volar repo: vuejs/language-tools#787
Note that the last comment from @johnsoncodehk is to recommend using a single tsconfig.
So do you think the composite path is the best one? Maybe we should stick to a single tsconfig that checks tests and sources at the same time?
I spotted a comment in a recent commit about Vitest support.
That would be great, and probably a better alternative than Jest support.
I would be willing to help move this forward if nobody is working on this
I suppose we would add a --vitest
flag.
How do you plan to integrate with the current --tests
flag?
Something like: if both --cypress
and --vitest
are present, use Vitest for unit test, and use Cypress for e2e, otherwise, if only cypress is present, use it for both (as --tests
does now)?
It will also add other combinations for the playground: is it OK? (jsx-pinia-vitest
, jsx-pinia-cypress
, jsx-pinia-vitest-cypress
, jsx-router-vitest
, etc...)
Create a new project with Cypress > yes
Via npm init vue@latest
Running npm run test:unit:ci
fails
Details:
[vite] Internal server error: Cannot read property 'uid' of undefined
Plugin: vite:import-analysis
File: ../with-tests/src/components/__tests__/HelloWorld.spec.js
Running npm run test:e2e:ci
fails with hanging server
Details:
/dist
folder, thus server returns CANNOT GET /I went with the following configuration:
npm init vue@3
Vue.js - The Progressive JavaScript Framework
√ Project name: ... client
√ Add TypeScript? ... Yes
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... No / Yes (tried with both)
√ Add Vitest for Unit Testing? ... No
√ Add Cypress for both Unit and End-to-End testing? ... No
√ Add ESLint for code quality? ... No
after running npm install
, which gave me these three warnings:
npm WARN deprecated [email protected]: WARNING: This project has been renamed to @volar/pug-language-service. Install using @volar/pug-language-service instead.
npm WARN deprecated [email protected]: WARNING: This project has been renamed to @volar/typescript-language-service. Install using @volar/typescript-language-service instead.
npm WARN deprecated [email protected]: WARNING: This project has been renamed to @volar/vue-language-service. Install using @volar/vue-language-service instead.
I tried to run npm run dev
and I'm getting the following error:
npm run dev
> [email protected] dev
> vite
X [ERROR] Cannot read file "../../../..": The handle is invalid.
html:<redacted>/client/index.html:1:7:
1 │ import "/src/main.ts"
╵ ~~~~~~~~~~~~~~
error when starting dev server:
Error: Build failed with 1 error:
html:<redacted>/client/index.html:1:7: ERROR: Cannot read file "../../../..": The handle is invalid.
at failureErrorWithLog (<redacted>\client\node_modules\esbuild\lib\main.js:1599:15)
at <redacted>\client\node_modules\esbuild\lib\main.js:1245:28
at runOnEndCallbacks (<redacted>\client\node_modules\esbuild\lib\main.js:1030:63)
at buildResponseToResult (<redacted>\client\node_modules\esbuild\lib\main.js:1243:7)
at <redacted>\client\node_modules\esbuild\lib\main.js:1352:14
at <redacted>\client\node_modules\esbuild\lib\main.js:662:9
at handleIncomingPacket (<redacted>\client\node_modules\esbuild\lib\main.js:759:9)
at Socket.readFromStdout (<redacted>\client\node_modules\esbuild\lib\main.js:629:7)
at Socket.emit (node:events:394:28)
at addChunk (node:internal/streams/readable:312:12)
npm ERR! code 1
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.