Win10安装Vue-cli

Win10安装Vue-cli

前言

vue-cli 是一个官方发布 vue.js 项目脚手架，GitHub地址是：https://github.com/vuejs/vue-cli

我们平时所说的 vue 脚手架指的是 vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成 vue 和 webpack 的项目模板。

vue-cli 这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

Vue-cli 运行需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。我们需要提前安装好 Node.js，没有装的请参考这篇博客 Win10安装NodeJS

如果安装的是旧版本的 npm，我们可以通过 npm 命令来进行版本升级

npm install npm -g

详细流程

安装webpack

我们使用 npm 来全局安装 webpack。

命令中的“-g”其实是“–global”的缩写，意思是全局安装。

需要注意的是，从 webpack 4.X 版本开始，就需要安装 webpack-cli 依赖了。所以这里我们把 webpack-cli 依赖一起装上。

打开cmd，输入

npm install -g webpack
npm install -g webpack webpack-cli

安装完成后，我们查看 webpack 版本

webpack -v

安装vue-cli

我们同样使用 npm 全局安装 vue-cli。

需要注意的是，新版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall -g vue-cli 卸载它。（当然旧版本的 vue-cli 依旧是可以使用的）

旧名称下 vue-cli 的安装

npm install -g vue-cli

新名称下的 vue-cli 的安装（推荐使用）

npm install -g @vue/cli
npm install -g @vue/cli-init

我们用这个命令来检查其版本是否正确

vue --version

可以看到，我们安装的是新版本。到这一步，vue-cli 就安装完毕了，可以开始使用了。

构建简单的vue项目

我们已经安装好了 vue-cli，下面我们使用 vue-cli 来构建一个简单的项目。

首先，我们在命令行中把当前目录定位到你准备存放项目的地方。（注意，提前在磁盘中建立这个目录）

比如现在我准备把项目放在 D:\vue 这个目录下面，那么先通过cmd命令进入这个目录。

接着，我们使用 webpack 组件搭建一个简易的项目

vue init webpack xxx

其中的 xxx 是项目的名字，自行命名即可。这里我们命名为 demo

注意，这里的项目名不能有大写字母，否则会报错。

项目正常构建时会弹出几个选项进行回答：

选项	含义
Project name	这是项目名称，直接回车就会取括号中的默认名字；否则直接输入新的项目名
Project description	这是项目描述，直接回车使用默认描述
Author (xxxxxx)	这是作者的名字，可以直接回车，也可以在后面直接输入你的作者名
Vue build	主键建立，有两种方式提供选择。 1. Runtime + Compiler 运行加编译，推荐使用。 2. Runtime-only 仅运行， 速度更快。 这两种方式可以通过键盘的上下箭头进行选择，确认后按回车即可（推荐使用第一种，运行加编译，选中之后结果为 standalone）
Install vue-router	是否安装vue-router。这是官方的路由，大多数情况下都使用，建议输入Y 安装
Use ESLint to lint your code	是否使用ESLint管理代码。ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。建议输入 Y
Pick an ESLint preset	选择一个ESLint预设，这里有三个选项，默认为 standard 即可，直接回车
Set up unit tests	是否安装单元测试，项目一般都会安装单元测试，建议输入 Y
Pick a test runner	同样地，选择一个单元测试工具，默认 Jest 即可，直接回车
Setup e2e tests with Nightwatch	是否安装e2e测试，同理，输入Y ，并选择第一个
Should we run npm install for you after the project has been created	选择构建项目的方式：npm、yarn或者手动构造，默认使用 npm，直接回车即可

总结一下就是，如果项目没有什么需要修改的地方，一路回车即可。

稍微等待几分钟，等待项目构建完成。出现 finish 字样则项目构建完毕。

进入刚建立的项目中，开始运行

cd demo
npm run dev

耐心等待加载，加载完成后命令行中会弹出一个网址

我们直接在浏览器输入该网址，就可以看到一个简单的 vue 项目了。

如果要停止项目运行，关闭命令行即可。

下次我们在命令行进入 demo 项目的目录后，可以直接启动项目。

要删除这个 vue 项目也十分地简单，直接到磁盘中删除项目即可。比如我们项目在 D:\vue 目录，直接进入此目录删除 demo 项目就行了。

参考文章

vue-cli（vue脚手架）超详细教程

Windows10下配置Vue环境

windows环境安装vue-cli及webpack并创建vueJs项目