【笔记】Vue3学习笔记

前言

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目。（维基百科）

原生HTML使用Vue3

引入依赖

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.min.js"></script>

挂载根组件

• 在创建Vue的App对象时，可以指定根组件，根组件只会有一个

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

<script>
  const root = {
    ...
  };
  const app = Vue.createApp(root);
  app.mount("#app");
</script>

VueCli环境使用Vue3

下载依赖

npm install -g @vue/cli

初始化项目

vue create <project_name>

Vue配置

Webpack配置

vue.config.js

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        "@": require("path").resolve(__dirname, "src")
      }
    }
  }
});

挂载根组件

手动创建根组件

public/index.html

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

src/main.js

import { createApp } from "vue/dist/vue.esm-bundler.js"

const root = {
  ...
};
const app = createApp(root);
app.mount("#app");

通过Vue文件作为根组件

public/index.html

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

src/App.vue

<template></template>

<script>
  export default {
    ...
  }
</script>

src/main.js

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App);
app.mount("#app");

Vite环境使用Vue3

初始化项目

npm init vue@latest

cd <project_name>
npm install

挂载根组件

通过Vue文件作为根组件

public/index.html

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

src/App.vue

<template></template>

<script>
  export default {
    ...
  }
</script>

src/main.js

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App);
app.mount("#app");

完成