使用vite创建一个标准vue3+ts+pinia项目

语言: CN / TW / HK

【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); } // https://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链接](https://github.com/antfu/unplugin-auto-import)
- unplugin-vue-components: 自动导入使用的组件 [github链接](https://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); } // https://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试一下) }, }; ```