vite怎么創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目

本文小編為大家詳細(xì)介紹“vite怎么創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vite怎么創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

【01】使用的 Yarn創(chuàng)建項(xiàng)目:

1、執(zhí)行命令

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

3、cd my-vue-app //進(jìn)入到項(xiàng)目
4、yarn // 安裝依賴
5、yarn dev // 運(yùn)行項(xiàng)目

vite.config.ts

import path from 'path' // 需要安裝 @types/node 并在 tsconfig.node.json的compilerOptions中配置"allowSyntheticDefaultImports": true
import { 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', // 監(jiān)聽本地所有ip
    port: 3010 // 項(xiàng)目端口
  },
  resolve:{
    alias:{
      '@': _resolve('src') // 別名
    }
  }
})

【02】在項(xiàng)目中使用pinia

pinia官網(wǎng)

1. 安裝pinia

yarn add pinia

2. 引用到項(xiàng)目

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia' // 導(dǎo)入pinia

const app = createApp(App)
app.use(createPinia()) // 注冊pinia

app.mount('#app')

3. 使用pinia Demo

// ./src/stores/counterStore.ts

import { defineStore } from 'pinia',

const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0
  })
})

// setup中使用

import { useCounterStore } from '../stores/counterStore'

export default {
  setup() {
    const counterStore = useCounterStore()

    return { counterStore }
  },
  computed: {
    tripleCounter() {
      return counterStore.counter * 3
    },
  },
}

【03】添加vue-router

1. 安裝 router

yarn add vue-router

2. 如何使用

1). 創(chuàng)建router

// src/router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: '/login', // 瀏覽器訪問地址
    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). 引用到項(xiàng)目

// main.ts
import router from './router'

app.use(router)

【04】 安裝按需自動(dòng)導(dǎo)入插件

1. 首先需要安裝unplugin-auto-import和unplugin-vue-components兩個(gè)插件

- unplugin-auto-import： 自動(dòng)導(dǎo)入api 
- unplugin-vue-components： 自動(dòng)導(dǎo)入使用的組件

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

2. 配置 vite.cinfig.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    // 自動(dòng)導(dǎo)入API方法
    AutoImport({
      imports: [  // 自動(dòng)導(dǎo)入API配置
        'vue', 
        'vue-router',
        'pinia',
      ],
      resolvers: [], // custom resolvers
      dts: 'src/typings/auto-imports.d.ts', // 導(dǎo)入存放地址
    }),
    // 自動(dòng)導(dǎo)入組件
    Components({
      resolvers: [], // custom resolvers
      dts: 'src/typings/components.d.ts',
    }),
  ]
})

【05】 添加element-plus組件庫

1. 先安裝依賴包

yarn add element-plus

2. 自動(dòng)導(dǎo)入樣式和組件

1). 首先你需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件

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

2). 配置到vite

// vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    // 自動(dòng)導(dǎo)入 Element Plus 相關(guān)函數(shù)，如：ElMessage, ElMessageBox... (帶樣式)
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 自動(dòng)導(dǎo)入 Element Plus 組件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. element-plus 圖標(biāo)庫

1). 安裝依賴包

// 安裝包    
yarn add @element-plus/icons-vue

2). 自動(dòng)導(dǎo)入icon組件配置

// 使用unplugin-icons和unplugin-auto-import自動(dòng)從Iconify導(dǎo)入任何圖標(biāo)集合
yarn add unplugin-auto-import unplugin-icons -D

// vite.config.ts

import { 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'
// 自動(dòng)導(dǎo)入element圖標(biāo)
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(),
    // 自動(dòng)導(dǎo)入 Element Plus 相關(guān)函數(shù)，如：ElMessage, ElMessageBox... (帶樣式)
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        // 自動(dòng)導(dǎo)入圖標(biāo)組件
        IconsResolver({
          prefix: 'Icon',
        }),
        
      ],
      dts: path.resolve(_resolve('src'), 'auto-imports.d.ts'),
    }),
    // 自動(dòng)導(dǎo)入 Element Plus 組件
    Components({
      resolvers: [
        // 自動(dòng)注冊圖標(biāo)組件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        ElementPlusResolver()],
    }),
    Icons({
      autoInstall: true, // 是否自動(dòng)加載
    }),
    Inspect(),
  ],
  server:{
    host: '0.0.0.0', // 監(jiān)聽本地所有ip
    port: 3010 // 項(xiàng)目端口
  },
  resolve:{
    alias:{
      '@': _resolve('src') // 別名
    }
  }
})

3). 使用方法

<template>
    <i-ep-add-location />
    <IEpRefresh />
</template>

【06】添加sass

1. 安裝

yarn add sass sass-loader -D

2. 配置sass全局變量

// vite.config.ts
export default {
  css:{
    preprocessorOptions: {
      scss: {
        additionalData: "@import './src/assets/css/mixin.scss';",
      },
    },
  }
}

【07】 安裝prettier 和 eslint

1.安裝依賴項(xiàng)

// 安裝prettier------------------------------------------------------------
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

// 安裝eslint-------------------------------------------------
yarn add eslint eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

2.根目錄添加.prettierrc.js文件

// .prettierrc.js

exports.modules = {
  // 設(shè)置強(qiáng)制單引號
  singleQuote: true,
  autoFix: false,
  printWidth: 140,
  semi: false,
  trailingComma: "none",
  arrowParens: "avoid",
  endOfLine: "LF",
};

3. 根目錄添加.eslintrc.js文件

eslint官網(wǎng)

// .eslintrc.js

module.exports = {
  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", // 關(guān)閉多根節(jié)點(diǎn)的校驗(yàn)vue3可使用多個(gè)根節(jié)點(diǎn)
    quotes: ["error", "single"], // 引號規(guī)則為：“單引號”，否則一律按照 “error” 處理（你也可以改成warn試一下）
  },
};

讀到這里，這篇“vite怎么創(chuàng)建一個(gè)標(biāo)準(zhǔn)vue3+ts+pinia項(xiàng)目”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。