【笔记】Vue3学习笔记

发表于 更新于 分类于 阅读次数：

前言

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

HTML环境使用Vue3

引入依赖

1
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

挂载根组件

  • 在创建Vue的App对象时，可以指定根组件，根组件只会有一个
1
2
3
4
5
6
7
8
9
<div id="app"></div>

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

Nodejs环境使用Vue3（Webpack）

创建项目

1
2
npm install -g @vue/cli
vue create <project_name>

Vue配置

Webpack配置

vue.config.js
1
2
3
4
5
6
7
8
9
10
11
const { defineConfig } = require("@vue/cli-service");

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

挂载根组件

通过JS对象作为根组件

public/index.html
1
<div id="app"></div>
src/main.js
1
2
3
4
5
6
7
import { createApp } from "vue/dist/vue.esm-bundler.js"

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

通过Vue文件作为根组件

定义根组件
src/App.vue
1
2
3
4
5
6
7
<template></template>

<script>
  export default {
    ...
  };
</script>
挂载根组件
public/index.html
1
2
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
src/main.js
1
2
3
4
5
import { createApp } from "vue"
import App from "./App.vue"

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

Nodejs环境使用Vue3（Vite+JS）

创建项目

1
npm init vite@latest <project_name> -- --template vue

挂载根组件

通过Vue文件作为根组件

定义根组件
src/App.vue
1
2
3
4
5
6
7
<template></template>

<script>
  export default {
    ...
  };
</script>
挂载根组件
index.html
1
<div id="app"></div>
src/main.js
1
2
3
4
5
import { createApp } from "vue"
import App from "./App.vue"

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

Nodejs环境使用Vue3（Vite+TS）

创建项目

1
npm init vite@latest <project_name> -- --template vue-ts

挂载根组件

通过Vue文件作为根组件

定义根组件
src/App.vue
1
2
3
4
5
6
7
8
9
<template></template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    ...
  });
</script>
挂载根组件
index.html
1
2
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
src/main.ts
1
2
3
4
5
import { createApp } from "vue"
import App from "./App.vue"

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

完成