前端学习笔记（二）

原创已于 2025-05-25 16:42:31 修改 · 413 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #笔记

于 2025-02-26 09:26:26 首次发布

vue项目创建

https://github.com/vuejs/create-vue
网上可能会搜到的使用vue cli创建这个已经过时了，请使用create-vue来搞
在这里插入图片描述

在这里插入图片描述
创建

 cd xx-website
 npm install
 npm run format
 npm run dev

node版本管理

https://www.jianshu.com/p/037c20b67ed4
下载的话，先直接用nodejs.org官网提供的方法获取到下载链接，如果下载不了，在香港服务器下载
配置环境变量并将fnm.exe加到
在这里插入图片描述

fnm默认下载位置修改

C:\Users\YOUR_USER_NAME\AppData\Roaming\fnm

配置环境变量FNM_DIR即可修改默认位置比如到D:\fnm

下载具体版本

fnm install 16.19.1

下载官网的版本

fnm install 16

使用noed具体版本
在这里插入图片描述
1、先创建.node-version文件，在文件里面写入具体版本号
2、fnm use
如果报错

需要在windows powershell中执行下命令

fnm env --use-on-cd | Out-String | Invoke-Expression

然后在powershell中执行，如果希望每次打开powershell不输入自动执行上面的命令，可以如下操作下
1、打开PowerShell执行notepad $PROFILE创建/编辑配置文件6
若提示文件不存在，先执行New-Item -ItemType File -Path $PROFILE -Force创建默认配置文件
2、在配置文件中添加需要执行的脚本命令fnm env --use-on-cd | Out-String | Invoke-Expression后保存

# 当前项目下有.node-version文件
fnm use

或者

# 16.19.1为具体版本号
fnm use 16.19.1

npm默认安装路径及修改

rug 在这里插入图片描述
如果使用pnpm报错权限问题，需要把当前用户的权限改下

函数的学习

https://blog.youkuaiyun.com/weixin_68211919/article/details/132625933
在这里插入图片描述

ts中使用map

在这里插入图片描述

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
 
for (const [key, value] of map) {
  console.log(`Key: ${key}, Value: ${value}`);
}

在这里插入图片描述

代码格式化

https://zhuanlan.zhihu.com/p/698989031
在这里插入图片描述

ES6 的对象解构语法

在这里插入图片描述

ES、TS、JavaScript的区别

在这里插入图片描述

APP_INFO

在这里插入图片描述
vite中引入svn版本信息

import { defineConfig } from 'vite';
import { execSync } from 'child_process';

// 获取 SVN 信息
const svnRevision = execSync('svn info --show-item revision').toString().trim();
const svnUrl = execSync('svn info --show-item url').toString().trim();

export default defineConfig({
  define: {
    __APP_INFO__: JSON.stringify({
      version: '1.0.0',
      buildTime: new Date().toISOString(),
      svnRevision,
      svnUrl,
    }),
  },
});

webpack中引入svn版本信息

const webpack = require('webpack');
const { execSync } = require('child_process');

// 获取 SVN 信息
const svnRevision = execSync('svn info --show-item revision').toString().trim();
const svnUrl = execSync('svn info --show-item url').toString().trim();

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __APP_INFO__: JSON.stringify({
        version: '1.0.0',
        buildTime: new Date().toISOString(),
        svnRevision,
        svnUrl,
      }),
    }),
  ],
};