Vite+Vue3+TS搭建新项目

·  阅读 648

这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

前言

最近有个新项目需要从0到1搭建,想着现在Vue3这么火,就决定用Vue3+Vite+TS+ElementPlus技术栈来尝试下。这篇文就来记录下搭建过程中遇到的一些问题,避免后边重复踩坑。

VueRouter

Vue2引入VueRouter的代码

import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    routes: []
})
复制代码

Vue3引入VueRouter的代码

import { createRouter, createWebHashHistory } from 'vue-router';

export default createRouter({
    routes: [],
    history: createWebHashHistory()
})
复制代码

VueX

Vue2引入VueX的代码

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    modules
});
export default store;
复制代码

Vue3引入Vuex有一些变化:

  • 手动导入createStore

  • 不再需要new Vuex.Store实例

Vue3引入VueX代码

import {createStore} from "vuex";

const store = createStore({
    modules
});
export default store;
复制代码

require.context

在Vue2版本中我导入模块用了require.context方法来统一封装,大致代码如下:

//require.context:要查找的文件路径,是否查找子目录,要匹配文件的正则
const modulesFiles = require.context('./modules', true, /.js$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^./(.*).\w+$/, '$1');
    const value = modulesFiles(modulePath);
    modules[moduleName] = value.default;
    return modules;
}, {});
复制代码

但是在Vue3里边这段代码报如下错误:

image.png

看起来就是webpack的require.context API不识别,看文档后修改为如下:

const modulesFiles = import.meta.globEager('./modules/*.ts');

const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => {
    //{'msgTemplate': {xxx} }
    const moduleName = modulePath.replace(/^./modules/(.*).\w+$/, '$1');
    const value = modulesFiles[modulePath];
    modules[moduleName] = value.default;
    return modules;
}, {});
复制代码

可以看出我对正则表达式也进行了简单的修改,增加了modules路径,这是因为我发现modulesFiles返回的值都包含了/modules/,这与webpack的require.context API还是有些出入的。

ElementUI

Vue3需要使用Element Plus版本,因为有些公共样式是直接复用的,我就直接把原来Vue2项目的样式文件全部导进来了,结果发现一堆问题,哈哈哈~

通过SCSS变量自定义主题色

按照官方文档的介绍,把配置改为新写法,然后发现报下边的错误:

image.png

网上提供的解决方式对于我来说没用。最后发现是自己代码顺序问题,把全局theme-chalk引入写到了@forward前边。

最后配置如下:

$main-color: #00C9C9;

/* icon font path, required */
$--font-path: '~element-plus/lib/theme-chalk/fonts';

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': $main-color,
    ),
  ),
);

@use "element-plus/theme-chalk/src/index.scss" as *;
复制代码

变量名定义

image.png

搜了下样式代码,看到有这么一句关于$border-color的

image.png

从错误看起来element内部本身就定义了$border-color,导致去执行了内部方法,我尝试着将变量名改为$bd-color就没问题了。

image.png

Element Plus组件语言切换

看到element组件默认语言是英文,按照官方文档提示切换成中文:

image.png

Message使用

我按照elementUI的写法直接引入了Message: image.png

然后报如下错误:does not provide an export name 'Message'

image.png

ElementPlus把message组件换成了ElMessage,这篇文章提供了多种引入ElMessage的方法,我使用了单文件引入的处理方式(provide/inject全局引入方式未生效):

import { ElMessage } from 'element-plus';

...

ElMessage({
    message: error.msg || '接口异常',
    type: 'error',
    duration: 5 * 1000
});
复制代码

日期控件不再支持picker-options属性

elementUI可以通过设置picker-options来设置日期属性

image.png

elementPlus去掉了picker-options属性,把内部的属性拆分开来了,可以单独一个个设置。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改