序文
Vue3 + TypeScript を使用する過程で、この書き方は適応後は確かに快適になりました。Vue3 のセットアップ構文シュガーを介して、以前のように関数モジュールのすべてのものをフラグメントに書き込むことができます。関数には変数、メソッドが含まれます。 、時計、計算などを1つずつ実行し、メンテナンスが必要な場合は上下に回す必要があります。
そして、私の周りのフロントエンドの友人数人を含め、インターネット上の偉い人たちが TypeScript を批判しています。結局のところ、彼らはストリーキングに慣れていて、突然服を重ね着します。ははは、あなたが適応しないのは避けられません。初めて TypeScript を使い始めたときは、非常に不快で、エディターが赤くなることがよくありました。しかし、ts を使用すると、コードをより厳密に記述することができ、プロジェクトの実行時にさまざまなエラーを回避できます。個人的には、ブラウザーで間違いだらけの記事よりも、エディターで赤い記事が表示される方が良いと思います。結局のところ、私のレベルは高くなく、知識がこれだけしかありません。
ここで、まだ ts と js の関係について話したいと思います。ts は js のスーパーセットです。それは単純ですが、理解するには下品です。ts は、js に型システムを追加します。ts は、js のすべての機能を提供します。 ts を上手に使う 前提として、js を上手に使いこなすことが必要です。
プロジェクトをビルドする前の準備作業
vite 中国語ドキュメントの開始項目を読むことができます。vite には Node.js14.18 以降が必要です。私は nvm を使用し、バージョン 14.19.1 をインストールしました。
https://cn.vitejs.dev/中国語の文書をダウンロード
https://blog.csdn.net/m0_64697285/article/details/127318141nvm ツールをインストールするには、このブロガーの記事を参照してください。
vite プロジェクトを構築する
编辑器终端中，使用npm构建vite项目
npm create vite@latest
输入项目名
? Project name: » vue3_demo
选择Vue框架
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
Others
选择TypeScript
? Select a variant: » - Use arrow-keys. Return to submit.
JavaScript
> TypeScript
Customize with create-vue ↗
Nuxt ↗
进入创建的项目 可以直接控制台 cd vue3_demo 也可以编辑器打开文件夹vue3_demo
npm install
npm run dev
eslint と pretty を構成する
vscode プラグインのインストール
- Prettier - コードフォーマッタ (フォーマット)
- エスリント
- スタイルリント
1.安装插件
npm install -D eslint eslint-plugin-vue
2.进行eslint初始化
npm init @eslint/config
下面是我自己配置时候的选项，根据自己的需要去选择
? How would you like to use ESLint? ... => To check syntax and find problems
? What type of modules does your project use? ... => JavaScript modules (import/export)
? Which framework does your project use? ... => Vue.js
Does your project use TypeScript? => Yes
? Where does your code run? ... => Browser, Node
? What format do you want your config file to be in? ... => JavaScript
? Would you like to install them now? => Yes
? Which package manager do you want to use? ... => npm
运行完后，根目录下会生成.eslintrc.cjs文件
下面是我自己的配置项，非常简单的配置
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended' // 这里是将prettier作为插件被eslint使用，避免两者有冲突，放在extends最下方
],
overrides: [],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'max-len': ['error', 100], // 强制一行的最大长度
'no-shadow': 'off', // 禁止变量声明与外层作用域的变量同名
'no-unused-vars': 'warn', // 禁止出现未使用过的变量
eqeqeq: 'off', // 要求使用 === 和 !==
'prefer-const': 'warn', // 要求使用 const 声明那些声明后不再被修改的变量
'@typescript-eslint/no-empty-function': 'off', // 不允许空函数
'@typescript-eslint/no-explicit-any': 'off' // 禁止使用 any 类型
}
}
由于是vite构建的项目，需要添加插件，让vite识别eslint相关配置
npm install vite-plugin-eslint --save-dev
修改vite.config.ts
import eslint from 'vite-plugin-eslint' // 新增
plugins: [vue(), eslint()], // 新增 eslint()
配置编辑器保存后eslint自动修复代码
vscode => setting.json
{
"workbench.colorTheme": "Bluloco Light",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.fontSize": 16,
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"workbench.editor.enablePreview": false,
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.validate": [
"vue",
"html",
"javascript",
"graphql",
"javascriptreact",
"json",
"typescript",
"typescriptreact",
"js",
"ts",
"md"
],
"prettier.singleQuote": true,
"prettier.semi": false,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.iconTheme": "vscode-icons",
"editor.fontWeight": "normal",
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"cursorcode.accessToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkN1VWI0NkVHT3BHaXI4TDh3VkRQRCJ9.eyJpc3MiOiJodHRwczovL2N1cnNvci51cy5hdXRoMC5jb20vIiwic3ViIjoiZ2l0aHVifDEyMjAxMzc0OCIsImF1ZCI6WyJodHRwczovL2N1cnNvci51cy5hdXRoMC5jb20vYXBpL3YyLyIsImh0dHBzOi8vY3Vyc29yLnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE2ODI0MTUyNTksImV4cCI6MTY4MjUwMTY1OSwiYXpwIjoiS2JaVVI0MWNZN1c2elJTZHBTVUo3STdtTFlCS09DbUIiLCJzY29wZSI6Im9wZW5pZCBwcm9maWxlIG9mZmxpbmVfYWNjZXNzIn0.vfr0VLYkPSI4lXmGPt2I7oDbqsqLmjpMCiBAxpeauiVb6B_7Xb7s3OOoa6l2mSAMl1gnd7uqdNhtqk78pOxoo9Kt3mTfqTO-KlhJ3ppUG5m9NN6LIDcoxsYa8KeplvYPmgRD9vcz1P22xQjHc--g4bgrG85pjBB92irqpzCBKQkW9JRqi514vRF0oVWRoh7aX6NafnMKqjtqeLch8T4tuEPHmH88hAM5TOKLaTGO3fr4Iu7hqTRHOntxiWMJdr38YTIUEIkjIfrFxX5mHIL2mPUur6y9gyIsBpAoB3BJqWK6-xxJyMYtbJmkReinOdsj4Irt31Vu1ddm18P5Vb3FIQ",
"volar.format.initialIndent": {
"html": true
},
"prettier.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"stylelint.enable": true,
"scss.lint.unknownAtRules": "ignore",
"stylelint.validate": ["css", "scss", "vue"],
"editor.tabSize": 2,
"prettier.useTabs": true,
"editor.formatOnSave": true, // 开启保存文件自动格式化代码
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
"prettier.requireConfig": true,
"settingsSync.ignoredExtensions": [] // 需要Prettier的配置文件
}
修改tsconfig.json
"compilerOptions": {
"types": ["vite/client"], // 新增，解决eslint对import.meta.env的报错
}
最后，配置prettier自动修复另外一些代码
npm install -D prettier
npm install -D eslint-config-prettier // eslint兼容的插件
npm install -D eslint-plugin-prettier // eslint的prettier
根目录下新建.prettierrc.cjs
module.exports = {
// 一行最多一百字符
printWidth: 100,
// 使用2个空格缩进
tabWidth: 2,
// 不适用缩进符而使用空格
useTabs: false,
// 不尾随分号
semi: false,
// 使用单引号
singleQuote: true,
// 多行逗号分隔的语法中，最后一行不加逗号
trailingComma: 'none',
// 单个参数的箭头函数不加括号
arrowParens: 'avoid',
// 对象大括号内两边是否加空格
bracketSpacing: true
}
新しい運用環境変数と開発環境変数を作成し、開発環境変数と運用環境変数を構成します。
与src同级，创建.env.production与.env.development文件
字段须VITE开头，否则不识别，也可以自行配置后，使用其他字段
想用其他字段 参考 https://blog.csdn.net/weixin_45547638/article/details/127277857
// .env.development
# 开发环境
VITE_BASE_URL = http://192.168.50.207:8080/api
VITE_APP_TITLE = 开发环境
// .env.production
# 生产环境
VITE_BASE_URL = http://192.168.50.161:5173/api
VITE_APP_TITLE = 生产环境
tsconfig.jsonを変更する
// 在compilerOptions中新增
{
"compilerOptions": {
...
"baseUrl": ".", // 未设置baseUrl，不允许使用非相对路径
"paths": {
"@": ["src"],
"@/*": ["src/*"]
}
},
vite.config.tsを変更する
// vite.config.ts
import {
defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
resolve } from 'path'
export default (({
mode }) => {
在启动项目时，控制台打印环境。只是给自己看当前属于什么环境和BASE_URL
console.log(mode)
const BASE_URL = loadEnv(mode, process.cwd()).VITE_BASE_URL
console.log(BASE_URL)
return defineConfig({
// base: './',
plugins: [vue()],
// 配置别名
resolve: {
alias: {
"@": resolve(__dirname, './src')
}
}
})
})
// 会报错： 找不到名称'__dirname'
path模块是node.js的内置模块，node.js默认不支持ts文件
安装@type/node依赖包 npm install @types/node --save-dev
package.jsonを変更する
// package.json 修改scripts中内容，修改后为
"scripts": {
"start": "vite --host --open", // npm start启动项目，启动后自动打开浏览器，并在控制台输出BASE_URL
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
基本的な Vite + Vue3 プロジェクトの初期構築が完了しました。次に、プロジェクトに必要なツールを設定する必要があります。
Element Plusフレームワークを統合し、Lessをインストールする
// 第一步 npm安装
npm install element-plus --save
// 第二步 参考Element Plus官网，可完整引入或按需导入 我选择按需导入
// 按需导入需要安装以下两个插件
npm install -D unplugin-vue-components unplugin-auto-import
// 修改vite.config.ts
import {
defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default (({
mode }) => {
console.log(mode)
const BASE_URL = loadEnv(mode, process.cwd()).VITE_BASE_URL
console.log(BASE_URL)
return defineConfig({
// base: './',
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
}),
],
// 配置别名
resolve: {
alias: {
"@": resolve(__dirname, './src')
}
}
})
})
// 安装Element Plus Icon
npm install @element-plus/icons-vue
// 修改main.ts
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')
// 安装Less
npm i less
Piniaを統合し、 Pinia の永続化ツールについて学ぶ
// npm安装
npm install pinia
// 先在main.ts中引入pinia
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia).mount('#app')
// src下新建store文件夹 根据不同业务需要创建不同的 use_textName_Store.ts 文件
// 安装pinia-plugin-persist 实现数据持久化储存
npm i pinia-plugin-persist --save
// 新建useUserStore.ts
import {
defineStore } from "pinia";
export const useUserStore = defineStore('user', {
state: () => {
return {
userName: sessionStorage.getItem("userName"),
phone: sessionStorage.getItem("phone"),
token: sessionStorage.getItem("satoken"),
}
},
getters: {
},
actions: {
setUser (user: any) {
this.userName = user.userName
this.phone = user.phone
sessionStorage.setItem("userName", user.userName)
sessionStorage.setItem("phone", user.phone)
},
setToken (token: any) {
this.token = token
sessionStorage.setItem(token.tokenName, token.tokenValue)
}
},
// 开启数据缓存 默认sessionStorage state属性全部储存
persist: {
enabled: true,
}
// 也可以指定sessionStorage或者localStorage 指定持久化字段
persist: {
enabled: true,
strategies: [
{
storage: localStorage,
paths: ['id'],//指定要持久化的字段
}
]
}
})
// Pinia和VueX相比，在单个文件中最大的差别，就是去掉了饱受诟病的mutations
// 在.vue文件中使用pinia=>useUserStore
import {
useUserStore } from '@/store/userStore';
const userStore = useUserStore()
Vue-Routerを統合し、ダイナミックルーティング機能を実行します
// npm安装Vue-Router
npm install vue-router@4
// 网上有很多关于vue3动态路由的文档博客，配合ts使用，不过我试用了很多，效果都不尽人意，最后，自己总结了可行的动态路由方式。没有配合后端来完成动态路由，后期研究明白，会在文章中补充的。
// src下新建router文件夹 => 新建index.ts 存放不需要权限的路由及beforeEach
import {
createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const staticRoutes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'Login',
meta: {
hidden: true,
title: '登录页'
},
component: () => import('@/views/login/index.vue')
},
{
path: '/',
name: 'layout',
component: () => import('@/layout/index.vue'),
redirect: '/home',
meta: {
hidden: false
},
children: [
{
path: '/home',
name: 'home',
component: () => import('@/views/home/index.vue'),
meta: {
title: '首页',
icon: 'House'
}
}
]
},
{
path: '/404',
meta: {
hidden: true,
title: '404'
},
component: () => import('@/views/error_page/404.vue')
},
]
const router = createRouter({
history: createWebHistory(),
routes: staticRoutes
})
export default router
// router文件夹下 新建trendsRouter.ts 存放动态路由内容
import {
RouteRecordRaw } from "vue-router";
const trendsRouter: Array<RouteRecordRaw> = [
{
path: '/echarts',
name: 'echarts',
component: () => import('@/views/echarts/index.vue'),
meta: {
title: '可视化',
icon: 'House'
}
}
]
export default trendsRouter
// 在index.ts中，引入trendsRouter.ts，并补充router.beforeEach
import {
createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import trendsRouter from "./trendsRouter";
const staticRoutes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'Login',
meta: {
hidden: true,
title: '登录页'
},
component: () => import('@/views/login/index.vue')
},
{
path: '/',
name: 'layout',
component: () => import('@/layout/index.vue'),
redirect: '/home',
meta: {
hidden: false
},
children: [
{
path: '/home',
name: 'home',
component: () => import('@/views/home/index.vue'),
meta: {
title: '首页',
icon: 'House'
}
}
]
},
{
path: '/404',
meta: {
hidden: true,
title: '404'
},
component: () => import('@/views/error_page/404.vue')
},
]
const router = createRouter({
history: createWebHistory(),
routes: staticRoutes
})
// 创建一个变量，用来判断是否已经动态添加了路由 防止陷入动态路由死循环
let needLoad = true
// 配置白名单
const whiteList = ['/login']
router.beforeEach((to, from, next) => {
const token = sessionStorage.getItem("satoken")
if (to.meta.title) {
document.title = to.meta.title as string
}
if (!token) {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
} else {
if (to.path === '/login') {
next('/home')
} else {
if (needLoad) {
// 这里用router.options.routes 是因为在实际应用中，我发现直接router.addRoute动态添加路由后，页面总是为空，后来发现新增的路由并没有添加成功，通过此方法，可以有效保证动态添加路由成功并成功跳转
const current: any = router.options.routes
trendsRouter.forEach(v => {
current[1].children.push(v)
router.addRoute('layout',v)
})
router.addRoute({
path: '/:catchAll(.*)',
redirect: '/404'
},)
needLoad = false
// 防止空白页面或者404 动态添加完后，路由重新跳转
next({
...to, replace: true })
} else {
next()
}
}
}
})
export default router
// 在main.ts中引入router
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
createPinia } from 'pinia'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const pinia = createPinia()
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(pinia).use(router).mount('#app')
// 在页面中使用router
import {
useRouter， useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
当然，目前仅是动态添加没有问题，页面跳转没有问题，如果sidebar选项在动态添加的路由上，我刷新页面的话，浏览器会有警告,但并不影响页面显示及路由跳转
[Vue Router warn]: No match found for location with path "/echarts"
关于路由配置及动态路由，各位有什么好的意见或者方法，可以评论给我，多谢多谢!!!
Axiosを統合し、リクエストとインターフェースの統合をカプセル化します。
// npm安装axios
npm install axios
// 个人习惯将request及接口管理文件夹都放在一起
// src下新建http文件夹 http => 新建request.ts
import axios from 'axios'
// 页面顶部的进度条，使用起来简单
// npm i nprogress npm i --save-dev @types/nprogress
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import {
ElMessage } from 'element-plus'
const request = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
timeout: 5000
})
const NERWORK_ERROR = '服务器错误，请稍后重试！'
request.interceptors.request.use(config => {
Nprogress.start()
const token = sessionStorage.getItem("satoken")
config.headers.satoken = token
return config
}, error => {
Nprogress.done()
return Promise.reject(error)
})
request.interceptors.response.use(res => {
Nprogress.done()
if (res.status === 200) {
return res.data
} else {
ElMessage.error(NERWORK_ERROR)
return Promise.reject(NERWORK_ERROR)
}
})
class Http {
get = function (url: string, params: any) {
return request({
url: url,
method: 'get',
headers: {
'Content-Type': 'multipart/form-data' },
params
})
}
post = function (url: string, data: any) {
return request({
url: url,
method: 'post',
data
})
}
}
const http = new Http()
export {
http }
// http文件夹 => 新建interface文件夹 用于管理各个业务场景下的接口
// interface文件夹 => 新建user.ts 管理用户的注册登录登出，用户信息等接口
class Apis {
register = `user/register`
login = `user/login`
refresh = `user/hello`
}
const user = new Apis()
export {
user }
// http文件夹 => 新建http.ts 整合所有接口文件与request
import {
http } from "./request";
import {
user } from './interface/user'
const register = (data: any) => {
return http.post(user.register, data)
}
const login = (data: any) => {
return http.post(user.login, data)
}
const refresh = (data: any) => {
return http.post(user.refresh, data)
}
export default {
register,
login,
refresh
}
// 在main.ts中引入http 全局挂载 个人喜欢用$http
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
createPinia } from 'pinia'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import http from './http/http'
const pinia = createPinia()
const app = createApp(App)
// vue3中 不能再使用vue.prototype.$http
app.config.globalProperties.$http = http;
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(pinia).use(router).mount('#app')
// 在页面中使用$http，也不能再是简单的通过this.$http来使用，为了避免每个页面都返货的获取上下文，我简单封了一个获取全局的方法
// src => 新建utils文件夹 => 新建getCurrentInstance.ts
import {
getCurrentInstance, ComponentInternalInstance } from 'vue';
export default function useCurrentInstance() {
const currentInstance = getCurrentInstance() as ComponentInternalInstance;
const proxy = currentInstance.appContext.config.globalProperties;
// 所有通过app.config.globalProperties挂载的，都在proxy中
return proxy
}
// 页面中
import useCurrentInstance from '@/utils/getCurrentInstance';
const {
$http } = useCurrentInstance();
// 通过$http.login(data) 来登录。。。
// 配置axios的过程中，可能会有Property does not exist on type 'AxiosResponse'报错
// 如果有报错， src => 新建shims-vue.d.ts
import {
AxiosRequestConfig } from "axios";
declare module 'axios' {
interface AxiosInstance {
(config: AxiosRequestConfig): Promise<any>
}
}
Mock.jsを統合し、フロントエンドとバックエンドを分離して自分でデータをシミュレートする
// npm安装mock.js
npm install mockjs
// src => 新建mock文件夹 => 新建type.ts
// typeScript写参数接口，这个东西看着J里J气的，哈哈，越来越像Java了
export interface MockParams {
url: string,
type: string,
data?: any,
params?: any,
response(option?: any): Record<string, unknown>
}
// mock文件夹 => 新建api文件夹 => 新建user.ts 模拟用户注册登录等
function paramObj (url: any) {
const search = url.split('?')[1]
if (!search) {
return {
}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}')
}
const userLogin = {
url: `user/login`,
type: "post",
response: (config: any) => {
const {
userName, userPassword } = JSON.parse(config.body)
if (userName === 'wq19970106' && userPassword === 'Wq19970106..') {
return {
code: 20000,
message: '登录成功',
data: {
tokenName: 'satoken',
tokenValue: 'dsadfhasoidqwehdasd',
userName: '王琪',
phone: '15582868787'
}
}
} else {
return {
code: 40010,
message: '账号或密码错误'
}
}
}
}
const userRegister = {
url: `/user/register`,
type: 'post',
response: (config: any) => {
const {
userName, userPassword } = JSON.parse(config.body)
if (userName !== 'wq19970106' && userPassword) {
return {
code: 20000,
message: '注册成功'
}
} else {
return {
code: 40010,
message: '账号已存在'
}
}
}
}
const user = [userLogin, userRegister]
export default user
// mock文件夹 => 新建index.ts
import Mock from 'mockjs'
import {
MockParams } from './type'
import user from './api/user'
const mocks = [...user]
export function mockRequest() {
let i: MockParams
for(i of mocks){
Mock.mock(new RegExp(i.url), i.type || 'get', i.response)
}
}
// 在main.ts中引入使用
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
createPinia } from 'pinia'
import {
mockRequest } from './mock'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import http from './http/http'
const pinia = createPinia()
const app = createApp(App)
app.config.globalProperties.$http = http;
if(process.env.NODE_ENV === 'development'){
mockRequest()
}
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(pinia).use(router).mount('#app')
// 在配置mock.js过程中 控制台会有typeScript关于mock的报错
npm install @types/mockjs
// shims-vue.d.ts 添加
declare module 'mockjs'
Moment.jsとLodashの紹介
// npm安装
npm install moment
npm i --save lodash
// moment是关于时间的工具类，内容全面，功能强大，同样的还有day.js 本人更习惯moment
// main.ts中引入moment,全局挂载
import moment from 'moment'
app.config.globalProperties.$moment = moment;
// 在页面中同样使用封好的getCurrentInstance
import useCurrentInstance from '@/utils/getCurrentInstance';
const {
$http, $moment } = useCurrentInstance();
const now = ref($moment().format("LTS"));
const timer = setInterval(function () {
now.value = $moment().format("LTS")
}, 1000)
// lodash是一款很实用的js工具类，包含数组、集合、字符串等操作函数，我用的更多的是防抖之类的方法
Eチャートの統合
// npm安装
npm install echarts
// utils文件夹 => 新建echarts.ts 用于按需导入echarts
import * as echarts from 'echarts/core';
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineChart,
LineSeriesOption
} from 'echarts/charts';
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
ToolboxComponent,
GridComponent,
GridComponentOption,
// 数据集组件
DatasetComponent,
DatasetComponentOption,
// 内置数据转换器组件 (filter, sort)
TransformComponent,
LegendComponent
} from 'echarts/components';
import {
LabelLayout, UniversalTransition } from 'echarts/features';
import {
CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
>;
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
ToolboxComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LegendComponent
]);
export default echarts
// 修改main.ts
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
createPinia } from 'pinia'
import {
mockRequest } from './mock'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import moment from 'moment'
import http from './http/http'
import echarts from './utils/echarts'
// echarts.resize()会有浏览器警告，npm i default-passive-events -S
import 'default-passive-events'
const pinia = createPinia()
const app = createApp(App)
app.config.globalProperties.$moment = moment;
app.config.globalProperties.$http = http;
app.config.globalProperties.$echarts = echarts
if(process.env.NODE_ENV === 'development'){
mockRequest()
}
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(pinia).use(router).mount('#app')
// 在需要的页面中使用echarts
<template>
<div class="echarts">
<div id="main" ref="mainDom"></div>
</div>
</template>
<script lang='ts' setup>
import {
ref, nextTick, watch } from 'vue';
import useCurrentInstance from '@/utils/getCurrentInstance'
import {
useUserStore } from '@/store/userStore';
const userStore = useUserStore()
const {
$echarts } = useCurrentInstance()
const mainDom = ref(null)
let myEcharts: any
const initEchart = () => {
myEcharts = $echarts.init(mainDom.value)
let options = {
title: {
text: '数据报表',
textStyle: {
color: '#567788',
fontStyle: 'oblique',
fontWeight: 'lighter'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
//类型分类
legend: {
data: ['用户1', '用户2', '用户3', '用户4', '用户5']
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
//坐标
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true//如果坐标图上xy轴显示的有标示，一定要为true，否则展示不全，内容会被隔挡
},
//X轴的命名
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
//bar--柱状图
//line -- 线图
{
name: '用户1',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '用户2',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [240, 182, 291, 234, 290, 330, 310]
},
{
name: '用户3',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [120, 232, 2101, 154, 190, 330, 410]
},
{
name: '用户4',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [360, 332, 301, 334, 390, 330, 320]
},
{
name: '用户5',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myEcharts.setOption(options)
window.addEventListener('resize', () => {
myEcharts.resize()
})
}
nextTick(()=> {
initEchart()
})
watch(userStore, () => {
myEcharts.dispose()
setTimeout(() => {
initEchart()
},300);
})
</script>
<style lang='less' scoped>
.echarts {
width: 100%;
height: 100%;
position: relative;
#main {
width: 45%;
height: 45%;
position: absolute;
top: 10px;
left: 10px;
border: 1px solid black;
}
}
</style>
もう終わりです、上司にアドバイスを求めてください！
ここまでで、vite によってビルドされた最も基本的な vue3 プロジェクトがビルドされました。何か間違っている点がありましたら、遠慮なくご指摘ください。ありがとう*500！