基于移动端的配置。vue3语法糖写法。
优点：
- 光速启动
- 热模块替换
- 按需编译
脚手架功能
其他
2021-12-08
- 新增unplugin-vue-components插件自动导入src/compnents组件，第三方vant，element等组件无需import，不是template组件的需要手动引入，如：Toast
- 新增unplugin-auto-import插件自动导入vue3 HOOKS
- 新增vite-plugin-style-import用于解决非template组件样式失效问题
- 新增vue-global-api解决eslint报错
- 参考文章
@[toc]
环境变量、axios、px转vw/vh及浏览器前缀
路由vue-router4.0
安装
npm install vue-router@4
配置
新建src/router/router.ts文件，内容如下：
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import { sessions } from '@/utils/utils'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '@/pages/home/home.vue'),// 懒加载
meta: {
showFooter: true, // 是否显示底部导航
requireAuth: false, // 是否需要授权，即token
}
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '@/pages/about/about.vue'),
meta: {
showFooter: true,
requireAuth: false,
}
},
{
path: '/user',
name: 'user',
component: () => import(/* webpackChunkName: "user" */ '@/pages/user/user.vue'),
meta: {
requireAuth: true,
}
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/pages/login/login.vue'),
meta: {
requireAuth: false,
}
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
// 路由拦截
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth && !sessions.get('token')) { // 判断登录权限
next({ path: '/login', query: {redirect:to.fullPath}});
} else {
next()
}
})
export default router;
状态管理vux4.0
安装
npm install vuex@next --save
配置及使用
新建store/store.ts：
import { createStore } from 'vuex';
export default createStore({
state: {
VX_IS_LOGIN: false,
VX_TOKEN: '',
},
mutations: {
setToken(state, data) {
state.VX_TOKEN = data
state.VX_IS_LOGIN = data ? true : false
}
},
actions: {
},
modules: {
},
});
组合API：
<template>
<div>login</div>
<Button type="primary" @click="login">登录</Button>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import {useStore} from 'vuex' // 组合API函数
import {Button} from 'vant'
import { sessions } from '../../utils/utils'
let store = useStore()
let router = useRouter()
const login = () => {
sessions.set('token',1122323)
store.commit('setToken', 1122323) // 设置全局状态
let page:any = router.currentRoute.value.query.redirect
router.replace(page)
}
</script>
<style lang="less">
</style>
UI组件vant@3
安装
npm i vant@next -S
使用
在 <script setup> 中可以直接使用 Vant 组件，不需要进行组件注册。
<script setup>
import { Button } from 'vant';
</script>
<template>
<Button />
</template>
Less
安装less
npm install less less-loader --dev
使用
<style scoped lang="less">
</style>
scoped：私有样式
less全局变量
新建src/global.less；
@mainColor: #ff6600;
配置vite.config.ts
const path = require("path");
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
hack: `true; @import (reference) "${path.resolve('src/global.less')}";`,
},
}
},
}
})
使用：
<style scoped lang="less">
h1{
font-size: 32px;
color: @mainColor;
}
</style>
