vue入门：使用vue-cli新建vue项目

一、安装node环境

　　1、下载地址为：https://nodejs.org/en/

2、检查是否安装成功：输入 node -v 和 npm -v()

node安装后将会自动安装上npm，但不一定是最新的，可用命令 npm install -g npm，进行最新版本安装

3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

cnpm -v

二、搭建vue项目环境

　　1、全局安装vue-cli

npm install --global vue-cli

全局安装vue-cli

2、运行以下命令来创建一个新项目：

vue create hello-world

vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

选项：

  -p, --preset <presetName>      忽略提示符并使用已保存的或远程的预设选项

  -d, --default                  忽略提示符并使用默认预设选项

  -i, --inlinePreset <json>      忽略提示符并使用内联的 JSON 字符串预设选项

  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端

  -r, --registry <url>            在安装依赖时使用指定的 npm registry

  -g, --git [message]            强制 / 跳过 git 初始化，并可选的指定初始化提交信息

  -n, --no-git                    跳过 git 初始化

  -f, --force                    覆写目标目录可能存在的配置

  -c, --clone                    使用 git clone 获取远程预设选项

  -x, --proxy                    使用指定的代理创建项目

  -b, --bare                      创建项目时省略默认组件中的新手指导信息

  -h, --help                      输出使用帮助信息

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

3、cd 打开项目目录，运行npm run server命令启动项目

4、 新建vue项目（webpack）

在命令行中，进入指定路径，运行 vue init webpack 项目名称，例如： vue init webpack my-vue。

使用webpack创建vue项目

按照提示信息，进行创建项目，一般默认直接选择yes就

   等待创建完成，过程需要几分钟。

三、启动运行

1、进入项目根目录，运行命令npm run dev，如下：

将看到项目进行启动。启动成功后，将看到运行地址。

2、在浏览器中输入以上地址，将输出结果，如下图：

    注意：Vue.js 不支持 IE8 及其以下 IE 版本，最好使用Chrome。

如此简单，开启第一步！三个重要命令：

使用webpack

npm install --global vue-cli

vue init webpack 项目名称

npm run dev

使用vue-cli

npm install --global vue-cli

vue create 项目名称

cd 项目名称

npm run server