VUE学习（一）——使用npm安装项目

npm是node.js自带的功能

Node.js 安装配置

本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法。

本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例。

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。

你可以根据不同平台系统选择你需要的 Node.js 安装包。

Node.js 历史版本下载地址：https://nodejs.org/dist/

注意：Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ，不建议安装 Python 3.0 以上版本。

---

Windows 上安装 Node.js

你可以采用以下两种方式来安装。

1、Windows 安装包(.msi)

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

本文实例以 v0.10.26 版本为例，其他版本类似， 安装步骤：

步骤 1 : 双击下载后的安装包 v0.10.26，如下所示：

步骤 2 : 点击以上的Run(运行)，将出现如下界面：

步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 :

步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）：

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

安装过程：

点击 Finish（完成）按钮退出安装向导。

检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"，输出如下结果：

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检查Node.js版本

2、Windows 二进制文件 (.exe)安装

32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node.exe

64 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/x64/node.exe

安装步骤

步骤 1 : 双击下载的安装包 Node.exe ，将出现如下界面 :

点击 Run（运行）按钮将出现命令行窗口：

版本测试

进入 node.exe 所在的目录，如下所示：

如果你获得以上输出结果，说明你已经成功安装了Node.js。

 

NPM 使用介绍

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

$ npm -v
2.3.0

使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

 使用NPM 方法来安装VUE项目

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 NPM 安装：

# 最新稳定版
$ cnpm install vue

---

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

注意：Vue.js 不支持 IE8 及其以下 IE 版本。

以下转自https://www.cnblogs.com/happybread/p/8117442.html

简介：

Vue.js是前端一个比较火的MVVM框架， 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

安装方式：

第一种：使用npm，比较适合比较大型的应用，由于npm是国外的，使用起来比较慢；

第二种：使用淘宝的cnpm镜像来安装vue；

步骤：

首先我们需要下载npm,安装好了node.js，就安装了npm。然后，再利用npm安装淘宝镜像的cnpm。

1、打开cmd，输入命令  

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

     安装Vue需要npm的版本大于3，所以我们先升级一下npm，输入命令

     cnpm install cnpm -g

     安装vue，输入命令

     cnpm install vue

     安装vue-cli，输入命令

     cnpm install --global vue-cli

     

     这时，环境已经搭建好了。

2、指定存放项目的路径，运行命令

     vue init webpack "项目名称"

     进入项目所在的目录，运行命令

     cd "项目所在文件夹“

     然后依次执行下面的命令

     cnpm install

　

     cnpm run dev

    

   中间省略部分截图。。。。

    

    成功后我们进入浏览器，输入localhost:8080会展示下面的页面。

    

项目目录：

（1） build // 项目构建(webpack)相关代码 
　　build.js // 生产环境构建代码
　　check-versions.js // 检查node&npm等版本
　　dev-client.js // 热加载相关
　　dev-server.js // 构建本地服务器
　　utils.js // 构建配置公用工具
　　vue-loader.conf.js // vue加载器
　　webpack.base.conf.js // webpack基础环境配置
　　webpack.dev.conf.js // webpack开发环境配置
　　webpack.prod.conf.js // webpack生产环境配置
（2）config// 项目开发环境配置相关代码
　　dev.env.js // 开发环境变量
　　index.js //项目一些配置变量
　　prod.env.js // 生产环境变量
（3）node_modules// 项目依赖的模块
（4）src// 源码目录
　　assets// 资源目录  logo.png
　　components// vue公共组件   Hello.vue
　　router// 前端路由  index.js// 路由配置文件
　　App.vue// 页面入口文件（根组件）
　　main.js// 程序入口文件（入口js文件）
（5）static// 静态文件，比如一些图片，json数据等
　　.gitkeep
（6）剩余
　　.babelrc// ES6语法编译配置
　　.editorconfig// 定义代码格式
　　.gitignore// git上传需要忽略的文件格式
　　index.html// 入口页面
　　package.json// 项目基本信息
　　README.md// 项目说明