Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "vite how to create a standard vue3+ts+pinia project", the content is detailed, the steps are clear, and the details are handled properly. I hope this "vite how to create a standard vue3+ts+pinia project" article can help you solve your doubts.

[01] use the Yarn to create the project:

1. Execute orders

Yarn create vite my-vue-app-template vue-ts

3. Cd my-vue-app / / enter the project

4. Yarn / / installation dependency

5. Yarn dev / / run the project

Vite.config.ts

Import path from 'path' / / you need to install @ types/node and configure "allowSyntheticDefaultImports" in tsconfig.node.json 's compilerOptions: trueimport {defineConfig} from' vite'import vue from'@ vitejs/plugin-vue'function _ resolve (dir) {return path.resolve (_ _ dirname, dir) } / / https://vitejs.dev/config/export default defineConfig ({plugins: [vue ()], server: {host: '0.0.0.0, / / listen on all local ip port: 3010 / / project ports}, resolve: {alias: {' @': _ resolve ('src') / / alias}) [02] use pinia in the project

Pinia official website

1. Install pinia

Yarn add pinia

two。 Reference to the project

Import {createApp} from 'vue'import App from'. / App.vue'import {createPinia} from 'pinia' / / Import piniaconst app = createApp (App) app.use (createPinia ()) / / register piniaapp.mount (' # app')

3. Use pinia Demo

/. / src/stores/counterStore.tsimport {defineStore} from 'pinia',const useCounterStore = defineStore (' counterStore', {state: () = > ({counter: 0})}) / / setup add vue-router using import {useCounterStore} from'.. / stores/counterStore'export default {setup () {const counterStore = useCounterStore () return {counterStore}, computed: {tripleCounter () {return counterStore.counter * 3},},} [03]

1. Install router

Yarn add vue-router

two。 How to use

1)。 Create router

/ / src/router/index.tsimport {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router" Const routes: RouteRecordRaw [] = [{path:'/ login', / / browser access address name: 'Login', component: () = > import (/ * webpackChunkName: "login" * / new URL ('. / pages/Login/index.vue', import.meta.url). Href), mate: {}}] const router = createRouter ({history: createWebHashHistory (), routes,}) export default router

2)。 Reference to the project

/ / main.tsimport router from'. / router'app.use (router) [04] install the automatic import plug-in on demand

1. First of all, you need to install the unplugin-auto-import and unplugin-vue-components plug-ins

-unplugin-auto-import: automatically import api

-unplugin-vue-components: automatically imports the components used

Yarn add unplugin-auto-import unplugin-vue-components-D

two。 Configure vite.cinfig.ts

Import AutoImport from 'unplugin-auto-import/vite'import Components from' unplugin-vue-components/vite'export default defineConfig ({plugins: [/ / automatically import API method AutoImport ({imports: [/ / automatically import API configuration 'vue',' vue-router', 'pinia',], resolvers: [] / / custom resolvers dts: 'src/typings/auto-imports.d.ts', / / Import address}), / / automatic import component Components ({resolvers: [], / / custom resolvers dts:' src/typings/components.d.ts',}),]}) [05] add element-plus component library

1. Install the dependency package first

Yarn add element-plus

two。 Automatically import styles and components

1)。 First of all, you need to install unplugin-vue-components and unplugin-auto-import plug-ins

Yarn add unplugin-vue-components unplugin-auto-import-D

2)。 Configure to vite

/ / vite.config.tsimport AutoImport from 'unplugin-auto-import/vite'import Components from' unplugin-vue-components/vite'import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'export default defineConfig ({plugins: [/ / automatically import ElementPlus related functions, such as ElMessage, ElMessageBox... (with style) AutoImport ({resolvers: [ElementPlusResolver ()],}), / / automatically import ElementPlus component Components ({resolvers: [ElementPlusResolver ()],}),],})

3. Element-plus icon library

1)。 Install dependency packages

/ / install the package yarn add @ element-plus/icons-vue

2)。 Automatically import icon component configuration

/ / use unplugin-icons and unplugin-auto-import to automatically import any collection of icons from Iconify yarn add unplugin-auto-import unplugin-icons-vite.config.tsimport {defineConfig} from 'vite'import vue from' @ vitejs/plugin-vue'import AutoImport from 'unplugin-auto-import/vite'import Components from' unplugin-vue-components/vite'import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'// automatically import element icon import Icons from' unplugin-icons/vite 'import IconsResolver from' unplugin-icons/resolver'import Inspect from 'vite-plugin-inspect'const path = require (' path') Function _ resolve (dir) {return path.resolve (_ _ dirname, dir);} / / https://vitejs.dev/config/export default defineConfig ({plugins: [vue (), / / automatically import Element Plus related functions, such as ElMessage, ElMessageBox... (with style) AutoImport ({resolvers: [ElementPlusResolver (), / / automatically import icon component IconsResolver ({prefix: 'Icon',}),], dts: path.resolve (_ resolve (' src'), 'auto-imports.d.ts'),}) / / automatically import ElementPlus components Components ({resolvers: [/ / automatically register icon components IconsResolver ({enabledCollections: ['ep'],}), ElementPlusResolver ()],}), Icons ({autoInstall: true, / / whether to automatically load}), Inspect (),] Server: {host: '0.0.0.0ports, / / listen on all local ip port: 3010 / / project ports}, resolve: {alias: {' @': _ resolve ('src') / / alias})

3)。 Usage

[06] add sass

1. Installation

Yarn add sass sass-loader-D

two。 Configure sass global variables

/ / vite.config.tsexport default {css: {preprocessorOptions: {scss: {additionalData: "@ import'. / src/assets/css/mixin.scss';",} [07] install prettier and eslint1. Install dependencies / / install prettier---yarn add prettier eslint-config-prettier eslint-plugin-prettier-Dswab / install eslint-- -yarn add eslint eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import @ typescript-eslint/eslint-plugin @ typescript-eslint/parser-D

two。 Add .prettierrc.js file to the root directory

/ / .prettierrc.jsexports.modules = {/ / set mandatory single quotes singleQuote: true, autoFix: false, printWidth: 140, semi: false, trailingComma: "none", arrowParens: "avoid", endOfLine: "LF",}

3. Add .eslintrc.js file to the root directory

Eslint official website

/ / .eslintrc.jsmodule.module = {env: {browser: true, es2021: true,}, extends: ["plugin:vue/vue3-essential", "airbnb-base", "@ vue/typescript/recommended", "@ vue/prettier", "@ vue/prettier/@typescript-eslint",], parserOptions: {ecmaVersion: "latest", parser: "@ typescript-eslint/parser", sourceType: "module" }, plugins: ["vue", "@ typescript-eslint"], rules: {"vue/no-multiple-template-root": "off", / / check vue3 of multiple nodes can use multiple root nodes quotes: ["error", "single"], / / quotation mark rule is: "single quotation mark" Otherwise, it will be handled according to "error" (you can also change it to warn)},} Read here, this "vite how to create a standard vue3+ts+pinia project" article has been introduced, want to master the knowledge of this article still need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.