vue-cli4搭建脚手架步骤终端命令和可视化UI两种方式

因为vue轻量级等各种优点，很多项目需要搭建vue脚手架，接下来我们就分享一下搭建脚手架的步骤

搭建脚手架需要了解前端的相关知识 html css js Node.js 环境(npm 包管理工具) webpack 自动构建工具

一、安装 node.js 进入官网 https://nodejs.org/zh-cn/

二、安装 cnpm

1、npm（node package manager）是nodejs 的包管理器，用于node 的插件管理(包括安装、卸载、管理依赖等)
2、使用npm 安装插件: 命令提示符 执行 npm install <name>
3、因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
 安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
 输入 cnpm -v  可以查看当前版本
 yarn  是个包管理器，是 facebook 发布的一款取代npm 的包管理器工具  

三、安装 vue-cli 脚手架

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。
检测是否安装脚手架 vue -V 回车看是否安装

1、安装脚手架   输入命令  cnpm  install -g  vue vue/cli@版本号   （-g是代表全局，如果只安装当前目录就不要用）
2、卸载脚手架  输入命名  npm uninstall  -g  vue-cli@版本号

如果是 3.0以下版本 是 npm install -g vue-cli@版本号
如果是 3.0以上下版本 是 npm install -g @vue/cli@版本号

安装完脚手架可以通过vue create 项目名称 或者vue ui 安装

四、创建项目

1、vue  create  项目名称      例如： vue create vue-app

2、选择自动配置或者手动配置 选择项目配置

3、空格选择相关配置

4、选择路由模式（history模式和 哈希模式 ）

项目里面有# 是哈希模式， history模式需要后端配置，一般情况选择 哈希模式

5、选择指定放着一个文件，还是放指定文件

6、是否保存当前配置

选y

7、开始安装搭建项目

8、启动项目 localhost:8080/

四、创建项目
安装完脚手架，可以通过 vue ui 直接按照
如果不通过终端命令可以通过vue可视化创建，更加简单

从第步骤直接到在 终端敲  vue ui 创建就会到可视化界面

选择而相关配置即刻！

作者：水晶草