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