如何安装vuecli（如何安装vue）

今天给各位分享如何安装vuecli的知识，其中也会对如何安装vue进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、局部安装并使用vue-cli(或者其他npm包)
• 2、vue-cli起项目步骤
• 3、Vue CLI内网安装（禁止运行vue指令解决方案）
• 4、同时安装Vue CLI2和Vue CLI3的方法
• 5、mac 无法安装vue-cli

局部安装并使用vue-cli(或者其他npm包)

局部安装并使用vue-cli(或者其他npm包)

新建目录：mkdir vue-cli2

切换目录：cd vue-cli2

初始化项目：npm init -y

安装：npm i vue-cli

查看版本：npx vue -V

使用：npx vue init webpack project

补充：

安装vue-cli3.x：npm i @vue/cli@3

使用：npx vue create project

vue-cli全局安装：npm install vue-cli -g

vue-cli的版本查看：vue -V

vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的：

npm install @vue/cli -g

如果原来已经安装了vue-cli的话需要先卸载原来的安装：

npm uninstall vue-cli -g

vue-cli起项目步骤

一、 安装 node.js

安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

二、安装webpack

             命令：npm install webpack -g

             安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。

三、安装 vue-cli

             命令：npm install -g vue-cli

             安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

             如果提示无法识别 vue，可能是 npm 版本过低，可使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

1、在硬盘中找一个放项目的文件夹

2、在文件夹下打开命令盘，输入命令

Vue-Project是我们自己设置的项目名称，项目名称不能用中文

       命令：vue init webpack Vue-Project

3、进入项目工程目录

4、安装项目所需依赖  npm install

5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

        命令：npm install vue-router vue-resource --save

创建完成的项目目录，如下图

各个目录的作用

最后一步启动项目

         命令：npm run dev

启动成功，打开浏览器8080窗口，页面如图所示

关于vue create 和vue init webpack的区别 ？

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档 网页链接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

或

另一种：

Vue CLI内网安装（禁止运行vue指令解决方案）

1、Vue cli简介：

Vue cli是一个基于Vue.js 进行快速开发的完整系统，Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

cli(@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue命令。它可以通过vue create快速搭建一个新项目，或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目。

2、 Vue cli安装

npm install -g @vue/cli

安装之后，运行vue指令，遇到以下问题：由于公司内网执行策略限制，会禁止运行vue指令。

解决方案及步骤如下：

第一步：执行Set-ExecutionPolicy RemoteSigned更改执行策略。

第二步：如果没有权限更改全局的执行策略，加上-Scope CurrentUser后再次更改（Set-ExecutionPolicy RemoteSigned -Scope CurrentUser），并为ExecutionPolicy参数提供值为：RemoteSigned。

第三步：执行策略更改完成后，成功运行vue指令。

同时安装Vue CLI2和Vue CLI3的方法

如果你想体验Vue CLI3的简洁清爽，又偶尔需要使用Vue CLI2，那这篇帖子就是你需要的。

配置方法改进于 同一台电脑 实现 vue-cli2和vue-cli3同时并存

原方法使用了直接修改文件名的方式，不够美观，破坏式的，改进后为透传调用。

在 vue-cli\bin 下创建如下文件：

添加环境变量 VUE_CLI_HOME ，值为 vue-cli 的路径，这里就是 C:\Program Files\nodejs\vue-cli

在环境变量 Path 中添加一条 %VUE_CLI_HOME%\bin

Win7 是在 Path 的最前面追加 %VUE_CLI_HOME%\bin;

修改完成后，重启命令行即可， PowerShell 可能需要重启系统才好用

在 ~/.bashrc ( 当前用户 )或者 /etc/profile ( 所有用户 )中增加：

保存之后， source ~/.bashrc 或 source /etc/profile 重新加载修改的文件即可

任意位置，执行 vue2 或者 vue3 即可，分别对应 Vue CLI2 和 Vue CLI3

执行 npm cache clean --force 后再次创建，成功，应该是以前的缓存

在 vue-cli\vue2 或 vue-cli\vue3 下重新执行 cnpm install -D xxx 即可

mac 无法安装vue-cli

在网上查的，是因为os版本过高的问题。安装 npm install -g @vue/cli 时会出现这个问题

解决办法：

在终端输入这个命令

然后再运行 npm install -g @vue/cli 就可以正常安装了。

终端输入vue，发现未找到，command not find:vue

这个问题应该是环境变量没配置，配置一下环境变量

就算上面安装了@vue/cli，这个vue-cli也是要安装的

安装后是这样的

如何安装vuecli的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于如何安装vue、如何安装vuecli的信息别忘了在本站进行查找喔。