【Vue】使用 Vue-Cli 工具生成 DeMo 工程

• 一. 介绍
• 二. 环境
  • 2.1 Windows 环境
    • 2.1.1 环境版本
    • 2.1.2 Node 版本
    • 2.1.3 Node Global Package
  • 2.2 Mac 环境
    • 2.2.1 环境版本
    • 2.2.2 Node 版本
    • 2.2.3 Node Global Package
• 三. 常用命令
  • 3.1 node_modules root
  • 3.2 查看包版本
  • 3.3 安装 @vue-cli 包
  • 3.4 vue ui
• 四. 参考

一. 介绍

这几年接触了这玩意，感觉网上最好的学习教程就是官网了，但是官网学习面向的全领域知识结构和系统工程方面的，基础教程方向有些还是跨度有点大，适合有一定编程经验的看官网可能会更适合一些;

你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

二. 环境

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

2.1 Windows 环境

2.1.1 环境版本

# nvm Version
$ nvm version
1.1.9

2.1.2 Node 版本

# Node Version
$ node -v
v16.14.2

# NPM Version
$ npm -v
8.5.0

2.1.3 Node Global Package

$ npm ls -g --depth 0
C:\Users\XXX\AppData\Roaming\npm
+-- @vue/cli@5.0.4
+-- cnpm@7.1.1
+-- nrm@1.2.5
+-- react-native-cli@2.0.1
`-- yarn@1.22.18

2.2 Mac 环境

2.2.1 环境版本

# nrm
$ nrm --version
1.2.1

2.2.2 Node 版本

# Node Version
$ node -v
v14.18.2

# NPM Version
$ npm -v
6.14.15

2.2.3 Node Global Package

$ npm ls -g --depth 0
/usr/local/lib
├── cnpm@7.1.1
├── nrm@1.2.1
├── typescript@4.5.4
├── vue@2.6.14
├── vue-cli@2.9.6
├── webpack@5.70.0
└── yarn@1.22.17

三. 常用命令

3.1 node_modules root

npm root -g
# 或
npm ls -g --depth 0

3.2 查看包版本

# 添加 @vue/cli
yarn global add vue@2.6.14
yarn global add @vue/cli
# 查看包版本
npm view vue versions --json
npm view vue-cli versions --json
npm view @vue/cli versions --json

3.3 安装 @vue-cli 包

# 安装 @vue/cli 包
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

# 检查 Vue cli 版本
$ vue --version
@vue/cli 5.0.4

3.4 vue ui

# 创建模板项目
$ vue ui

具体操作步骤，参考如下官网链接:

1. https://cli.vuejs.org/zh/guide/creating-a-project.html

四. 参考

1. https://nodejs.org/zh-cn/
2. https://cli.vuejs.org/zh/guide/installation.html
3. https://cli.vuejs.org/zh/guide/creating-a-project.html
4. https://github.com/tj/n
5. https://github.com/creationix/nvm
6. https://github.com/coreybutler/nvm-windows
7. https://www.npmjs.com/package/nrm