Vue项目setup流程
# 安装vue
# Vue项目创建
选择 vue3
vue create demo-01
1
# Vue配置
# 关闭未使用变量报错
添加配置 "no-unused-vars": "off"
根目录下package.json
eslintConfig: {
"rules": {
"no-unused-vars": "off"
}
}
1
2
3
4
5
2
3
4
5
# Vue相关包安装
# vue-router
vue路由管理
npm install vue-router
1
# 使用
根目录创建router文件夹
在router文件夹下创建index.js
在index.js中引入vue-router
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: "/",
name: "HomeView",
component: () => import("../views/home/HomeView.vue")
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 配置
{
path : '/merchant', // 路由路径
redirect: '/merchant/list', // 重定向
component: () => import('../..') // 组件
children: [ // 子路由
{
...
}
]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 路由守卫
- 请求前拦截
router.beforeEach((to, from, next) => {
next()
})
1
2
3
2
3
- 请求后拦截
router.afterEach((to, from) => {
const store = useStore()
const curPosition = window.history.state.position
if (curPosition > lastPosition) {
store.commit('addPageDepth')
}
if (curPosition < lastPosition) {
store.commit('reducePageDepth')
}
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 👺相关问题
# 解决刷新后页面不会回到顶部的问题
// router.js
router.beforeEach((to, from, next) => {
// 解决刷新后页面不会回到顶部的问题
document.body.scrollTop = 0; // firefox
document.documentElement.scrollTop = 0; // safari
window.pageYOffset = 0; // 调用 next()，一定要调用 next 方法，否则钩子就不会被销毁
next()
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# vuex
vue状态管理
npm install vuex
1
# 使用
- 根目录创建store文件夹
- 在store文件夹下创建index.js
- 在index.js中引入vuex
import { Store } from "vuex"
const store = new Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# vant
vue组件库 - UI
npm install vant
1
# 使用
main.js 中引用需要的vant组件
import { Button } from "vant";
import "vant/lib/index.css";
const vantComponents = [ Button ]
vantComponents.forEach(component => {
app.use(component)
})
1
2
3
4
5
6
7
2
3
4
5
6
7
# vue-i18n
vue国际化
# 安装
npm install vue-i18n
1
# 配置
// main.js
import { createI18n } from 'vue-i18n';
// 引入多语言
// 导入语言文件
import enLocale from './locales/en.json';
import zhLocale from './locales/zh.json';
// 获取浏览器的首选语言
const userLanguage = navigator.language;
// 如果用户语言以 'zh' 开头，则设置为中文，否则设置为英文
let locale = userLanguage.startsWith('zh') ? 'zh' : 'en';
locale = 'zh'
const i18n = createI18n({
legacy : false, // 使用 Composition API
globalInjection: true, // 全局注入语言
locale : locale, // 设置语言
messages : {
en: enLocale,
zh: zhLocale
}
});
app.use(i18n)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 语言配置文件
// en.json
{
"app": {
"title": "Stamp Collector"
},
"common": {
},
"home": {
"title": "Home"
},
"merchant": {
"list": {
"title": "Merchants"
}
},
"stamp": {
"list": {
"title": "My Stamps"
}
}
}
// zh.json
{
"app": {
"title": "章集吉"
},
"common": {
},
"home": {
"title": "首页"
},
"merchant": {
"list": {
"title": "附近商家"
}
},
"stamp": {
"list": {
"title": "我的集章"
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 使用
- 引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
1
2
2
- 代码中
title = t('app.title')
1
- html中
<p>{{ t('app.title') }}</p>
1
# js-cookie
cookie插件
# 安装
npm install js-cookie
1
# Iconify
iconfont图标
# 安装
npm install @iconify/vue
1
# 配置 Iconify
main.js
import { createApp } from 'vue';
import App from './App.vue';
import { Icon } from '@iconify/vue';
const app = createApp(App);
app.component('Icon', Icon); // 注册 Icon 组件
app.mount('#app');
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
app.vue
<template>
<div>
<h1>Welcome to Vue 3 with Iconify!</h1>
<!-- 示例图标 -->
<Icon icon="mdi:home" style="font-size: 24px; color: blue;" />
<Icon icon="mdi:account" style="font-size: 24px; color: green;" />
</div>
</template>
<script setup>
import { Icon } from '@iconify/vue';
</script>
<style>
/* 你可以在这里添加自定义样式 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Vue手机端配置
# 强制PC端显示H5模式
forceMobileMode.js 拓展
app.vue 在onMounted中添加如下代码
上次更新: 2024/09/13, 00:40:20