目录
前言
随着框架的流行,越来越多的开发者喜欢用框架开发项目,以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请见下一章吧。
系列文章: