前端技术
前端技术
1 前端技术
概览
前端技术整理，以下是相关前端技术梳理。
- 开发环境安装。
- web 基础。
- HTML。
- CSS：包括 less、sass、scss 等。
- JavaScript：包括 Ajax、TypeScript 等。
- 开发框架。
- Web 常用开发组件。如 Node.js、Axios、yarn、element-ui、echarts、webpack、eslint、babel、Rollup。
- 开发小组件。如 Font Awesome。
- vue3、avue。
- vite。
- 开发脚手架。
- vue-starter。
- vue-element-admin。
- 博客脚手架。
- vuepress 。
- 项目开发。
- 前端项目 0->1 开发。
- 小程序开发。
- UNI-APP。
待整理
Web 相关
- Flow。参考 用 Flow 提升前端代码健壮性
avue-form-design。
clipboard。
codemirror
crypto-js
小插件
- js-cookie
- nprogress
- script-loader
- sock
- sockjs-client 实现 webSocket 通信
- stomp-websocket
- chai
- compression-webpack-plugin
- node-sass
2. 环境
NodeJS
Window 安装 NodeJS
下载源地址是 https://nodejs.org/dist，双击 msi 文件安装即可。
安装好后，配置好环境变量如下
NODE_HOME E:\Program Files\nodejs
# PATH 中追加环境变量
%NODE_HOME%
%NODE_HOME%\node_global
执行以下命令配置好 node。
npm config set prefix "E:\Program Files\nodejs\node_global"
npm config set cache "E:\Program Files\nodejs\node_cache"
npm config get prefix
Linux 安装 NodeJS
执行以下命令下载并安装。
cd /usr/local/
wget https://nodejs.org/dist/v23.6.0/node-v23.6.0-linux-x64.tar.xz
tar -xvf node-v23.6.0-linux-x64.tar.xz
mv node-v23.6.0-linux-x64 nodejs
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
ln -s /usr/local/nodejs/bin/node /usr/local/bin/
node -v
npm -v
执行以下命令配置好 node。
npm config set prefix "/usr/local/nodejs/node_global"
npm config set cache "/usr/local/nodejs/node_cache"
npm config get prefix
安装 NodeJS 全局插件
再全局安装插件。
# 全局安装 yarn，安装新版本卸载老的，再安装新的即可
# 源 https://registry.yarnpkg.com https://registry.npmmirror.com https://mirrors.cloud.tencent.com/npm/
npm uninstall yarn -g
npm view yarn versions --registry=https://registry.npmmirror.com
npm install yarn@2.0.0-rc.24 -g --registry=https://registry.npmmirror.com
ln -s /usr/local/nodejs/node_global/bin/yarn /usr/local/bin/
# yarn1 切换源
yarn config get registry
yarn config set registry https://registry.npmmirror.com
# yarn2 配置源 项目根目录添加文件 .yarnrc.yml，配置如下内容
npmRegistryServer: "https://registry.npmmirror.com"
# npm 配置源
npm config get registry
npm config set registry https://registry.npmmirror.com
Web 开发环境安装
注意是基于 Window 平台说明。
以下是相关 Web 开发环境参考，也可以用其他的开发工具。
| 名称 | 版本 | 备注 |
|---|---|---|
| VSCode | 1.96.3 | 前端开发工具 |
| Node.js | v23.6.0 | 前端技术框架 |
- 下载 "VSCodeUserSetup-x64-1.96.3" 后双击安装。
- 安装通用插件。
直接在 VSCode 中的 extensions 中安装即可。
| 名称 | 备注 |
|---|---|
| live server | 前端容器插件，类似 Tomcat |
| vetur | |
| vue-helper | |
| Markdown All in One | |
| Volar |
Volar 是Vue 官方推荐的开发插件。
Csharp 开发环境安装
参考以下学习 Csharp。
注意是基于 Window 平台说明安装步骤。
1. 安装 .net9.0，执行命令如下。
# 1. 进入上述快速开始官网->Download and install，下载 dotnet_basic_config_website.winget
# 2. 双击 dotnet_basic_config_website.winget，使用 window 包管理器安装即可
# 3. 验证安装
dotnet --version
2. VSCode 安装 C# dev Kit 插件。
H5、小程序环境安装
注意是基于 Window 平台说明安装步骤。
我们选用 uni-app 框架来进行开发，打包时选择 H5、小程序等发布即可。
| 名称 | 版本 | 备注 | 下载 |
|---|---|---|---|
| 微信开发工具 | 下载安装即可 | ||
| HBuilderX | 下载安装即可 | 官网下载 |
Unity 开发环境安装
注意是基于 Window 平台说明安装步骤。
- 先进入官网下载 Unity-hub，通过 Unity-hub 安装 Unity，注意安装个人版免费用，以及安装 LTS 版本，功能稳定一些。
- Window 注意安装 2021 版本的 Unity，2022 会有权限弹框问题。
- Unity 的 Git 版本管理留意下。