在真实的项目开发中，尤其是在大型项目的开发中，我们需要借助于一些前端自动化工具帮助我们解决一些繁琐冗余的事情–开发完成后，对项目进行打包操作，帮助我们把代码打包成可以在网上运行的最终代码。脱离手动，让我们专注于逻辑代码的实现。
现在比较流行的前端自动化工具是webpack。如果让每个开发人员自己去配置webpack，是一个不小的挑战。所以vue官方提供了一款vue脚手架工具vue-cli，利用这个工具我们可以快速地构建一个标准的vue项目，同时这个工具自带了webpack的各种配置。学习门坎大大降低。下面就介绍一下如何用vue-cli搭建一个vue项目。其实只要记住几个步骤就可以，很简单。
第一步：安装node.
安装vue和vue-cli需要用到node有npm包（如果没有听说过，可能会很陌生，跟我一开始一样，很懵圈，这很正常，你大可先按照步骤进行，用着用着就明白了）。
1.到这个网址：去下载，根据你的机型来选择。下载下来，傻瓜式安装就OK。
2.看看是否安装上，苹果机在终端里，输入node -v. 回车，即可看到版本号，说明node已经安装成功。如果是window系统，则需要打开cmd，在里面输入。
3.看npm是否安装成功，同样道理，在终端输入npm -v 如果显示版本号，证明安装成功。
第二步：全局安装vue vue-cli
1.用以下命令:
npm install vue @vue-cli -g
如果是苹果机，则命令行为：
sudo npm install vue @vue-cli -g
2.查看vue是否安装成功的命令：
vue -V(注意，这块是大写的V)。
第三步：初始化一个vue项目
1.命令行：
vue create 项目名（你自己定义的，并且一定要记得安半的路径）。
2.之后会让你先择预设，基于我们是初学，我们暂选第一项：default选项。接下来就是安装过程。会把各种依赖，以及vue的框架结构都帮我们搭建好。安装好后，你会看到里面多了很文件以及文件夹。
第四步：查看vue项目是否搭建成功
1.进入我们的项目：
cd 项目名（初始化的时候定义的项目名称）
2.启动服务：
npm run serve
会开启一个localhost, 复制这个 localhost地址到浏览器vue步骤条vue步骤条，回车打开，会看到一个vue欢迎界面。如果能够正常打开，说明我们的搭建成功！
我们休息一下吧，明天继续加油噢：）
———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99
×