VUE 参考官网：https://cli.vuejs.org/zh/guide/

NVM 安装

我们开发过程中常常遇到 nodejs 版本不适配的问题，需要切换到不同版本的 nodejs，nodejs 卸载安装麻烦，这就需要用到 nvm 了。

nvm 全名 node.js version management，顾名思义是一个 node.js 的版本管理工具。通过它可以安装和切换不同版本的 nodejs。

卸载 node.js

为了确保彻底删除 node 在看看你的 node 安装目录中还有没有 node 文件夹，有的话一起删除。再看看 C:\Users\用户名 文件夹下有没有.npmrc以及.yarnrc等等统统删除。再去看看你的环境变量有没有 node 相关的，有的话也一起删除了。一定要卸载干净！

安装 nvm

Releases · coreybutler​​​​​​/nvm-windows · GitHub

分别选择 nvm 的安装路径和 nodejs 的安装路径

终端输入 nvm -v 查到版本号则安装成功！

配置

环境变量在安装过程中会自动配置好

在 nvm 的安装目录找到 settings.txt，配置下载源

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

里面的 root 和 path 应该是安装的时候配好的，不要动。

使用 nvm 安装 node.js

nvm list available 查看可安装版本

选择一个安装：npm install 版本号

安装后 nvm list 查看已安装的版本和正在使用的版本

nvm 常用命令

创建 VUE 项目

使用 vue init 创建 vue2（不推荐）

前提：安装了 vue-cli

1
2
3
4
5
6
7
8

# 安装（最新版）
npm install -g vue-cli

# 安装（指定版本）
npm install -g @vue/cli@4.5.14

#测试版本,显示版本号即安装成功
vue -V

创建项目

vue init webpack 命令是 vue -cli2.x 版本的初始化方式，启动方式默认为 npm run dev ，webpack 为官方推荐模板。

1
2
3
4
5
6
7
8

# 生成一个基于 webpack 模板的新项目
vue init webpack project_name

#进入项目目录
cd project_name

#启动项目
npm run serve

使用vue init构建项目的时候，会有如下几步提示信息：

1
2
3

>? Project name vuedemo1`，设置项目名称，这一步直接回车，使用默认即可。
>? Project description A Vue.js project`，项目描述，我这也直接回车略过。
>? Author (zhangkai <xxxxx@163.com>)`，如果你的电脑上安装了 git，这里会默认提取你的 git 账户名作为作者，我同样回车使用默认。

使用 vue create 创建 vue2 和 3（较推荐）

vue create 是 vue -cli3.x 版本的初始方式 ，启动方式默认为 npm run serve

如果在执行 vue create 时，提示如下内容，那么就按照提示重新安装下高版本的 vue/cli 就行了。

提示是否从https://registry.npmmirror.com这个仓库进行快速安装  ，选 yes 或 no

使用 npm create vue 创建 vue2 和 3

1
2

npm create vue@2 project_name
npm create vue@3 project_name

使用 npm create vite 创建（推荐）

基于 Vite 创建 vue 项目是目前 vue 官方比较推荐的创建方式。

Vite 需要 Node.js  版本 14.18+，16+，有些模板需要依赖更高的 Node 版本才能正常运行

这种创建方式依赖 npm 版本，不同版本命令不太一样：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

#查看npm版本
npm -v

# npm 6.x
npm create vite@latest vite-vue --template vue

# npm 7+, 需要额外的加两个短横线:
npm create vite@latest vite-vue -- --template vue

# yarn
yarn create vite vite-vue --template vue

# pnpm
pnpm create vite vite-vue --template vue

使用 vue ui 创建（推荐）

1
2

#vue的web端可视化创建
vue ui