vue+elementUI后台系统（第一章：vue项目搭建）

目录

前言

一、检查项目开发环境

二、搭建项目

1.安装vue-cli

2.创建vue项目

总结

---

---

前言

随着框架的流行，越来越多的开发者喜欢用框架开发项目，以vue、react等居主流，国内比较常用的就是vue进行项目的搭建，本系列文章主要使用vue+webpack进行项目的搭建，其中使用了elementUI进行了扩展，增加到后台系统的布局和路由相关知识，有兴趣就往下看吧~

---

一、检查项目开发环境

搭建项目前，我们要检查自己的电脑是否具备搭建项目的条件。所以先打开cmd，输入以下命令：

1.检查是否安装node:node.js -v

2.检查是否安装npm:npm -v

3.检查是否安装vue:vue -v

如果执行这些命令后，都返回了版本号，那么恭喜您可以开始下一步了，否则请去安装以上依赖，再继续

二、搭建项目

1.安装vue-cli

由于项目基于vue开发，所以我们先安装号vue-cli

执行命令：npm install vue-cli –g

安装完成后，查看是否安装成功，执行命令：vue list ，如果输出了相关信息，那么恭喜你安装成功，请继续下一步

2.创建vue项目

创建项目，执行命令：vue init webpack 项目名称

这里我姑且命令为：vue init webpack fristone

注意：项目名称不能出现大写字母，不能使用驼峰命名法，否则会报以下错：

>> Sorry, name can no longer contain capital letters.

然后就会出现一系列需要确认的信息，你只需要按回车或者Y/N就可以了,以下是我的截图：

安装完后，系统会提示你，项目已建立成功，并提示你需要执行两步操作，截图如下：

 这时候，你只需要按照提示执行这两步：

• 执行cd firstone ,进入项目文件夹
• 可使用npm run dev运行项目

 执行这两步后，你会发现，出现了一个地址，如下图：

 复制该地址到浏览器中打开就能看到一下界面，表示项目搭建成功：

---

总结

以上就是今天要讲的内容，本文仅介绍了如何搭建项目，如何引入并使用elementUi请见下一章吧。

系列文章：

下一章：vue+elementUI后台系统（第二章：elementUI引入与使用）