使用vue-cli支架工具构建vue-webpack项目

最近更新了网络包配置详细信息，并且可以移动vue-cli网络包详细信息

对于Vue.js，如果你想快速启动，只需要在你的html中引入一个脚本标签，并添加CDN的地址。然而，这并不是vue的完整实际应用。在实际应用中，我们需要一系列的工具，包括模块化、翻译、预处理、热加载、静态检测和自动测试。对于一个需要长期维护的大型项目来说，这些工具是必须的，但是试图配置和初始化这些工具是非常痛苦的。这就是为什么我们发布了vue提供的脚手架工具，这是一个简单的构建工具，可以帮助您通过几个默认步骤快速构建Vue.js项目。

1.安装节点环境

您可以使用自己的终端cmd命令行工具；建议在windows下安装git bash，可以使用linux命令；

第一步是检测是否安装节点；没有安装节点的同学，请在官网下载安装https://nodejs.org/en/download/

安装成功后，在命令行上检查节点版本，如果有任何指示，说明安装成功。

2.安装vue脚手架工具

安装节点时，会自动安装npm；

您可以先检查npm版本；

使用npm安装vue-cli:

npm安装vue-cli -g3。准备工作已经完成，下面使用vue-cli直接初始化webpack项目。

项目名称

中间会输入项目名称、项目描述、作者等信息；

一路进入

您可以看到我们刚刚创建的webpack项目已经构建完成：

4.检查目录结构

安装依赖关系

$ npm install中国的某些软件包不能由npm安装，可以由cnpm安装

$ cnpm安装5。开始地方发展

本地节点服务器正在运行，端口是配置文件中的端口

6.配置路由

创建新的页面组件并将路线指向。vue文件

至此，使用vue-cli创建的vue项目基本可以开发了。恭喜你！

7.打包并上线

$ npm运行构建

查看构建完成以证明包是成功的；

观察目录结构，我们发现有一个额外的dist文件夹，这是webpack打包后的文件。我们将与后台讨论更改后的文件，并以什么形式放入服务器，它将成功上线。

啦啦啦~至此，我们的vue项目已经初步启动，后续会详细讲解webpack配置、本地mock数据开发等文章，欢迎大家批评指正！也希望大家多多支持我们。