Vue 笔记

1. Vue 简介

Vue.js 是一个用于构建用户界面的渐进式框架。它允许开发者通过组件化的方式来构建复杂的前端应用。

2. 安装 Vue

2.1. 使用 Vue CLI 安装

Vue CLI 是一个官方的命令行工具，用于快速生成 Vue 项目。

全局安装 Vue CLI: bash npm install -g @vue/cli
创建新的 Vue 项目: bash vue create my-project

在创建过程中，选择需要的配置（例如 Babel、Router、Vuex 等）。

进入项目目录: bash cd my-project
启动开发服务器:

bash npm run serve

访问 http://localhost:8080 查看应用。

5.Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

2.2. 使用 CDN 安装

如果只是想快速试用 Vue，可以通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

3. Vue 项目结构

一个典型的 Vue 项目结构如下：

my-project/
├── node_modules/
├── public/
│   └── index.html        # 应用入口 HTML
└── src/
    ├── assets/           # 资源文件（图片、样式等）
    ├── components/       # 组件
    ├── App.vue           # 根组件
    ├── main.js           # 应用入口 JS
    └── ...

4. Vue 整体流程

4.1. 加载过程

index.html:
这是应用的入口文件，包含 <div id="app"></div> 作为 Vue 应用的挂载点。

      <!DOCTYPE html>
      <html lang="">
      <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>Your Vue App</title>
      </head>
      <body>
         <noscript>
            <strong>Please enable JavaScript to run this app.</strong>
         </noscript>
         <div id="app"></div>
         <!-- built files will be auto injected -->
      </body>
      </html>

main.js:
在此文件中，导入 Vue 和根组件 App.vue，并将其挂载到 #app 元素。

   import { createApp } from 'vue';
   import App from './App.vue';

   createApp(App).mount('#app');

App.vue:
根组件，定义了应用的主要结构，通常会包含其他子组件。

   <template>
       <div>
           <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>
   /* 样式 */
   </style>

HelloWorld.vue:
这是一个示例子组件，可以在 App.vue 中使用。

   <template>
       <div>{{ msg }}</div>
   </template>

   <script>
   export default {
       props: ['msg']
   }
   </script>

   <style>
   /* 子组件样式 */
   </style>

4.2. 渲染过程

index.html:
这是整个应用的入口文件。浏览器加载这个 HTML 文件，并找到 <div id="app"></div> 作为 Vue 应用的挂载点。
main.js:
这是应用的入口 JavaScript 文件。在这里，通常会导入 createApp 函数和根组件 App.vue，然后使用 createApp(App).mount('#app') 将根组件挂载到 #app 元素中。这个过程启动了 Vue 应用。
App.vue:
这是根组件，定义了应用的主要结构。在其模板部分，可以渲染其他子组件，如 HelloWorld.vue。在 <script> 部分，App.vue 会导入并注册这些子组件。
HelloWorld.vue (或其他子组件):
这是一个具体的子组件，可以在 App.vue 中使用。它可以接收来自父组件（App.vue）的 props，并在自己的模板中展示内容。

这个结构展示了 Vue 的组件化思想和单页面应用的工作流程，确保了代码的模块化和重用性。