vue安装及npx @vue/clie@4.5.15 create与npx vue create创建项目的区别
大家好，我是欧阳方超，可以扫描下方二维码关注我的公众号“欧阳方超”，后续内容将在公众号首发。
npx @vue/clie@4.5.15 create my-vue-app 与npx vue create project_name创建项目的区别是什么，今天就来看一下，稍等介绍局部和全局安装vue/cli的方法。
1、安装Vue CLi
1.1、局部安装 Vue CLI
局部安装 Vue CLI 可以避免全局安装带来的版本冲突问题，并确保每个项目使用特定版本的 CLI 工具。
npm install --save-dev @vue/cli@4.5.15
或
npm install -D @vue/cli@4.5.15
install可缩写为i。
安装之后可以查询所安装vue/cli的版本：
npx vue -V
@vue/cli 4.5.15
1.1.1、使用局部安装的 Vue CLI 创建新的 Vue 项目
创建一个新的 Vue 项目可以使用以下命令：
npx vue create my-vue-app
这种方式创建的vue项目出现在局部安装vue/cli命令时所在目录的里面，即如果是在/home/user/projects 目录下执行的安装vue/cli命令，则新项目会被创建在/home/user/projects/my-vue-app
1.1.2、在当前目录中初始化 Vue 项目
可以把当前项目初始化为Vue项目，注意，如果要把当前项目初始化为Vue项目，需在局部安装完vue/cli后执行npm init -y命令：
PS D:\tools\test1> npm init -y
Wrote to D:\tools\test1\package.json:
{
"name": "test1",
"version": "0.1.0",
"private": true,
"devDependencies": {
"@vue/cli": "^4.5.15",
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-eslint": "~4.5.15",
"@vue/cli-service": "~4.5.15"
},
"main": "index.js",
"dependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
否则会报错：
ERROR TypeError: stringify is not a function
TypeError: stringify is not a function
at stringifyJS (D:\tools\test1\node_modules\@vue\cli\lib\util\stringifyJS.js:4:10)
at Object.write (D:\tools\test1\node_modules\@vue\cli\lib\util\configTransforms.js:38:34)
at ConfigTransform.transform (D:\tools\test1\node_modules\@vue\cli\lib\ConfigTransform.js:33:31)
at extract (D:\tools\test1\node_modules\@vue\cli\lib\Generator.js:198:37)
at Generator.extractConfigFiles (D:\tools\test1\node_modules\@vue\cli\lib\Generator.js:221:7)
at Generator.generate (D:\tools\test1\node_modules\@vue\cli\lib\Generator.js:173:10)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Creator.create (D:\tools\test1\node_modules\@vue\cli\lib\Creator.js:229:5)
at async create (D:\tools\test1\node_modules\@vue\cli\lib\create.js:72:3)
找不到批处理文件。
详细执行过程：
PS D:\tools\test1> npx vue create .
Vue CLI v4.5.15
? Generate project in current directory? Yes
Vue CLI v4.5.15
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.15 → 5.0.8 │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: Default ([Vue 2] babel, eslint)
Vue CLI v4.5.15
✨ Creating project in D:\tools\test1.
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.15
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.3: The platform "win32" is incompatible with this module.
info "fsevents@2.3.3" is an optional dependency and failed compatibility check. Excluding it from installation.
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 98.43s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.3: The platform "win32" is incompatible with this module.
info "fsevents@2.3.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 10.05s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project test1.
👉 Get started with the following commands:
$ yarn serve
1.2、全局安装 Vue CLI
1.2.1、全局安装 Vue CLI
全局安装 Vue CLI，运行以下命令安装最新版本的 Vue CLI：
npm install -g @vue/cli
如果要安装指定版本的cli，在@vue/cli后使用@指定版本即可t:
npm install -g @vue/cli@4.5.15
安装完成之后，可以查看版本信息：
PS D:\tools> vue -V
@vue/cli 5.0.8
PS D:\tools> vue --version
@vue/cli 5.0.8
PS D:\tools>
如果不清楚有哪些vue/cli版本可供选择安装，可以使用 npm view @vue/cli versions命令查看：
PS D:\tools> npm view @vue/cli versions
[
'3.0.0-alpha.1', '3.0.0-alpha.2', '3.0.0-alpha.3', '3.0.0-alpha.4',
'3.0.0-alpha.5', '3.0.0-alpha.6', '3.0.0-alpha.7', '3.0.0-alpha.8',
'3.0.0-alpha.9', '3.0.0-alpha.10', '3.0.0-alpha.11', '3.0.0-alpha.12',
'3.0.0-alpha.13', '3.0.0-beta.1', '3.0.0-beta.2', '3.0.0-beta.3',
'3.0.0-beta.4', '3.0.0-beta.5', '3.0.0-beta.6', '3.0.0-beta.7',
'3.0.0-beta.8', '3.0.0-beta.9', '3.0.0-beta.10', '3.0.0-beta.11',
'3.0.0-beta.12', '3.0.0-beta.13', '3.0.0-beta.14', '3.0.0-beta.15',
'3.0.0-beta.16', '3.0.0-rc.1', '3.0.0-rc.2', '3.0.0-rc.3',
'3.0.0-rc.4', '3.0.0-rc.5', '3.0.0-rc.6', '3.0.0-rc.7',
'3.0.0-rc.8', '3.0.0-rc.9', '3.0.0-rc.10', '3.0.0-rc.11',
'3.0.0-rc.12', '3.0.0', '3.0.1', '3.0.2',
'3.0.3', '3.0.4', '3.0.5', '3.1.0',
'3.1.1', '3.1.2', '3.1.3', '3.2.0',
'3.2.1', '3.2.2', '3.2.3', '3.3.0',
'3.4.0', '3.4.1', '3.5.0', '3.5.1',
'3.5.2', '3.5.3', '3.5.4', '3.5.5',
'3.6.0', '3.6.1', '3.6.2', '3.6.3',
'3.7.0', '3.8.0', '3.8.2', '3.8.3',
'3.8.4', '3.9.0', '3.9.1', '3.9.2',
'3.9.3', '3.10.0', '3.11.0', '3.12.0',
'3.12.1', '4.0.0-alpha.0', '4.0.0-alpha.1', '4.0.0-alpha.2',
'4.0.0-alpha.3', '4.0.0-alpha.4', '4.0.0-alpha.5', '4.0.0-beta.0',
'4.0.0-beta.1', '4.0.0-beta.2', '4.0.0-beta.3', '4.0.0-rc.0',
'4.0.0-rc.1', '4.0.0-rc.2', '4.0.0-rc.3', '4.0.0-rc.4',
'4.0.0-rc.5', '4.0.0-rc.6', '4.0.0-rc.7', '4.0.0-rc.8',
'4.0.0', '4.0.1', '4.0.2', '4.0.3',
'4.0.4', '4.0.5', '4.1.0-beta.0', '4.1.0',
'4.1.1', '4.1.2', '4.2.0', '4.2.1',
'4.2.2', '4.2.3', '4.3.0', '4.3.1',
'4.4.0', '4.4.1', '4.4.2', '4.4.3',
'4.4.4', '4.4.5', '4.4.6', '4.5.0',
'4.5.1', '4.5.2', '4.5.3', '4.5.4',
'4.5.5', '4.5.6', '4.5.7', '4.5.8',
'4.5.9', '4.5.10', '4.5.11', '4.5.12',
'4.5.13', '4.5.14', '4.5.15', '4.5.16',
'4.5.17', '4.5.18', '4.5.19', '5.0.0-alpha.0',
'5.0.0-alpha.1', '5.0.0-alpha.2', '5.0.0-alpha.3', '5.0.0-alpha.4',
'5.0.0-alpha.5', '5.0.0-alpha.6', '5.0.0-alpha.7', '5.0.0-alpha.8',
'5.0.0-beta.0', '5.0.0-beta.1', '5.0.0-beta.2', '5.0.0-beta.3',
'5.0.0-beta.4', '5.0.0-beta.5', '5.0.0-beta.6', '5.0.0-beta.7',
'5.0.0-rc.0', '5.0.0-rc.1', '5.0.0-rc.2', '5.0.0-rc.3',
'5.0.1', '5.0.2', '5.0.3', '5.0.4',
'5.0.5', '5.0.6', '5.0.7', '5.0.8'
]
1.2.2、卸载 Vue CLI
卸载全局安装的vue/cli：
npm uninstall -g @vue/cli
uninstall可以缩写为un。
卸载完成后,可以再次运行 vue --version 确认已经卸载成功。
2、npx @vue/clie与npx vue创建项目的区别
npx @vue/cli@4.5.15 create my-vue-app
上面这个命令会临时下载并使用指定版本的 Vue CLI 来创建项目，无论全局安装的是什么版本。如果没有指定cli的版本，则会下载最新版本。
当运行npx @vue/cli@4.5.15 create my-vue-app 时，npx 会执行以下步骤：
检查 @vue/cli@4.5.15 是否已经安装。
如果没有安装，它会临时下载并安装指定版本的 Vue CLI。
然后使用这个版本的 Vue CLI 来执行 create my-app 命令。
命令执行完毕后，临时安装的包会被删除。
npx vue create my-vue-app
上面这个命令会使用全局或局部安装的 Vue CLI 版本，注意，如果全局和局部都没有安装vue脚手架，执行上面命令时是会报错的：
command not found: vue
所以如果没有在全局或局部安装cli，则需要明确指定包名。
3、总结
本文介绍了全局和局部安装vue/cli的方式，同时介绍了npx @vue/clie@4.5.15 create与npx vue create两种命令创建vue项目的区别。
我是欧阳方超，把事情做好了自然就有兴趣了，如果你喜欢我的文章，欢迎点赞、转发、评论加关注。我们下次见。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
