如何安装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包)

新建目录：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指令。