JavaScript前端

发表于 更新于 分类于 阅读次数： 本文字数： 358 阅读时长 ≈ 1 分钟

这篇文章主要是记录我前端学习的内容。

前端环境搭建

Node.js（运行JavaScript）

想要编写前端项目需要安装Node.js来运行JavaScript。

WebStorm（前端最好用的编辑器）

WebStorm的安装破解方法在我的博客JetBrains里。

Vite 配置方法

base

1
2
3
4
5
6
export default defineConfig(({mode}) => {
    return {
        base: './',
        plugins: [vue()],
    }
})

alias

1
2
3
4
5
6
7
8
9
10
export default defineConfig(({mode}) => {
    return {
        plugins: [vue()],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src')
            }
        }
    }
})

生产环境移除console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default defineConfig(({mode}) => {
    return {
        plugins: [vue()],
        build: {
            minify: "terser",
            terserOptions: {
                compress: {
                    // 生产环境移除console
                    drop_console: true,
                    drop_debugger: true
                }
            }
        }
    }
})

配置proxy代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default defineConfig(({mode}) => {
    return {
        plugins: [vue()],
        server: {
            proxy: {
                '/api': {
                    target: loadEnv(mode, process.cwd()).VITE_BASE_API,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, ''),
                },
            }
        },
    }
})

env环境变量配置

创建.env.development和.env.production两个文件。

在文件中用VITE_XXX作为变量。

TypeScript

引入js组件

当使用ts时引入js组件时，可以同时引入@types/xxx达到使用ts的目的。

highlight

使用最新的marked时无法显示highlight高亮，需要搭配marked-highlight使用highlight

这是marked-highlight的GitHub链接在README中有使用样例，可以复制使用。

前端网站

前端工具文档

Vue官方文档，Vite官方文档

Vue Router官方文档，Pinia官方文档

Element Plus官方文档

Axios官方文档，Fetch文档

ECharts文档

marked.js文档，highlight.js下载地址，highlight.js预览效果

图标网站

阿里巴巴矢量图标，标志客网址，标小智网址

Api接口网站

聚合数据网址