使用vite创建一个标准vue3+ts+pinia项目
【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试一下） }, }; ```