安装 Vue3

  1. 下载并安装 node.js

    下载地址：https://nodejs.org/zh-cn

  2. 切换淘宝镜像站（国内的无法访问）

    打开终端，输入代码

    1
    npm config set registry http://registry.npmmirror.com

  3. 这里我们使用 Vite 来创建 Vue 项目

    使用 npm 安装 Vite

    1
    npm install vite -g create-vite

    Tips：-g 是全局安装

  4. 使用 Vite 创建 Vue 项目

    在需要创建项目的目录下打开终端

    1
    create-vite test1

    Tips：test1 是你的项目名称，可以替换成任意想要的，如 abcd

    此时弹出一个菜单，使用上下键移动光标，回车键选择 Vue

    1

    选择 JavaScript

    2

    再依次运行

    1
    2
    3
    cd test1 // 进入项目目录
    npm install // 安装依赖
    npm run dev // 启动项目

给 Vue3 安装组件

Vue3 有非常多的组件库，合理运用可以使编写项目的速度锦上添花

  1. 寻找组件库，这边演示使用的是 Vant 组件库

    组件库地址

  2. 安装组件库

    打开组件库文档地址，一般在介绍，或者快速上手部分有安装代码

    在 项目目录下 运行

    1
    npm i vant

    即可安装 Vant

  3. 配置组件库

    安装完成组件库需要注册才可以使用

    在 项目目录/src/main.js 中进行如下注册（组件库文档一般有写）

    为了方便注册，对 main.js 的代码进行修改

    1
    2
    3
    4
    5
    6
    7
    import { createApp } from "vue";
    import "./style.css";
    import App from "./App.vue";

    const app = createApp(App);

    app.mount("#app");

    全量注册如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import { createApp } from "vue";
    import "./style.css";
    import App from "./App.vue";

    // 导入 Vant
    import Vant from "vant";
    // 引入 Vant 样式
    import "vant/lib/index.css";

    const app = createApp(App);
    // 注册Vant
    app.use(Vant);

    app.mount("#app");

  4. 测试组件库

    导入完成后测试一下，在 HelloWorld.vue 的组件中使用 Vant 的按钮组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <script setup>
      import { ref } from "vue";

      defineProps({
        msg: String,
      });

      const count = ref(0);
    </script>

    <template>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="success">成功按钮</van-button>
      <van-button type="default">默认按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
      <van-button type="warning">警告按钮</van-button>

      <van-button plain type="primary">朴素按钮</van-button>
      <van-button plain type="success">朴素按钮</van-button>

      <div>
        <van-button loading type="primary" />
        <van-button loading type="primary" loading-type="spinner" />
        <van-button loading type="success" loading-text="加载中..." />
      </div>

      <h1>{{ msg }}</h1>

      <div class="card">
        <button type="button" @click="count++">count is {{ count }}</button>
        <p>
          Edit
          <code>components/HelloWorld.vue</code> to test HMR
        </p>
      </div>

      <p>
        Check out
        <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
          >create-vue</a
        >, the official Vue + Vite starter
      </p>
      <p>
        Learn more about IDE Support for Vue in the
        <a
          href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
          target="_blank"
          >Vue Docs Scaling up Guide</a
        >.
      </p>
      <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
    </template>

    <style scoped>
      .read-the-docs {
        color: #888;
      }
    </style>

    运行

    1
    npm run dev

    就可以预览效果了

    3