使用 Vue CLI 创建项目 - daniel-qa/Vue GitHub Wiki

使用 Vue CLI 创建项目

如果你想使用 .vue 文件并享受其全部功能，建议使用 Vue CLI 创建项目。这样可以自动处理所有构建和配置：

npm install -g @vue/cli

vue create my-vue-app

cd my-vue-app

npm run serve

npm install -g @vue/cli 是全局安装 Vue CLI。这意味着 Vue CLI 将被安装到你的系统。

项目的 src/components 目录下创建 Index.vue 文件，内容如下：

<template>
  <div>
    <h1>Hello from Index Component</h1>
    <p>This is a single file component example.</p>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      // 这里可以定义数据
    };
  },
  methods: {
    // 这里可以定义方法
  },
  created() {
    // 这里可以添加组件创建时的逻辑
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

修改 App.vue

在 src/App.vue 中引入 Index.vue 组件并使用它：

import Index from './components/Index.vue';

<template>
  <div id="app">
    <Index />
  </div>
</template>

<script>
import Index from './components/Index.vue';

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

<style>
/* 全局样式 */
</style>

启动开发服务器 在项目目录中，使用以下命令启动开发服务器：

npm run serve

在 Vue 应用程序中，程序的载入流程通常可以分为以下几个关键步骤：

    1. 入口文件加载

main.js：这是 Vue 应用的入口文件。应用程序从这里开始执行。

Vue 实例创建：在这个文件中，通常会创建 Vue 实例，并将根组件挂载到 DOM。

    1. 组件解析

根组件：Vue 实例会加载根组件（通常是 App.vue）。

模板编译：根组件的模板会被编译为渲染函数。

    1. 路由设置（如果使用 Vue Router）

路由配置：如果项目中使用了 Vue Router，路由会在应用启动时进行初始化。

匹配路径：根据当前 URL，Vue Router 会匹配对应的组件。

    1. 状态管理（如果使用 Vuex）

Vuex 初始化：如果使用 Vuex，状态管理会在应用启动时进行设置。

获取状态：根组件及其子组件可以从 Vuex 中获取状态。

    1. 组件加载

子组件：根组件会加载其子组件，并根据需要递归加载嵌套组件。

懒加载（如果配置）：使用动态导入来懒加载某些组件，提高性能。

    1. 事件绑定

指令解析：在组件模板中，Vue 会解析指令（如 v-on 和 v-bind）。

事件监听：将事件处理函数绑定到相应的 DOM 元素。

    1. 数据绑定

响应式系统：Vue 的响应式系统会确保数据变化时，相关组件会自动更新。

渲染更新：当数据发生变化时，Vue 会重新渲染组件。

    1. 生命周期钩子

生命周期管理：在组件创建、更新和销毁的过程中，Vue 会调用相应的生命周期钩子（如 mounted、updated、beforeDestroy）。

⚠️ **GitHub.com Fallback** ⚠️