This template should help get you started developing with Vue 3 in Vite.
Update the indicators.json
file in the public/data
folder.
Check the src/entitites/ServiceType.ts
file. The select options are generated from the ServiceType
and ServiceSubtype
enums.
Check the src/entitites/CompanyType.ts
file. The select options are generated from the CompanyType
enum.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Lint with ESLint
npm run lint
The build will generate static files in the dist
folder. You can deploy it to any static hosting service. But if you want to deploy it after a path prefix, you need to set the base
option in vite.config.ts
export default defineConfig({
// ...
base: '/my-deploy-path/'
})
Website: https://www.naiveui.com/
Naive UI is used as the UI library and is installed Globally, see Install Globally.
Is possible to compilerOptions.types
in tsconfig.json
.
{
"compilerOptions": {
// ...
"types": ["naive-ui/volar"]
}
}
Website: https://pinia.vuejs.org/ Version: 2.x
Website: https://router.vuejs.org/ Version: 4.x
Website: https://v3.vuejs.org/ Version: 3.x
Website: https://vitejs.dev/ Version: 2.x Using plugin: @vitejs/plugin-vue
According to the ViteJS Documentation, Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed:
# .scss and .sass
npm add -D sass
Then inside single file components, you can import the styles like this:
<style lang="scss">
- [Vue Devtools](