likes
comments
collection
share

vue3入门功能的搭建跟理解（一）

作者站长头像
站长
· 阅读数 53

废话开篇：简单的整理一些常用功能的使用跟理解

一、unplugin-vue-components

unplugin-vue-components 是一个自动引入如：ant-design 组件的插件。

vite.config.ts 进行插件的注册

vue3入门功能的搭建跟理解（一）

安装后会创建一个 components.d.ts 文件，如：

vue3入门功能的搭建跟理解（一）

这是一个声明文件，目的是告诉编辑器在开发过程中自动引入的组件可以直接使用，保证在最后的运行阶段代码里所注册的组件都将会自动引入。如：

vue3入门功能的搭建跟理解（一）

使用中直接写组件库中组件的名称即可，不需要再声明引入

vue3入门功能的搭建跟理解（一）

如图：

vue3入门功能的搭建跟理解（一）

二、unplugin-auto-import

unplugin-auto-import 是一个自动引入代码库插件。在 setup 方法里是不是每次都需要 import 导入 vue 里面的一些 api，利用 unplugin-auto-import 可以先对常用的比如：vue 下的 api 声明，这样编辑器会不再报错，而在真正运行前会将这些 api 引入进来。

vite.config.ts 进行插件的注册

vue3入门功能的搭建跟理解（一）

安装后会创建一个 auto-imports.d.ts 声明文件。如：

vue3入门功能的搭建跟理解（一）

声明文件里会包含基本的常用 api 如：

vue3入门功能的搭建跟理解（一）

例如上面的 computed 计算属性 api 在 setup 里面直接使用即可。

这里需要注意的是：声明文件仅仅是给编辑器用的！如果在声明文件里仅声明了一个方法给 string 类型的变量执行，编写逻辑的时候不会报错，但当真正调用这个方法的时候就会报错，因为还没有实现！因此，声明文件只是给编译器一个“明确的态度”，就是：你可以用，不要报错，但后面在真正执行的时候一定会有相应的实现！

三、挂载新 APP 对象实现全屏弹窗

挂载 这个名词太“正规”，通俗的讲就是把 vue 编译后的浏览器能识别的代码产物添加到 html 页面内指定的 dom 上。

那么，可以直接这样写：

<body>
    <div id="app"></div>
    <!-- 全屏弹窗 -->
    <div style="position: fixed;width: 100%;height: 100%;" id="WSLApp"></div>
    <script type="module" src="/src/main.ts"></script>
</body>

挂载一个新 app 对象

//创建App，第一个参数是指定组件，第二个参数传参给对应组件 props
const alertModelVM = createApp(AlertWorld,{msg:'WSL'})
//挂载
alertModelVM.mount('#WSLApp')
setTimeout(() => {
    //取消挂载
    alertModelVM.unmount()
    document.getElementById('WSLApp')!.style.display = 'none'
}, 2000);

四、unocss

unocss 会默认规定一些样式，目的是将样式 class 名称语义化，减少样式命名过程的繁琐，并且将样式通用化。

可通过 unocss 查询默认样式

vite.config.ts 进行插件的注册，如：

vue3入门功能的搭建跟理解（一）

后面的 rules 可以添加自定义格式，下面不用编写任何 class，直接书写即可。

vue3入门功能的搭建跟理解（一）

为了方便书写提示，可在 vscode 里安装 UnoCSS 插件。

最后需要注意的是在 main.ts 里引入 uno.css !!!

vue3入门功能的搭建跟理解（一）

五、rem 适配

lib-flexible ：自动在 html 的 head 中添加一个meta name="viewport"的标签，同时自动设置html的font-size为屏幕宽度除以10，也就是 1rem 等于 html 根节点的 font-size。

在 main.ts 直接引用即可，如：

vue3入门功能的搭建跟理解（一）

那么，它的作用主要是自动根据屏幕的宽度自动设置根节点的 font-size从而达到适配的作用。

postcss-pxtorem：将 class 里面的 px 转化为 rem

在已经用了 px 的页面里，怎么将 px 转化为 rem ？

这时，postcss-pxtorem 就派上用场了。

vite.config.ts 进行插件的注册

vue3入门功能的搭建跟理解（一）

这里规定了默认 16px 为 1rem，并且对样式里的全部属性都进行转换，白名单可设置过滤样式。

这个时候，postcss-pxtorem 作为开发插件就会将工程里的 px 单位的各个属性自动根据 16px为1rem 的规则进行转换。

那么，这里如果在更改屏幕尺寸的时候想对全部的元素进行缩放，这时就必须添加监听 window 尺寸变化的事件从而改变根节点font-size

新建一个 rem.js 文件并在 main.ts 里引用，内容如：

vue3入门功能的搭建跟理解（一）

这里 除以100 是默认窗口尺寸为 1600px 的时候为标准尺寸，与 16px为1rem 相对应

这样在用户拖动窗口改变尺寸的时候，里面的 dom 元素将按比例进行缩放。

效果：

vue3入门功能的搭建跟理解（一）

六、动态路由

动态路由的意思就是将前端要展示的页面内容以动态的形式进行添加到路由中实现动态跳转。

vue3入门功能的搭建跟理解（一）

modules 可获取到指定路径下的全部 vue 组件。

router.addRoute 可直接添加新的 RouteRecordRaw 即可。

router.push 实现跳转。

七、语言国际化

vue-i18n 通过简单的配置实现语言变更

首先创建中英两个文件，如：

zh_CN

const zh_CN = {
    nav: {
        login: '登录',
        home: '首页'
    }
}

export default zh_CN

en_US

const en_US = {
    nav: {
        login: 'Login',
        home: 'Home'
    }
}
export default en_US

i18n.ts

import { createI18n } from 'vue-i18n'
import { App } from 'vue'
import zh_CN from './zh_CN'
import en_US from './en_US'

const localeData = {
    legacy: false,
    globalInjection: true,//全局注入
    locale: 'zh_CN',
    messages:{
        zh_CN:zh_CN,
        en_US: en_US
    }
}
export const i18n = createI18n(localeData)
export const setUpI18n = {
    install(app: App){
        app.use(i18n)
    }
}

main.ts 引用

import { i18n } from '@/lang/index'
createApp(App).use(i18n)

使用

<div>{{ $t('nav.home') }}</div>

修改

i18n.locale.value = 'en_US'

国际化语言怎么可能少得了持久化保存，记录上一次的本地设置！

pinia 状态共享

pinia-plugin-persistedstate 持久化工具

pinia添加持久化

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const store = createPinia()
// 添加持久化插件
store.use(piniaPluginPersistedstate)
export default store

声明 pinia 共享对象为存储持久化，保存在 localstorage 里面

import { defineStore } from 'pinia'
export default defineStore({
    //设置进行持久化存储
    persist:true,
    id:'lang',
    state:()=>{
        return {
            lang:'zh_CN',//'en_Us'
        }
    },
    actions:{
        changeCurrentLang() {
            this.lang = this.lang == 'zh_CN' ? 'en_US' : 'zh_CN'
        }
    }
})

使用：

vue3入门功能的搭建跟理解（一）

效果：

vue3入门功能的搭建跟理解（一）

八、总结与思考

简单的整理一些常用功能的使用跟理解，如果能帮助到一些朋友，深感欣慰。

转载自:https://juejin.cn/post/7236213691133640762
评论
请登录