vue-cli3 脚手架搭建前端 vue 项目详细过程

使用vue-cli 搭建 vue 项目，完整过程~~~~~~~~~~~~~~~~

工具/原料

命令行工具：cmder（选择自己喜欢的）

一、搭建项目前的基础学习

1、① 命令在使用命令行工具之前，先学习如何使用，基本的命令代表什么-g 是 --global 的简写-v 是 --version 的简写-S 是 --save 的简写-D 是 --dev 的简写cd xxx 代表进入到本地（电脑）xxx 文件夹中

2、② 包管理器包管理器很多npmyarncnpmpnpm等等，选择安装这里我们使用的是 yarn

二、开始搭建项目

1、① 进入到自己想要放置项目的位置cd 进入到对应的文件夹

2、② vue create my-app开始初始化项目my-app 是项目名称开始初始化项目，这个过程需要做很多选择，就是选择安装自己需要的插件。

3、③ 检查是否初始化成功上面的初始化之后就是搭建好项目了，$ yarn serve # 开启服务，运行网页看到内容就是成功初始化好项目了，

4、④ 项目结构下图是 vue-cli3 搭建的项目的结构树的解析、

三、安装其他插件

1、上面的初始化项目中，vue-cl3 只会让我们选择安装 vue 系列的插件，其他类似 UI 组件的插件都需要我们额外的去安装的

2、① 安装 UI 框架UI 框架很多，选择自己适用的框架来使用$ yarn add element-ui # 下载饿了么 ui 框架，这个框架是 PC 端的$ yarn add iview # 下载 iview 这个 ui 框架，框架都是选择的，选择其一即可。

3、② 下载 http 请求插件http 请求插件也很多，axios，fetch等等，这里我们就使用比较普遍的 axios$ yarn add axios # 使用 yarn

4、③ 下载 less 或 scss如果不希望使用 css ，而是使用 less，scss 等 CSS Pre-processors，那么还可以安装这些