Web前端培训：如何构建一个Vue项目？

　　在Vue项目开发的时候，为了提高加载时间和性能，webpack打包工具会将项目中的文件转为浏览器可以读取的静态文件。下面我们来演示如何创建一个简单的Vue项目。

　　(1)在创建项目之前应先完成vue-cli脚手架工具的安装。脚手架工具可以直接生成一个项目的整体架构，帮助开发者搭建Vue.js的基础代码。执行命令如下：

npm install vue-cli@2.9.x -g

　　将vue-cli安装完成后，可以执行“vue-cli-V”命令，查看安装的版本号。

　　(2)打开C：\vue\chapter01目录，执行如下命令初始化vue项目：

vue init webpack myapp

　　在上述命令中，myapp表示项目名称，可以根据需要自定义名称。程序会自动在当前目录下创建myapp子目录作为项目目录。webpack表示项目的模板。

　　(3)在创建项目时，程序会询问项目的一些配置选项，直接按回车键使用默认值即可。关于vue-cli的使用具体会在之后的章节中详细讲解。

　　接下来分析myapp项目的目录结构，具体解释如下所示。

　　1.build：项目构建(webpack)相关代码。

　　2.config：配置文件目录

　　3.node_modules：依赖模块

　　4.src：源码目录

　　5.static：静态资源目录

　　6.test：初始测试目录

　　7.index.html：首页入口文件

　　8.package.json：项目配置文件

　　9.README.md：项目说明文档

　　(4)切换到项目目录，然后启动服务，具体命令如下：

cd myapp
npm run dev

　　执行上述命令后，如果启动成功，会看到如下提示信息：

Your application is running here: http://localhost:8080

　　上述信息表示当前应用已经启动，可以通过http://localhost:8080来访问。使用浏览器打开这个地址，运行结果如图1-15所示。

　　(5)使用VS Code编辑器打开“C：\chapter01\myapp“目录，就可以在该目录下进行项目的开发了。

　　图1-15 运行结果