windows下vue.js的安装与配置

> 下载及安装

---

1.1、node的安装及配置

使用vue.js开发web前端时，需要用到node的包管理工具npm，所以需要先安装node。

这里贴出node官网，下载完成后安装即可。

安装完成后，在命令行（CMD命令行）中打出node -v，如果显示node的版本号则安装成功。

node -v

接下来在命令行中打出npm -v ，检查npm是否正常安装，npm是node自带的包版本工具，正常情况node安装成功后npm也可以正常安装

npm -v

由于npm使用的是国外的镜像，大大影响我们的下载速度，所以一般把npm的下载镜像替换为淘宝镜像即cnpm，在命令行中粘贴如下命令，回车等待即可。

npm install -g cnpm --registry=https://registry.npm.taobao.org

同样，你可以在命令行中查看cnpm是否安装成功。如果一切正常的话，执行如下命令你可以看到一大堆的东西，包括node，npm，cnpm的版本号以及镜像地址等

cnpm -v

1.2、vue-cli的安装

为了方便开发大型的单页面工具，vue官方提供的vue-cli命令行工具，安装vue-cli的方法很简单，只需要在命令行中粘贴如下代码。注：install 是下载指令，-g是全局安装

cnpm install -g vue-cli

这个时候，基本的环境配置就已经完成了，你可以在命令行中输入vue看一下是否成功安装vue-cli。你应该可以看到vue-cli为我们提供的一些命令

  Usage: vue <command> [options]  Options:    -V, --version  output the version number    -h, --help     output usage information  Commands:    init        generate a new project from a template    list        list available official templates    build       prototype a new project    help [cmd]  display help for [cmd]

> 搭建一个vue应用

1.1、新建一个文件名为vue_app的应用

在命令行中输入如下命令并回车，按照他的提示回车或输入y（n）即可

D:\vue\demo>vue init webpack vue_app> 除 Use ESLint to lint your code? (Y/n) 和 Setup unit tests with Karma + Mocha? (Y/n) 两项选择 n 以外，其他均选择 y 即可

完成以上操作后，你会在当前目录下发现一个vue_app的文件夹，从命令行进入这个文件夹，并输入如下命令，这个命令会将vue-cli搭建的项目默认的依赖包下载到本地。（注：请保证网络链接）

D:\vue\demo\vue_app>cnpm install

完成以上指令之后，一个项目就搭建好了，最后看一下项目的初始页面，在命令行中输入如下指令，启动项目

D:\vue\demo\vue_app>cnpm run dev

正常启动后在，会在浏览器中打开8080端口，如果看到如下页面，则项目启动成功

---

本文章来自我的老师所写，稍作改动