从无到有构建vue实战项目（一）

一、vue的安装

1. 首先下载nodehttp://nodejs.cn/download/

   有两种安装方式 安装包 安装和 二进制文件 安装

   

   输入以下命令,出现版本提示表示安装成功:

   node -v
   
   10.15.3
   
   

2. 再下载npm

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

   $ npm -v
   
   6.4.1
   
   

   如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：

   $ sudo npm install npm -g
   
   /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
   
   npm@2.14.2 /usr/local/lib/node_modules/npm
   
   

   如果是 Window 系统使用以下命令即可：

   npm install npm -g
   
   

3. 如果npm下载包速度慢且时容易出错，可考虑下载cnpm（淘宝镜像）用来代替

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

4. 然后安装vue（可选）

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

   # 最新稳定版
   
   $ cnpm install vue
   
   

5. 安装vue-cli

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

   ＃全局安装vue-cli
   
   npm install -g @vue/cli
   
   # OR
   
   yarn global add @vue/cli
   
   

   你还可以用这个命令来检查其版本是否正确 (3.x)：

   vue --version
   
   or
   
   vue -V
   
   

6. 运行以下命令来创建一个新项目：

   vue create hello-world
   
   

7. 或者使用图形化界面来创建和管理项目

   vue ui
   
   

   

8. 关于旧版本

   Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过以下命令卸载它：

   npm uninstall -g vue-cli
   
   or
   
   yarn global remove vue-cli
   
   

   然后安装最新版本：

   npm install -g @vue/cli
   
   or
   
   yarn global add @vue/cli