vue--使用vue-cli构建项目

webpack是现在较流行的前端自动化工具，该工具可以帮助开发者打包代码，以减少需要手动的工作，可以提高开发效率。

vue中提供了一个脚手架工具vue-cli，这个工具已经将webpack配置好了，使用这个工具可以快速地搭建一个标准项目。

一、安装node

1.在 https://nodejs.org/zh-cn/   去下载，根据你的机型来选择。

2.检查node是否安装成功

mac：在终端输入 node -v

windows：打开命令行工具，输入 node -v

出现版本号则安装成功

3.查看npm是否安装成功

mac：终端输入 npm -v

windows：打开命令行工具，输入npm -v

出现版本号则安装成功

windows系统下安装成功

二、全局安装vue vue-cli

1.使用命令安装

mac：

sudo npm install vue @vue-cli -g

windows：

npm install vue @vue-cli -g

安装时遇到问题可以参考：

https://blog.csdn.net/gebitan505/article/details/48177405

2.查看vue是否安装成功

vue -V

三、初始化一个vue项目

1.使用命令行

vue create 项目名（你自己定义的，并且一定要记得安装的路径）。

2.之后会让你先择预设，作为初学者我们暂选第一项：default选项。接下来就是安装过程。

会把各种依赖，以及vue的框架结构都帮我们搭建好。安装好后，你会看到里面多了很文件以及文件夹。

四、查看vue项目是否搭建成功

1.使用命令行进入之前创建的项目

cd 项目名（初始化的时候定义的项目名称）

2.启动服务

npm run serve

这个命令会开启一个localhost, 复制这个 localhost地址到浏览器，回车打开，会看到一个vue欢迎界面。

如果能够正常打开，说明搭建成功！

原文链接：https://mp.weixin.qq.com/s/n9T6M2Md0UirnQWcmP_8Zg