vue安装及使用

一、webstorm的安装：

1、什么是webstorm

WebStorm是jetbrains公司旗下一款JavaScript 开发工具，和IntelliJ IDEA同源。

再多的，可以

2、webstorm安装

一位大神整理的webstorm安装教程，我是按照这个教程安装的。

https://blog.youkuaiyun.com/xunciy/article/details/77345663

二、node.js的安装

1、什么是node.js

Node.js是一个Javascript运行环境。

2、node.js安装

同样的，一位大神总结的安装教程，为了不占用c盘空间，在配置NODE_HOME的时候坎坷万分，不担心c盘空间的，不配置也可以，直接下载到c盘。

https://blog.youkuaiyun.com/xmzyjr123/article/details/79428611

3、安装完成node.js，npm也就安装完成了。

npm是node的包管理工具。
三、cnpm的安装

npm 命令用于从国外的服务器上下载别人做好的模块。 因为是在国外的服务器，有的时候网速会很受影响，其结果就是导致下载会非常卡顿。
所以这个时候就会用到 cnpm了。这里的c 是 copy的意思，即复制 npm 上面的库。 
把npm 上面的库复制到 国内的服务器上，当需要用的时候，使用 cnpm 命令获取，就会快很多了。

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

其中的-g 是-global 的意思，即全局安装，而不是安装在当前目录下。 一旦全局安装过了，项目就不需要在本地安装也可以使用了。

注意：使用代理安装cnpm

为npm设置代理

npm全称为Node Packaged Modules。它是一个用于管理基于node.js编写的package的命令行工具。其本身就是基于node.js写的,这有点像gem与ruby的关系。

在我们的项目中，需要使用一些基于node.js的javascript库文件，就需要npm对这些依赖库进行方便的管理。由于我们的开发环境由于安全因素在访问一些网站时需要使用代理，其中就包括npm的repositories网站，所以就需要修改npm的配置来加入代理。

下面简要介绍下npm的配置以及如何设置代理。

npm获取配置有6种方式，优先级由高到底。

1. 命令行参数。 --proxy http://server:port即将proxy的值设为http://server:port。

2. 环境变量。 以npm_config_为前缀的环境变量将会被认为是npm的配置属性。如设置proxy可以加入这样的环境变量npm_config_proxy=http://server:port。

3. 用户配置文件。可以通过npm config get userconfig查看文件路径。如果是mac系统的话默认路径就是$HOME/.npmrc。

4. 全局配置文件。可以通过npm config get globalconfig查看文件路径。mac系统的默认路径是/usr/local/etc/npmrc。

5. 内置配置文件。安装npm的目录下的npmrc文件。

6. 默认配置。 npm本身有默认配置参数，如果以上5条都没设置，则npm会使用默认配置参数。

针对npm配置的命令行操作

   npm config set <key> <value> [--global]
   npm config get <key>
   npm config delete <key>
   npm config list
   npm config edit
   npm get <key>
   npm set <key> <value> [--global]

在设置配置属性时属性值默认是被存储于用户配置文件中，如果加上--global，则被存储在全局配置文件中。

如果要查看npm的所有配置属性（包括默认配置），可以使用npm config ls -l。

如果要查看npm的各种配置的含义，可以使用npm help config。

为npm设置代理

$ npm config set proxy http://server:port
$ npm config set https-proxy http://server:port

如果代理需要认证的话可以这样来设置。

$ npm config set proxy http://username:password@server:port
$ npm config set https-proxy http://username:pawword@server:port

如果代理不支持https的话需要修改npm存放package的网站地址。

$ npm config set registry "http://registry.npmjs.org/"

四：vue-cli的安装

什么是 vue-cli 呢？ 
vue-cli 是 vue 出来的一个脚手架，可以进行 组件式地开发。
但是要运用 vue-cli , 必须要有 node.js 和 webpack 的基础，否则里面很多命令既运行不了，也无法理解。

ue-cli 截止目前是出到3了。 接下来的教程都是以3为基础做的。

安装命令：

npm install -g @vue/cli@3.0.1

注意，这个版本号一定要跟，如果不跟，那么就是安装vue-cli 的最新版本。 目前 （2018-08-19） 其最新版本是 3.0.1。 但是如果过几个月，你才看到这个教程的话，说不定 vue-cli 的版本就是 4.0了。 而不同版本的做法区别很多，本教程是基于 3.0.1 做的，所以安装的时候一定要加上 3.0.1 ，否则错版本的教程就没有意义了。

安装成功之后，可以通过如下命令查看版本 

vue --version

五：webpack的安装

安装的时候，不要使用 npm， 否则在 windows 上会失败。 请使用 cnpm
cnpm 是一个国内的镜像，不了解的同学，请跳转到 cnpm 教程。
接下来安装 webpack，使用全局安装方式：

cnpm install -g webpack@1.13.2

如图所示安装结束后，运行 

webpack

会看到很多的命令参数，其中，最开始的地方会看到版本 ： webpack 1.13.2