JavaScript 前端

发表于 分类于 阅读次数： 本文字数： 594 阅读时长 ≈ 2 分钟

导航
返回软件工程分类

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

前端环境搭建

Node.js（运行JavaScript）

使用Vite等构建工具开发前端项目时，需要安装Node.js 运行时来运行JavaScript。

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

WebStorm的安装破解方法在我的博客JetBrains 开发工具里。

Vite 配置方法

下面是Vue项目中vite.config.js的独立配置片段，按需要合并到同一份配置中。

base

1
2
3
4
5
6
7
8
9
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({mode}) => {
    return {
        base: './',
        plugins: [vue()],
    }
})

alias

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig(({mode}) => {
    return {
        plugins: [vue()],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        }
    }
})

生产环境移除console

选择terser压缩时，需要先安装npm install -D terser，见Vite构建选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({mode}) => {
    return {
        plugins: [vue()],
        build: {
            minify: "terser",
            terserOptions: {
                compress: {
                    // 生产环境移除console
                    drop_console: true,
                    drop_debugger: true
                }
            }
        }
    }
})

配置proxy代理

server.proxy只作用于Vite开发服务器；部署后的代理需要在实际后端或反向代理服务器中配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

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，通过import.meta.env.VITE_XXX访问。它们会进入前端构建产物，不能放数据库密码、私钥等秘密；详见Vite环境变量文档。

TypeScript

引入js组件

TypeScript项目引用JavaScript库时，优先使用库自带的类型声明；没有自带声明且存在对应包时，再安装@types/xxx。类型声明提供类型检查，不会把库的JavaScript实现转换成TypeScript。

highlight

Marked从8.0.0起移除了内置highlight选项，可以通过marked-highlight搭配highlight.js实现代码高亮，见Marked迁移说明。

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

前端网站

前端工具文档

Vue官方文档，Vite官方文档

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

Element Plus官方文档

Axios官方文档，Fetch文档

ECharts文档

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

图标网站

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

Api接口网站

聚合数据网址