vue cli

// Vue CLI 示例代码

// 1. 创建一个 Vue 项目
// 打开终端并运行以下命令来创建一个新的 Vue 项目：
// vue create my-project

// 2. 在项目中使用 Vue 组件
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// 3. 运行开发服务器
// 在项目根目录下运行以下命令来启动开发服务器：
// npm run serve

// 4. 构建项目用于生产环境
// 在项目根目录下运行以下命令来构建项目：
// npm run build

解释说明：

1. 创建项目：通过 vue create 命令可以快速创建一个基于 Vue CLI 的新项目。
2. 组件化开发：在 App.vue 文件中，我们引入了 HelloWorld.vue 组件，并将其注册为局部组件。这样可以在模板中使用 <HelloWorld> 标签。
3. 样式和布局：<style> 标签中定义了全局样式，应用于整个应用的根元素 #app。
4. 开发和构建：使用 npm run serve 可以启动本地开发服务器，实时预览应用；使用 npm run build 可以将项目打包为生产环境可用的静态文件。

如果你需要更多关于 Vue CLI 的详细信息，可以参考官方文档。