1. 创建一个新的 Vue 项目（如果尚未创建）：
vue create my-project
这将创建一个新的 Vue 项目。在配置过程中，你可以选择默认配置或手动配置，确保选择包含 Babel、Router、Vuex、Linter/Formatter（ESLint + Standard）、和原型模式的 preset。
2. 进入项目目录：
cd my-project
3. 启动原型服务器：
使用以下命令启动 Vue CLI 的原型服务器：
npm run serve
或者使用 yarn：
yarn serve
这将启动一个本地开发服务器，并将你的 Vue 项目设置为原型模式。在原型模式下，你可以创建 .vue 单文件组件，并在浏览器中实时预览它们。
4. 在 src 目录中创建组件：
在 src 目录下创建 .vue 文件，例如 HelloWorld.vue：
<!-- HelloWorld.vue -->
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello, Prototype!'
};
}
};
</script>
<style scoped>
h1 {
color: green;
}
</style>
5. 在浏览器中预览：
打开浏览器，访问 [http://localhost:8080](http://localhost:8080)（或者根据命令行输出的地址）。你应该能够看到你创建的组件的实时预览。
在原型模式下，你可以快速迭代和测试你的组件，无需等待整个应用的构建。这是一个非常方便的功能，特别适用于组件开发和设计。当你准备将组件集成到实际项目中时，可以将它们移动到适当的目录，并在正常模式下进行开发。
请注意，原型模式不适用于所有项目，它更适用于快速的组件级别的原型开发。在正式项目中，确保使用正常的开发流程和构建命令。
转载请注明出处：http://www.zyzy.cn/article/detail/4823/Vue