vuecli安装教程（安装 vue cli）

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

本文目录一览：

• 1、同时安装Vue CLI2和Vue CLI3的方法
• 2、Vue3.x 超详细安装教程
• 3、局部安装并使用vue-cli(或者其他npm包)
• 4、Vue CLI内网安装（禁止运行vue指令解决方案）
• 5、怎么安装 vue-cli3？
• 6、vue-cli起项目步骤

同时安装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 即可

Vue3.x 超详细安装教程

npm 或 yarn 安装

查看版本（是否安装成功）：

进入demo目录： cd G:\demo\

创建 my-project 项目： vue create my-project

选择自己所要集成的配置（格键是选中与取消，A键是全选，回车确定）

这里我的选择如下：

配置项：

安装的 vue-cli 将会是基于 vue3.x 版本

如果在项目中想要保持使用 TypeScript 的 class 风格的话，建议大家选择y。

这里我选择： Sass/SCSS（with node-sass）

这里我选择： ESLint with error prevention only

这里我选择： Lint on save

这里我选择： In dedicated config files

cd my-project ( 进入项目根目录 )

yarn serve ( 启动项目 )

现在的目录是 Vue3.x 的 cli 看上去简洁多了，去掉了 Vue2.x 中 build 和 config 等目录

在项目的根目录下新建 vue.config.js 文件（ 是根目录，不是src目录 ）

局部安装并使用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内网安装（禁止运行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-cli3？

安装步骤：

1、cmd打开命令行窗口

2、输入cnpm install vue-cli -g，然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)

3、安装结束后输入vue 如果显示版本号继续下一步操作

4、运行vue init webpack demo(注：项目名称)回车

5、显示Project nanme 目录名 回车 project description 后面可以写上描述，或者直接回车

Author 后面可以写作者也可以回车

6、Install vue-router? 选择Y

7、User ESLint to lint your code? 选Y

8、Setup unit tests with Karma + Mocha? 问的是否要测试 选n

9、Setup e2e tests with Nightwatch? 选n

10、这个时候在你创建的目录下就有你的目录了，然后cd 你的目录名进去cnpm install回车等待,这一步是安装依赖的，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件，如果这个文件夹没有那么项目是没办法跑

起来的

11、创建结束后在创建目录里面按住shift+右键 选择 在此处打开命令窗口 输入npm run dev启动应用，启动成功它会自动打开一个vue页面

12、每次这样启动是很麻烦的，用开发工具加载整个项目，里面有个package.json，它我整个项目的配置和信息的描述，里面有个scripts,这是定义的一些脚本，刚才用的就是里面的dev，它会执行后面的东西，就是用node跑一个JSON文件

13、在项目中，右击package.json选择show npm scripts,显示npm后，双击命令即可

main.js的介绍

el是挂载点，router是路由

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的方法进行配置)

或

另一种：

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