vue的安装和使用

要使用vue首先得安装node.js和工具npm

1.安装node.js

在官网上去下载：https://nodejs.org/en/download/

安装完之后使用node -v 查看是否出现版本号有就是安装成功了

如果提示node不是内部命令那么就是需要配置环境变量

Windows环境下

1.设置环境变量：右键“我的电脑”-属性-高级系统设置-高级-环境变量，如下图：

然后再下面一栏系统变量下选择新建，然后新建一个NODE_PATH，并设置安装的地址，我安装的时候仅仅是把C盘改为了D盘，所以是D:\Program Files\nodejs     ，地址仅供参考，如果你安装在了别的位置的话，这里的地址就不一样。接着编辑Path，在变量值的尾部添加   ;%NODE_PATH%然后测试一下，输入node -v  ，查看node版本；或者输入 npm -v

 

如果是linux的环境下，我的是ubuntu系统

1. 输入命令：vim /etc/profile（如果没有安装vim，可根据提示安装，vim比vi好用多了），在末尾添加以下三行：

   export NODE_HOME=/opt/node

   export PATH=$PATH:$NODE_HOME/bin 

   export NODE_PATH=$NODE_HOME/lib/node_modules

   之后按Esc键，并输入“：wq!”命令保存配置并推出

2. 4

   在命令行输入：source /etc/profile，然后在命令行输入：node -v，返回版本信息v5.1.0，说明环境变量配置就生效了；但，你会发现进入root账户，改配置并没有生效

3. 5

   在命令行输入：vim /root/.bashrc,并在文件末尾加入一行source etc/profile命令，保存。这样就大功告成了。

 

2. 安装淘宝NPM镜像

由于在国内npm的安装速度太慢，因此可以使用淘宝镜像及其命令cnpm来安装各种包。

安装npm淘宝镜像：

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

安装完成后，后面就可以使用cnpm命令来安装npm包了。

cnpm install {package name}

 

3.安装vue-cli

vue-cli是一种全局脚手架用于帮助搭建所需的模板框架，同理在cmd中输入命令:npm install -g vue-cli。

在这一段代码中-g是为了全局使用的意思。与cnpm样，安装完成后会显示一长串的文件，输入 vue -v

可以查看vue版本。此时，环境已经基本搭建成功。

4.测试，创建第一个Vue.js项目

在命令行中输入：vue init webpack my-first-demo(项目文件夹名)。

再按照提示输入y或者n或者直接enter键

然后根据提示进入项目目录

输入 npm run dev 就能启动项目了