windows下使用npm搭建vue框架

简介:

    是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（此作者非常赖，借鉴官方文档的解释 https://cn.vuejs.org/v2/guide/）

1、安装node.js

    首先要到node的官网去下载：https://nodejs.org/en/download/

选择相对应的安装包；本文介绍的是windows的安装，其他版本就不做简介。我选择的是windows 64为的安装包。

下载之后基本是傻瓜式安装，直接next就行。

2、检测node.js 和npm是否安装完成

    node.js安装完成之后，打开你电脑的终端cmd输入：node -v 和 npm -v；如果安装成功的话是会出现版本号，安装失败请重新去安装。如下图：

3、npm镜像

    通常安装完node，npm的依赖包部署都是在国外的，既然是在国外的话，那么下载速度自然会变慢。why？如果想知道为什么，那么你可以试着去百度一下，这里的不多作解析。

    考虑到速度和依赖包的下载等问题，我们还是使用中国的服务器比较实在的，所以淘宝就给我提供了这么一个国内的npm镜像服务器；安装cnpm命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

    等待之后呢。就安装完啦。想知道是否安装成功呢。那么你只需要再cmd输入：cnpm -v

你会发现镜像已经是淘宝的服务器路径了。

4、安装vue-cli 

    按照官方的文档来说vue-cli是一个简单的vue.js工程的脚手架工具。作用就是快速自动搭建和生成项目工程，没有它就无法创建vue的项目。

    安装的命令：cnpm install -g vue-cli；如下图

vue-cli安装完成之后，继续在终端输入：vue，如下图显示证明你安装成功。

5、创建一个vue项目

    首先你要创建一个项目的文件夹，我以my-demo为例，然后进入该文件夹，输入命令：vue init webpack my-demo

安装完成后在你创建的文件夹下面多出一个项目，这样你就安装成功了。

6、运行vue项目。

    项目安装完成后，只需要在终端进入该项目的根目录，输入命令：npm run dev 。

    然后在的你浏览器上面访问http://localhost:8080。

然后就大功告成了。

以上都是作为个人记录和经验编写，如有不对之处，感谢大家的建议和提醒。