vite创建一个标准vue3+ts+pinia项目
时间：2023-01-30 10:34:05|栏目：vue|点击： 次
使用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 // 运行项目
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
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). 创建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 相关函数，如：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 相关函数，如：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). 使用方法
<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文件
// .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试一下）
},
};
