如何创建Vue项目和启动项目服务？

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

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

npm install vue-cli@2.9.x -g

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

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

vue init webpack myapp

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

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

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

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

cd myapp
npm run dev

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

Your application is running here:

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

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