使用Vue-Cli搭建Vue项目

1.什么是vue-cli

cli:
Command Line命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。

2.node.js的介绍及安装

node.js的介绍：

node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。

node.js的安装：
从官网下载安装即可：http://nodejs.cn/download/
安装的话基本就是傻瓜式安装，点下一步就完事了。
测试node.js是否安装成功：在DOS窗口中输入“node -v”查看版本，如果看到版本，就表示安装成功。

3.使用node.js安装vue-cli

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

• npm：使用node.js的命令
• install：安装
• vue-cli：要安装的vue-cli
• -g：全局安装

正在安装：

之后使用npm命令时就可以替换成cnpm

cnpm install vue-cli -g
cnpm install
cnpm run dev

4.使用vue-cli下载项目骨架搭建我们的项目

就像maven一样，vue为我们提供一些官方项目骨架。使用vue list命令可以列出当前官方提供的骨架，可以使用这些骨架来快速搭建出项目。
vue list

5.创建项目目录并打开

mkdir e:/my-vue-project
cd e:/my-vue-project

6.使用Webpack骨架快速创建项目

在my-vue-project目录中使用以下命令下载项目骨架

vue init webpack my-project1

• webpack：骨架名称
• my-project1：项目名称

过程中会出现如下界面，需要手动操作。

安装完成后进入到my-project1文件夹内后，使用以下命令来运行项目。

npm run dev

访问http://localhost:8080，页面效果如下：