Node.js与VUE安装
Node.js与VUE安装
Win
下载
直接从官网下载 官网地址：https://nodejs.org/en/
如果是window7系统: 下载安装13的版
安装
一路下一步安装即可
Mac
下载
官网
安装
双击安装包
一直下一步即可安装完毕
Win与Mac配置
检查是否安装成功
输入 node -v
输入 npm -v
切换淘宝NPM库
- npm install -g cnpm –registry=https://registry.npm.taobao.org
- npm config set registry （弃用了）
- npm config set registry （推荐）
检查镜像配置是否生效
- 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
- 示例：