一. 介绍
这几年接触了这玩意,感觉网上最好的学习教程就是官网了,但是官网学习面向的全领域知识结构和系统工程方面的,基础教程方向有些还是跨度有点大,适合有一定编程经验的看官网可能会更适合一些;
你可以使用 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
具体操作步骤,参考如下官网链接:
- https://cli.vuejs.org/zh/guide/creating-a-project.html
四. 参考
- https://nodejs.org/zh-cn/
- https://cli.vuejs.org/zh/guide/installation.html
- https://cli.vuejs.org/zh/guide/creating-a-project.html
- https://github.com/tj/n
- https://github.com/creationix/nvm
- https://github.com/coreybutler/nvm-windows
- https://www.npmjs.com/package/nrm