使用vite建立一個標準vue3+ts+pinia專案_xfan

【01】使用的 Yarn建立專案:

1、執行命令 yarn create vite my-vue-app --template vue-ts
3、cd my-vue-app //進入到專案
4、yarn // 安裝依賴
5、yarn dev // 執行專案

```TS 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); } // http://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server:{ host: '0.0.0.0', // 監聽本地所有ip port: 3010 // 專案埠 }, resolve:{ alias:{ '@': _resolve('src') // 別名 } } })

```

【02】在專案中使用pinia pinia官網

1. 安裝pinia

yarn add pinia

2. 引用到專案

```ts 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

```ts // ./src/stores/counterStore.ts

import { defineStore } from 'pinia',

const useCounterStore = defineStore('counterStore', { state: () => ({ counter: 0 }) }) ts // 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). 建立router

```ts // 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). 引用到專案

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

app.use(router) ```

【04】安裝按需自動匯入外掛

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

- unplugin-auto-import： 自動匯入api [github連結](http://github.com/antfu/unplugin-auto-import)
- unplugin-vue-components： 自動匯入使用的元件 [github連結](http://github.com/antfu/unplugin-vue-components)

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

2. 配置 vite.cinfig.ts

```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 ```ts // 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 相關函式，如：ElMessage, ElMessageBox... (帶樣式) AutoImport({ resolvers: [ElementPlusResolver()], }), // 自動匯入 Element Plus 元件 Components({ resolvers: [ElementPlusResolver()], }), ], })

```

3. element-plus 圖示庫

1). 安裝依賴包 ts // 安裝包 yarn add @element-plus/icons-vue
2). 自動匯入icon元件配置 ts // 使用unplugin-icons和unplugin-auto-import自動從Iconify匯入任何圖示集合 yarn add unplugin-auto-import unplugin-icons -D

```ts // 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); } // http://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), // 自動匯入 Element Plus 相關函式，如：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', // 監聽本地所有ip port: 3010 // 專案埠 }, resolve:{ alias:{ '@': _resolve('src') // 別名 } } }) ```

3). 使用方法 ts <template> <i-ep-add-location /> <IEpRefresh /> </template>

【06】新增sass

1. 安裝

yarn add sass sass-loader -D

2. 配置sass全域性變數

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

【07】安裝prettier 和 eslint

1.安裝依賴項

```ts // 安裝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檔案

```js // .prettierrc.js

exports.modules = { // 設定強制單引號 singleQuote: true, autoFix: false, printWidth: 140, semi: false, trailingComma: "none", arrowParens: "avoid", endOfLine: "LF", };

```

3. 根目錄新增.eslintrc.js檔案 eslint官網

```js // .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", // 關閉多根節點的校驗vue3可使用多個根節點 quotes: ["error", "single"], // 引號規則為：“單引號”，否則一律按照 “error” 處理（你也可以改成warn試一下） }, }; ```

使用vite建立一個標準vue3+ts+pinia專案