Improve configs
-
Update
tsconfig.json
.
"esModuleInterop": true, - "lib": ["esnext", "dom"] + "lib": ["esnext", "dom"], + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } }, - "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] + "include": [ + "src/**/*.ts", + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.vue", + "tests/**/*.ts", + "tests/**/*.tsx" + ] }
-
Now we can update our code to use
@
as root of a local import path.In
src/App.vue
-import HelloWorld from './components/HelloWorld.vue' +import HelloWorld from '@/components/HelloWorld.vue'
In
src/main.ts
-import App from './App.vue' +import App from '@/App.vue' ... - <img alt="Vue logo" src="./assets/logo.png" /> + <img alt="Vue logo" src="@/assets/logo.png" />
git add -u
git cim 'update tsconfig: add tests to include and use @ as root'
-
But if we run our dev server, we will get this error.
$ npm run dev > vite-vue-typescript-starter@0.0.0 dev > vite > html:/path/to/project/vue-ts/src/App.vue:3:23: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory) 3 │ import HelloWorld from '@/components/HelloWorld.vue' ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ error when starting dev server: Error: Build failed with 1 error: html:/path/to/project/vue-ts/src/App.vue:3:23: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory) at failureErrorWithLog (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1449:15) at /path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1131:28 at runOnEndCallbacks (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:921:63) at buildResponseToResult (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1129:7) at /path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1236:14 at /path/to/project/vue-ts/node_modules/esbuild/lib/main.js:609:9 at handleIncomingPacket (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:706:9) at Socket.readFromStdout (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:576:7) at Socket.emit (node:events:394:28) at Socket.emit (node:domain:475:12)
Fix error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
-
Add
resolve
config tovite.config.js
+ resolve: { + alias: [{ find: '@', replacement: '/src' }], + },
git add -u
git commit -m 'fix: vite not able to resolve @/'
Use base: '/vue-ts/'
only for deployment
-
Delete
base
fromvite.config.js
plugins: [vue()], - base: '/vue-ts/', resolve: { alias: [{ find: '@', replacement: '/src' }], },
-
Add
deploy
script topackage.json
"build": "vue-tsc --noEmit && vite build", + "deploy": "vue-tsc --noEmit && vite build --base '/vue-ts/'", "serve": "vite preview",
-
Update github workflow.
@@ -15,7 +15,7 @@ jobs: strategy: matrix: - node-version: [12.x, 14.x, 16.x] + node-version: [14.x, 16.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: @@ -30,6 +30,8 @@ jobs: - run: npm run build - run: npm run test + - run: npm run deploy + if: matrix.node-version == '16.x' - name: Deploy # deploy only for version 16.x if: matrix.node-version == '16.x'
git add -u
git commit -m 'use vite base option only for deployment'
Add links to TypeScript and Jest docs
-
Update
src/componments/HelloWorld.vue
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a> | - <a href="https://www.typescriptlang.org/docs/" target="_blank">TypeScript Docs</a> + <a href="https://www.typescriptlang.org/docs/" target="_blank" + >TypeScript Docs</a + > | - <a href="https://jestjs.io/docs/getting-started" target="_blank">Jest Docs</a> + <a href="https://jestjs.io/docs/getting-started" target="_blank" + >Jest Docs</a + >
git add -u
git commit -m 'add links to typescript and jest docs'
Delete unused styles
- After code review, I've found that
vue-ts
template for Vite contains unused styles forlabel
tag. -
Remove unused styles in
src/component/HelloWorld.vue
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index b09f889..0504d43 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -64,11 +64,6 @@ a { color: #42b983; } -label { - margin: 0 0.5em; - font-weight: bold; -} - code { background-color: #eee; padding: 2px 4px;
git add -u
git commit -m 'delete unused styles for label'
Top comments (2)
Ey! Great serie!
How have you resolve this console warning (on
npm run dev
)?[@vue/compiler-sfc]
definePropsis a compiler macro and no longer needs to be imported.
But if I don't import
defineProps
inHelloWorld.vue
file, the next line is underline in red:defineProps<{ msg: string }>()
With this message:
'defineProps' is not defined.eslint(no-undef)
Thanks!
Hi, thanks!
In this case you should follow compiler instructions and do not import
defineProps
. But to makeeslint
happy you would need to adddefineProps
inglobals
. Use this link for more information eslint.vuejs.org/user-guide/#compi...Also probably you will encounter
'props' is assigned a value but never used @typescript-eslint/no-unused-vars
. This could be fixed with eslint.vuejs.org/rules/script-setu...