vite創(chuàng)建一個標準vue3+ts+pinia項目

更新時間：2022年05月18日 14:17:58 作者：xfan0516

本文主要介紹了vite創(chuàng)建一個標準vue3+ts+pinia項目，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

1、執(zhí)行命令

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

3、cd my-vue-app //進入到項目
4、yarn // 安裝依賴
5、yarn dev // 運行項目

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 // 項目端口
? },
? resolve:{
? ? alias:{
? ? ? '@': _resolve('src') // 別名
? ? }
? }
})

【02】在項目中使用pinia

pinia官網(wǎng)

1. 安裝pinia

yarn add pinia

2. 引用到項目

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia' // 導入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). 引用到項目

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

app.use(router)

【04】安裝按需自動導入插件

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

- unplugin-auto-import：自動導入api [github鏈接](https://github.com/antfu/unplugin-auto-import)
- unplugin-vue-components：自動導入使用的組件 [github鏈接](https://github.com/antfu/unplugin-vue-components)

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: [
? ? // 自動導入API方法
? ? AutoImport({
? ? ? imports: [ ?// 自動導入API配置
? ? ? ? 'vue',?
? ? ? ? 'vue-router',
? ? ? ? 'pinia',
? ? ? ],
? ? ? resolvers: [], // custom resolvers
? ? ? dts: 'src/typings/auto-imports.d.ts', // 導入存放地址
? ? }),
? ? // 自動導入組件
? ? Components({
? ? ? resolvers: [], // custom resolvers
? ? ? dts: 'src/typings/components.d.ts',
? ? }),
? ]
})

【05】添加element-plus組件庫

1. 先安裝依賴包

yarn add element-plus

2. 自動導入樣式和組件

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: [
? ? // 自動導入 Element Plus 相關(guān)函數(shù)，如：ElMessage, ElMessageBox... (帶樣式)
? ? AutoImport({
? ? ? resolvers: [ElementPlusResolver()],
? ? }),
? ? // 自動導入 Element Plus 組件
? ? Components({
? ? ? resolvers: [ElementPlusResolver()],
? ? }),
? ],
})

3. element-plus 圖標庫

1). 安裝依賴包

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

2). 自動導入icon組件配置

// 使用unplugin-icons和unplugin-auto-import自動從Iconify導入任何圖標集合
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'
// 自動導入element圖標
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(),
? ? // 自動導入 Element Plus 相關(guān)函數(shù)，如：ElMessage, ElMessageBox... (帶樣式)
? ? AutoImport({
? ? ? resolvers: [
? ? ? ? ElementPlusResolver(),
? ? ? ? // 自動導入圖標組件
? ? ? ? IconsResolver({
? ? ? ? ? prefix: 'Icon',
? ? ? ? }),
? ? ? ??
? ? ? ],
? ? ? dts: path.resolve(_resolve('src'), 'auto-imports.d.ts'),
? ? }),
? ? // 自動導入 Element Plus 組件
? ? Components({
? ? ? resolvers: [
? ? ? ? // 自動注冊圖標組件
? ? ? ? IconsResolver({
? ? ? ? ? enabledCollections: ['ep'],
? ? ? ? }),
? ? ? ? ElementPlusResolver()],
? ? }),
? ? Icons({
? ? ? autoInstall: true, // 是否自動加載
? ? }),
? ? Inspect(),
? ],
? server:{
? ? host: '0.0.0.0', // 監(jiān)聽本地所有ip
? ? port: 3010 // 項目端口
? },
? 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.安裝依賴項

// 安裝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 = {
? // 設置強制單引號
? 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é)點的校驗vue3可使用多個根節(jié)點
? ? quotes: ["error", "single"], // 引號規(guī)則為：“單引號”，否則一律按照 “error” 處理（你也可以改成warn試一下）
? },
};

到此這篇關(guān)于vite創(chuàng)建一個標準vue3+ts+pinia項目的文章就介紹到這了,更多相關(guān)vite創(chuàng)建vue3+ts+pinia內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: