知识森林

Appearance

On this page

前端环境安装与项目启动 ​

安装nvm ​

前端项目需要在node环境进行编译，请下载node版本切换工具nvm。
详细流程参考: nvm安装与使用。

备注： 当前框架node需要18.2.0以上版本

安装pnpm ​

js
## 安装pnpm
// 下载node 使用npm安装
npm install -g pnpm

// 淘宝源安装
pnpm config set registry https://registry.npmmirror.com/

// 使用
pnpm i  // 安装依赖
pnpm add ***    // -S  默认写入dependencies
pnpm add -D ***   // -D devDependencies
pnpm add -g ***   // 全局安装

安装vscode及常用插件 ​

安装地址：vscode编译器。

建议安装以下工具来提高开发效率及代码格式化。

  • TailwindCSS IntelliSense
  • Ant Design Vue helper
  • JavaScript and TypeScript Nightly
  • Prettier - Code formatter
  • Vue Language Features(Volor)
  • Eslint

利用脚手架获取代码 ​

ts
// 进入文件夹 全局安装脚手架工具
pnpm add @dt-frames/cli -g

// 获取代码 my-project为文件夹名称
dt-cli create my-project

// 进入项目
cd my-project

// 安装依赖
pnpm i

// 运行项目
pnpm dev

修改代理文件 ​

请修改proxy里的target连接的数据库地址。

ts
/**
 * 文件路径: 项目根路径/proxy.config.ts
 * 本项目参数设置如下，更多:https://vitejs.cn/config/#server-host
 */

// 监听的ip地址, 如果将此设置为0.0.0.0或者true将监听所有地址，包括局域网和公网地址
host: string | boolean,
// 端口
port: number,
// 如果端口被占用时，是否尝试下一个可用端口
strictPort: boolean,
// 是否启用https
https: boolean,
// 是否在浏览器中打开页面, 当此值为字符串时，会被用作 URL 的路径名
open: boolean | string,
// 代理
proxy: {
    "/api/v1": {
        target: "http://127.0.0.1:8080",   // 此处需要改成自己连接后台的地址
        changeOrigin: true,
        // 重写代理路径
        rewrite: path => path.replace(/^\/api\/v1/, '')
    }
}