安装vue教程

npm：是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题。好比经常使用的有：

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

 1、先从nodejs.org中下载nodejs

        1.https://nodejs.org/en/download/

2.（建议不要安装在系统盘）双击安装，一直next

3.查看目录

2、设置nodejs prefix（全局）和cache（缓存）路径

    1.在nodejs安装路径下，新建node_global和node_cache两个文件夹

    

2.设置缓存文件夹

    npm config set cache "G:\vueProject\nodejs\node_cache"

3.设置全局模块存放路径

    npm config set prefix "G:\vueProject\nodejs\node_global"

tip:设置成功后，以后用命令npm install XXX -g安装之后模块就在G:\vueProject\nodejs\node_global里

3、基于 Node.js 安装cnpm（淘宝镜像）

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

4、设置环境变量(important！)

说明：设置环境变量可使得住任意目录下均可以使用cnpm、vue等命令，而不须要输入全路径

1.鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

2.修改系统变量PATH

以下图所示（来自参考网站）：

3.新增系统变量NODE_PATH

以下图所示（来自参考网站）：

5、安装Vue

npm install vue -g

6、安装vue命令行工具，即vue-cli 脚手架

npm install vue-cli -g

7、新项目的建立

1.打开存放新建项目的文件夹

打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录

2.根据模版建立新项目

在当前目录下输入“vue init webpack-simple 项目名称（使用英文）”。

vue init webpack-simple vue01

初始化完成后的项目目录结构以下：

3.安装工程依赖模块

定位到vue01的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，并且根据package.json的配置下载该项目的modules

cd mytest
npm install

4.运行该项目，测试一下该项目是否可以正常工做，这种方式是用nodejs来启动。

npm run dev