devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue 3 + Typescript + Vite_vue3+typescript+vite minify

作者：你好赵伟 | 2024-05-30 18:36:23

赞

踩

vue3+typescript+vite minify

Vue 3 + Typescript + Vite

(摸鱼试试新的好玩的,仅框架搭建)

升级 node 版本到最新稳定版(Vite 构建工具 Node.js 版本>= 12.0.0)

  • 个人使用的第二种,需要的时候自己切换版本，本身Node.js 版本>= 12.0.0可跳过
  • 方法一:nvm install stable使用 nvm 安装最新稳定版 Node.js
  • 方法二:
    • github 搜索 Kenshin/gnvm,下载 gnvm.exe 放在 nodejs 文件夹(找不到就 cmd 命令行窗口输入where node会出现 nodejs 路径)下,gnvm update latest,等待更新(下载慢需要多等一会儿)
    • gnvm ls查看当前安装的所有 Node 版本
    • gnvm use 版本号切换到指定版本
    • npm -g install npm 升级 npm

Vite 初始化项目

  • npm init @vitejs/app vite-vue3-test 初始化 vite 项目选择 vue 继续选择 vue-ts
  • 使用模板初始化 Vite + Vue3 + TypeScript 项目
    • npm6+npm init @vitejs/app vite-vue3-starter --template vue-ts
    • npm7+npm init @vitejs/app vite-vue3-starter -- --template vue-ts
  • cd vite-vue3-test进入项目目录npm i安装依赖
  • 配置vite.config.ts文件,设置@指向 src 目录(tsconfig.json也需加)、服务启动端口、打包路径、代理、全局scss变量等
        export default defineConfig(({ mode }: UserConfig): UserConfig => {
    return {
        plugins: [
            vue(),
            styleImport({
                // 注意 styleImport 这个名字不能改
                libs: [
                    {
                        libraryName: 'element-plus',
                        esModule: true,
                        ensureStyleFile: true,
                        resolveStyle: (name) => {
                            name = name.slice(3);
                            return `element-plus/packages/theme-chalk/src/${name}.scss`;
                        },
                        resolveComponent: (name) => {
                            return `element-plus/lib/${name}`;
                        },
                    },
                ],
            }),
            vitePluginImport([
                {
                    libraryName: 'element-plus',
                    libraryDirectory: 'es',
                    style(name) {
                        return `element-plus/lib/theme-chalk/${name}.css`;
                    },
                    ignoreStyles: [],
                },
            ]),
        ],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src'),
            },
        },

        // css预设配置
        css: {
            preprocessorOptions: {
                scss: {
                    // 注意：全局变量,只能写相对路径,全局scss变量
                    additionalData: "@import'./src/styles/variable.scss';",
                },
            },
        },

        base: './', // 设置打包路径
        server: {
            port: 8090, // 设置服务启动端口号
            open: true, // 设置服务启动时是否自动打开浏览器
            cors: true, // 允许跨域
            https: false, // 是否开启 https
            // 设置代理，根据项目实际情况配置
            // proxy: {
            //   '/api': {
            //     target: 'http://xxx.xxx.xxx.xxx:8000',
            //     changeOrigin: true,
            //     secure: false,
            //     rewrite: (path) => path.replace('/api/', '/')
            //   }
            // }
        },
        optimizeDeps: {
            include: [
                'element-plus',
                'element-plus/lib/locale/lang/zh-cn',
                'dayjs/locale/zh-cn',
            ],
        },
        build: {
            // 压缩
            minify: 'esbuild',
            assetsDir: '',
            outDir: `./dist`,
        },
    };
});

    • 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
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
  • 安装支持 Vue3 的路由工具npm i vue-router@4,创建 src/router/index.ts 文件设置基础路由并在 main.ts 下挂载路由
    import router from './router/index';
createApp(App).use(router).mount('#app');

    • 1
    • 2
  • npm i vuex@next集成状态管理工具 Vuex,创建 src/store/index.ts 文件并在 main.ts 文件中挂载 Vuex 配置
    import store from './store/index';
createApp(App).use(router).use(store).mount('#app');

    • 1
    • 2
  • npm i element-plus安装支持 Vue3 的 UI 框架 Element Plus并在 main.ts 文件中挂载 Element Plus
    import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app');
//如按需引入npm install vite-plugin-style-import -D 在vite.config.ts中配置并按需引入即可
import {
    ElAlert,
    ElAside,
    ElAutocomplete,
    ElAvatar,
    ElBacktop,
    ElBadge,
    ElBreadcrumb,
    ElBreadcrumbItem,
    ElButton,
    ElButtonGroup,
    ElCalendar,
    ElCard,
    ElCarousel,
    ElCarouselItem,
    ElCascader,
    ElCascaderPanel,
    ElCheckbox,
    ElCheckboxButton,
    ElCheckboxGroup,
    ElCol,
    ElCollapse,
    ElCollapseItem,
    ElCollapseTransition,
    ElColorPicker,
    ElContainer,
    ElDatePicker,
    ElDialog,
    ElDivider,
    ElDrawer,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElFooter,
    ElForm,
    ElFormItem,
    ElHeader,
    ElIcon,
    ElImage,
    ElInput,
    ElInputNumber,
    ElLink,
    ElMain,
    ElMenu,
    ElMenuItem,
    ElMenuItemGroup,
    ElOption,
    ElOptionGroup,
    ElPageHeader,
    ElPagination,
    ElPopconfirm,
    ElPopover,
    ElPopper,
    ElProgress,
    ElRadio,
    ElRadioButton,
    ElRadioGroup,
    ElRate,
    ElRow,
    ElScrollbar,
    ElSelect,
    ElSlider,
    ElStep,
    ElSteps,
    ElSubmenu,
    ElSwitch,
    ElTabPane,
    ElTable,
    ElTableColumn,
    ElTabs,
    ElTag,
    ElTimePicker,
    ElTimeSelect,
    ElTimeline,
    ElTimelineItem,
    ElTooltip,
    ElTransfer,
    ElTree,
    ElUpload,
    ElInfiniteScroll,
    ElLoading,
    ElMessage,
    ElMessageBox,
    ElNotification,
} from 'element-plus';

const components = [
    ElAlert,
    ElAside,
    ElAutocomplete,
    ElAvatar,
    ElBacktop,
    ElBadge,
    ElBreadcrumb,
    ElBreadcrumbItem,
    ElButton,
    ElButtonGroup,
    ElCalendar,
    ElCard,
    ElCarousel,
    ElCarouselItem,
    ElCascader,
    ElCascaderPanel,
    ElCheckbox,
    ElCheckboxButton,
    ElCheckboxGroup,
    ElCol,
    ElCollapse,
    ElCollapseItem,
    ElCollapseTransition,
    ElColorPicker,
    ElContainer,
    ElDatePicker,
    ElDialog,
    ElDivider,
    ElDrawer,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElFooter,
    ElForm,
    ElFormItem,
    ElHeader,
    ElIcon,
    ElImage,
    ElInput,
    ElInputNumber,
    ElLink,
    ElMain,
    ElMenu,
    ElMenuItem,
    ElMenuItemGroup,
    ElOption,
    ElOptionGroup,
    ElPageHeader,
    ElPagination,
    ElPopconfirm,
    ElPopover,
    ElPopper,
    ElProgress,
    ElRadio,
    ElRadioButton,
    ElRadioGroup,
    ElRate,
    ElRow,
    ElScrollbar,
    ElSelect,
    ElSlider,
    ElStep,
    ElSteps,
    ElSubmenu,
    ElSwitch,
    ElTabPane,
    ElTable,
    ElTableColumn,
    ElTabs,
    ElTag,
    ElTimePicker,
    ElTimeSelect,
    ElTimeline,
    ElTimelineItem,
    ElTooltip,
    ElTransfer,
    ElTree,
    ElUpload,
];

const plugins = [
    ElInfiniteScroll,
    ElLoading,
    ElMessage,
    ElMessageBox,
    ElNotification,
];
const app = createApp(App);

components.forEach((component) => {
    app.component(component.name, component);
});

plugins.forEach((plugin) => {
    app.use(plugin);
});
app.mount('#app');

    • 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
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
  • npm i axios集成 HTTP 工具 Axios,在 src 下创建 utils 目录来存储我们常用的工具函数,在utils下新建api/request.ts文件,配置Axios前置/后置拦截器
  • npm i @types/lodash lodash 安装loadsh方便处理字符串、数组、对象,并在untils中单独封装补充自己常用的函数(underscore/ramda也可以,看个人代码习惯,更推荐ramda因为它几乎所有的函数都是自动柯里化的(原因),我把常用的lodash的和ramda里的方法挂载到原型链上封装然后自己发了个npm包装进去了npm i person-fun-tool,懒人快乐包get!)
  • npm i dayjs 安装时间处理库并引入(moment也行就是有点大,看个人习惯)
  • npm i bignumber.js安装精度计算库并引入用于数据计算处理
  • 更多…
  • 备注：这里因为做移动端的项目比较多，app用的ionic而vite暂不支持ionic所以未应用到实际项目，实际项目中若需要采用vue3写法可以尝试使用vue-demi升级现有项目，同时支持vue2，vue3也算是很香了
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/648117
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号