Node.js与VUE安装

目录

• Win
• • 下载
  • 安装
• Mac
• • 下载
  • 安装
• Win与Mac配置
• • 检查是否安装成功
  • 切换淘宝NPM库
  • 检查镜像配置是否生效
  • [设置 npm 全局环境目录（避免权限问题）](#设置 npm 全局环境目录（避免权限问题）)
  • • Win
    • Mac
• [VUE CLI安装](#VUE CLI安装)
• • 安装
  • 验证
  • 打开vue面板
• Vue脚手架
• • [npm init vue@latest、npm create vue@latest](#npm init vue@latest、npm create vue@latest)
  • [vue create、vue ui](#vue create、vue ui)

Win

下载

直接从官网下载官网地址：https://nodejs.org/en/

如果是window7系统: 下载安装13的版https://nodejs.org/dist/latest-v13.x/

安装

一路下一步安装即可

Mac

下载

官网 https://tomcat.apache.org/download-10.cgi

安装

• 双击安装包
  
  
• 一直下一步即可安装完毕
  

Win与Mac配置

检查是否安装成功

• 输入 node -v
• 输入 npm -v
  

切换淘宝NPM库

• npm install -g cnpm --registry=https://registry.npm.taobao.org
• npm config set registry https://registry.npm.taobao.org （弃用了）
• npm config set registry https://registry.npmmirror.com（推荐）

检查镜像配置是否生效

• npm config list
• npm config get registry
  • 应输出为刚才设置的网址
    

设置 npm 全局环境目录（避免权限问题）

Win

注意：D:\develop\NodeJS 这个目录是NodeJS的安装目录

npm config set prefix "D:\develop\NodeJS"

Mac

• 默认情况下，npm 全局包会安装到 /usr/local/，可能需要管理员权限。以下是重新设置 npm 全局环境的方法：

• 创建新的全局目录

  mkdir ~/.npm-global

• 配置 npm 使用新的目录
  运行以下命令设置 npm 全局目录到用户目录：

  npm config set prefix ~/.npm-global

• 添加目录到环境变量
  将新目录添加到 PATH 环境变量中：
  编辑 ~/.zshrc 文件（如果是 bash，编辑 ~/.bashrc）：

  vim  ~/.zshrc
  添加以下内容
  export PATH=$PATH:~/.npm-global/bin

• 验证新的 npm 配置
  运行以下命令，确认 npm 的全局目录已更改：

  npm config get prefix
  输出应为：
  /Users/<你的用户名>/.npm-global

VUE CLI安装

安装

• CLI可安可不安，安装的话就是可以使用ui界面创建项目
• 注意事项
  • 使用--force选项可能会忽略一些重要的错误信息，导致安装的包不完全符合预期，使用时需谨慎。
  • 在大多数情况下，建议先检查网络连接和权限设置，尽量避免使用强制安装选项。

默认安装命令
npm install -g @vue/cli
是默认的安装命令，用于全局安装Vue CLI工具。这个命令会尝试正常安装Vue CLI，如果过程中遇到问题，可能会失败。

强制安装命令
npm install -g @vue/cli --force
是在默认命令的基础上增加了--force选项，用于强制安装Vue CLI。这个选项会在安装过程中遇到错误时尝试继续进行，即使某些包或依赖无法正常下载或安装。

验证

vue --version
如果输出类似 @vue/cli 5.x.x，说明安装成功。

打开vue面板

vue ui
会自动弹出网页或者显示网址链接

Vue脚手架

在dos黑窗口中创建项目

• npm init vue@latest 和 npm create vue@latest一样
• vue create 和使用vue ui页面一样
• 是两种不同的创建 Vue 项目的方式，它们分别基于 Vite 和 Vue CLI

npm init vue@latest、npm create vue@latest

• 基于 Vite：使用 Vite 作为构建工具。

• 现代开发体验：Vite 提供了更快的开发服务器启动速度和热更新。

• 轻量级：Vite 的配置更简单，适合现代前端开发。

• 命令

  npm init vue@latest

• 特点

  • 交互式配置：
  • 提供一系列选项（如 TypeScript、Vue Router、Pinia 等），可以根据需要选择。
  • 示例：
    • ✔ Project name: ... my-vue-app
    • ✔ Add TypeScript? ... No / Yes
    • ✔ Add JSX Support? ... No / Yes
    • ✔ Add Vue Router? ... No / Yes
    • ✔ Add Pinia? ... No / Yes
    • ✔ Add Vitest? ... No / Yes
    • ✔ Add Cypress? ... No / Yes
    • ✔ Add ESLint? ... No / Yes
    • ✔ Add Prettier? ... No / Yes
  • 默认生成基于 Vite 的项目结构。
  • 包含 vite.config.js 文件。
    

vue create、vue ui

• 基于 Vue CLI：使用 Webpack 作为构建工具。

• 传统开发体验：Vue CLI 是 Vue 官方提供的传统脚手架工具，功能全面但启动速度较慢。

• 适合复杂项目：Vue CLI 提供了更多插件和配置选项

• 命令

  npm install -g @vue/cli
  vue create my-vue-app

• 特点

  • 示例：
    • ? Please pick a preset: Manually select features
    • ? Check the features needed for your project:
    • ◉ Babel
    • ◉ TypeScript
    • ◯ Progressive Web App (PWA) Support
    • ◉ Router
    • ◉ Vuex
    • ◉ CSS Pre-processors
    • ◉ Linter / Formatter
    • ◯ Unit Testing
    • ◯ E2E Testing
  • 目录结构
    • my-vue-app/
      ├── node_modules/
      ├── public/
      ├── src/
      │ ├── assets/
      │ ├── components/
      │ ├── views/
      │ ├── App.vue
      │ ├── main.js
      │ ├── router.js
      │ ├── store.js
      ├── .gitignore
      ├── babel.config.js
      ├── package.json
      ├── README.md
      ├── vue.config.js