「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。
使用 Vue CLI 创建完成项目之后，我们先切换到该项目目录下：
cd vuecli_demo
因为之前创建项目时脚手架已经帮我们安装完了所有依赖，所以我们不用再执行 npm install 命令安装依赖了，可以直接执行下面的命令运行项目：
npm run serve
执行
npm run serve时其实执行的是vue-cli-service serve命令（之后会帮我们开启一个本地服务）：
一般情况下，我们从
GitHub上下载下来项目后，会先进入到项目目录下，然后执行npm install命令安装项目所需的依赖，之后就是去看项目目录下的package.json文件中的scripts中有哪些脚本，通过执行里面的某个脚本命令，就可以将项目启动起来了。
成功运行后，效果如下：
然后我们就可以按住 Ctrl 键，点击 Local 后面的地址在浏览器中打开页面，查看项目运行起来后的效果了：
这就是脚手架默认给我们创建出来的项目的运行效果。那么这个项目中的代码是如何运行的呢？代码执行的过程是这样的：
-
首先执行入口文件
main.js中的代码：- 从
vue中拿到createApp函数； - 导入当前目录下的
App.vue（根）组件； - 调用
createApp()函数并将根组件App传入，之后将创建出来的app对象挂载到id为app的HTML元素上（该元素位于项目目录下的public目录下的index.html文件中）；
- 从
-
再来看
App.vue文件：可以看到，
App.vue文件中有我们熟悉的<template>元素，里面包含了两个子元素，一个是HTML的<img>元素，另一个是从components目录下导入的HelloWorld组件； -
打开
components目录下的HelloWorld.vue组件，你会发现里面有一大堆元素，而这些元素渲染出来的内容其实就是我们刚才在浏览器中看到的主要内容；
这里，我们还可以修改传入 HelloWorld 组件的内容，比如在原先传给 msg 属性的内容后面再加点内容：
保存后，代码会自动重新编译：
待编译完成后，再来看浏览器中的效果：
可以看到，修改的内容已经重新渲染到了页面上。
因此，我们会发现，使用 Vue CLI 脚手架搭建出来的项目，默认已经给我们搭建好了开发 Vue 项目的环境，所以以后我们只需要在 src 目录下编写 Vue 项目相关的代码就可以了。这就是脚手架的作用。
我们上面运行项目使用的 npm run serve 命令，那么如果我们开发完了项目，想要对项目进行打包该怎么做呢？这时，我们可以执行下面的命令：
npm run build
该命令对应的是
vue-cli-service build命令：
成功打包后的效果如下：
同时，项目目录下会生成一个 dist 目录（里面存放的就是打包后的所有文件，之前学过了 Webpack，现在再看到这些打包后的内容应该就比较清楚了）：
以上，就是关于使用 Vue CLI 脚手架创建的项目该如何运行以及打包的说明。
