怎么使用Vue脚手架搭建项目环境？

Vue 脚手架(vue-cli) 的环境搭建

关于Vue 脚手架(vue-cli)

vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面。

vue 脚手架用于自动生成 vue.js+webpack 的项目模板，分为 vue init webpack-simple 项目名 和 vue init webpack 项目名两种。其本质就是给出一套文件结构，包含基础的依赖库，用户只需要 npm install 就可以，不需要为编译或其他琐碎的事情而浪费时间

环境安装：

一、使用npm命令安装模块：

npm install < Module Name >

例如：我们使用 npm 命令安装常用的 Node.js web 框架模块 express：
npm install express
安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require(‘express’) 的方式就好，无需指定第三方包路径。

二、全局安装与本地安装

npm 的包安装分为本地安装（local）、全局安装（global）两种：
npm install express # 本地安装
npm install express -g # 全局安装

如果出现以下错误：
npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

解决办法为：
npm config set proxy null

1、本地安装

a. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
b. 可以通过 require() 来引入本地安装的包。

2、全局安装

a. 将安装包放在 /usr/local 下或者你 node 的安装目录。
b. 可以直接在命令行里使用。

(1)安装 vue：
A、npm install vue
B、由于国外访问速度较慢，建议将 npm 源设置为国内的镜像，可以大幅提升安装速度（例如设置淘宝镜像）：
npm install -g cnpm --registry=https://registry.npm.taobao.org
（设置淘宝镜像后，可以使用cnpm命令）

(2)安装 Webpack：
要使用 Webpack 前需要先安装 Node.js，webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。
cnpm install webpack -g

(3)安装 Vue 脚手架：
cnpm i -g @vue/cli-init

(4)在计算机创建一个工程目录，并进入该目录
cd 目录

(5)根据模版创建项目 vue init webpack 项目名
vue init webpack

(6)安装项目依赖：
首先使用cd命令进入项目：
A、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
cnpm install vue-router vue-resource --save
B、安装 elementui
npm install element-ui --save
C、安装 axios
cnpm install axios

(7)启动项目
cnpm run dev

(8)访问项目：在浏览器地址栏输入 localhost://8080，出现：

那么这个就算是成功了