【无标题】

最新推荐文章于 2024-10-30 23:37:19 发布

稼纬

最新推荐文章于 2024-10-30 23:37:19 发布

阅读量120

点赞数

分类专栏：工作前的准备文章标签： arcgis git visual studio code

本文链接：https://blog.csdn.net/qq_37283701/article/details/133083474

版权

工作前的准备专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目环境配置(入职新公司VUE3.0+typescript+vite+vant) 转载知乎-咕咕

一、安装 nodejs 及修改系统环境

1、安装：中文官网：nodejs，安装步骤根据提示走下一步，不需要过多的自定义修改。安装完成后可打开 cmd（win+R => 输入 cmd => enter），输入：

node -v // 查看node版本号
npm -v // 查看npm版本号
where node // 查看node安装路径

2、修改 npm 全局安装模块所在路径和缓存 cache 路径

（1）在 cmd 中执行如下两行命令，成功后会在 nodejs 安装目录下新建两个文件夹（node_global、node_cache）：

npm config set prefix “C:\Program Files\nodejs\node_global”
npm config set cache “C:\Program Files\nodejs\node_cache”

在这里插入图片描述

（2）修改系统环境变量：win+I（打开设置面板） -> 系统 -> 关于 -> 高级系统设置 -> 高级 -> 环境变量

系统变量下新建 NODE _PATH 为 C:\Program Files\nodejs\node_global\node_modules
系统变量中修改 path 值，添加：C:\Program Files\nodejs
用户变量中修改 path 中 npm 的默认值为 C:\Program Files\nodejs\node_global

在这里插入图片描述

二、安装 git 代码管理工具

直接在软件商店里下载 git 和 TortoiseGit 即可，可提供图形化的管理界面，用于 clone，pull，commit、push代码

1、push 时出错，报错为 git did not exit cleanly (exit code 1)或GitLab: You are not allowed to push code to protected branches on this project

解决：首先确认是否有提交权限，再检查提交流程：一般的提交流程是 pull -> commit -> push，如果 pull 后直接 push 会有这个问题，重新修改项目后再再步骤提交一次即可

三、下载 vscode 编辑器

1、安装项目基础的扩展：Auto Close Tag、Auto Import、Auto Rename Tag、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code、TSLint (deprecated)、TSLint Vue、Vetur、Vue 3 Snippets、DotENV（高亮 .env文件）、Path Intellisense（路径自动补全）

2、vscode 中自动化配置

（1）自动保存：设置中搜索 autosave，选择
在这里插入图片描述
（2）保存时自动格式化：设置中搜索 formatsave，勾选

（3）js格式化设置：对于 vue 项目，安装 vetur 插件后，代码格式化默认为 prettier，此时它会将 js 代码中的单引号（‘’）转换成双引号（“”），同时在代码结束结尾处加上分号（;）。解决方法：

需要在 setting.json 文件中添加如下（可设置的选项）：

{
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "files.autoSave": "onWindowChange",
    "javascript.format.semicolons": "remove",
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "printWidth": 145,
            "singleQuote": true,
            "semi": false,
            "bracketSameLine": true,
        }
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript",
}

将默认的 prettier 改为 vscode-typescript，在 typescript
中设置删除不必要的分号，和将首选项引用样式改为 single（它不会强制转换单双引号）

在这里插入图片描述
![(https://img-blog.csdnimg.cn/f981410022884ef5aa34a8b60fa8f457.jpeg#pic_center)

prettier 在格式化时会将链式语句自动换行，根据 google 搜索结果是目前这个 issue 已提交给 prettier，但还没有
merge，所以解决方法是在不想换行的地方加上“// prettier-ignore”

（4）路径自动补全：Path Intellisense，配置别名

{
    "path-intellisense.mappings": {
        "@": "${workspaceFolder}/src"
    },
}

3、扩展补充

（1）EditorConfig for VS Code（有助于为不同 IDE 编辑器上处理同一个项目的多个开发人员维护一致的编码风格）

（2）ESLint（代码检测）

（3）Image Preview（在编辑器左侧或鼠标悬停时显示图片预览）

（4）Live Server（启动本地服务器）

（5）Open in Browser（打开默认浏览器）

（6）wechat-snippet（微信小程序代码辅助,代码片段自动完成）

（7）小程序开发助手

（8）prettier（代码格式化）

在设置中将其设为默认格式化程序

（9）vscode-icons（文件图标主题）

4、在使用 volar 并关闭 vetur 后，格式化使用的是 prettier ，完整的 settings.json 如下：

{
  "editor.tabSize": 2,
  "javascript.format.semicolons": "remove",
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 145,
      "singleQuote": true,
      "semi": false,
      "bracketSameLine": true
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "security.workspace.trust.untrustedFiles": "open",
  "volar.codeLens.references": false,
  "volar.formatting.printWidth": 145,
  "files.autoSave": "onWindowChange",
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  },
  "volar.format.initialIndent": {
    "html": true
  },
  "editor.formatOnSave": true,
  "auto-close-tag.disableOnLanguage": [],
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "editor.codeActionsOnSave": {},
  "vue.autoInsert.dotValue": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.nodePath": "C:/shuqun/application/Node/app/node.exe",
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.iconTheme": "vscode-icons",
  "prettier.bracketSameLine": true,
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 145,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.proseWrap": "never"
}

四、运行项目

1、npm install：安装所需依赖

2、npm run dev：运行本地项目

3、npm run build：打包

4、错误及解决：

（1）项目配置文件为：
在这里插入图片描述
（2）打包时报错：“‘vue-tsc’ 不是内部或外部命令,也不是可运行的程序”

解决：全局安装相应的依赖即可（安装失败可已管理员身份安装 win+X -> Windows PowerShell(管理员)）

npm install -g @vue/cli
npm install -g typescript
npm install -g vue-tsc
npm install -g tslint

（3）代码提示：wx.invoke is not a function

解决：以 script 方式引入 jsapi，在代码前加入 //@ts-ignore 忽略 ts 检查
在这里插入图片描述
（4）代码提示：Property ‘code’ does not exist on type ‘AxiosResponse’

解决：axios 请求类型问题，新增 axios.d.ts文件，配置：

import * as axios from 'axios'

declare module 'axios' {
  interface AxiosInstance {
    (config: AxiosRequestConfig): Promise<any>
  }
}

（5）项目配置路由守卫时报 warn：Detected an infinite redirection in a navigation guard when going from “/” to “/customer/groupPortray”. Aborting to avoid a Stack Overflow. This will break in production if not fixed.
在这里插入图片描述
原代码：

(entryTest in pageEntry) ? next(pageEntry[entryTest]) : next('/404');

修改后代码：

    if (to.path === pageEntry[entryTest]) {
      next();
    } else {
      (entryTest in pageEntry) ? next(pageEntry[entryTest]) : next('/404');
    }

防止陷入跳转死循环

（6）打包时报错：“zip 不是内部或外部命令，也不是可执行程序”
在这里插入图片描述
解决：需要添加 zip 的系统环境变量：首先下载zip执行程序 -》修改系统和用户环境变量 path，添加 zip 的路径

五、使用 nvm 管理 node 版本

1、卸载原安装的 nodejs，删除环境变量中自己添加的 NODE_PATH，删除残留的原 node 文件

2、下载：Releases · coreybutler/nvm-windows (github.com)

在这里插入图片描述
推荐下载 nvm-setup.zip，然后手动安装

3、安装，按提示安装即可

选择 nvm 安装路径
在这里插入图片描述
选择 node 包将会被放置的路径

安装完成后，在命令行敲击 nvm，出现以下信息表示安装成功

4、修改 nvm 配置文件 settings.txt

添加 node 和 npm 镜像

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

5、安装 node

nvm install 14.16.1
nvm install 16.20.1

6、切换 node

nvm use 14
nvm use 16

在这里插入图片描述
7、常用命令

（1）卸载：nvm uninstall 14.16.1

（2）查看已安装/可安装 node：nvm list/ls [availabel]

8、查看 node 安装路径（使用 nvm 安装的 node，where node 命令无法获取到）

node -e "console.log(process.execPath);"

六、windows git bash 使用

解决 git bash 在 windows 上无法使用键盘上下键来选择选项问题

1、通过数字键组合来选择
在这里插入图片描述
例如输入3，回车来选择第3个选项

例如输入1,2,4,5,7，回车来选择 TypeScript,Router,Vuex，其中1和7是默认选中的，通过再次选择来取消。也可以使用数组[1,2,4,5,7]

2、使用 winpty 来启动命令

winpty 是一个 Windows 软件包，提供了类似 Unix pty-master 一样的接口，用于实现控制台程序之间的通讯。该软件包包括一个开发库（libwinpty）和一个用于 ygwin 和 MSYS 的工具用于在 Cygwin/MSYS pty 下运行 Windows 控制台程序。

如果只是在常规命令前加 winpty，会报错：

说明它会去 PATH 中找后面的指令，在使用 winpty 时，需要在常规指令后加 .cmd 后缀

winpty vue.cmd create 20230710cms

在这里插入图片描述

如果仍想使用 vue create 20230710cms 命令，可以修改 ~/.bashrc 文件。添加命令别名：alias
vue=‘winpty vue.cmd’，然后重启 bash。

vue/cli 官网给出解决方案

3、将 git bash 换成 cmd

cmd 默认是使用上下键来选择的

4、使用 vscode 中 bash

添加 Git Bash 终端，也是可以直接通过上下键来选择在这里插入图片描述

稼纬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录