VUE3开发教程-安装VUE

188-4701-1990

首页 ⊙ 新闻资讯 ⊙ 技术文章 ⊙ vue3开发教程1-安装vue

当前位置：

vue3开发教程1-安装vue

来源: | 作者:数信云科技 | 发布时间: 2025-06-12 | 44 次浏览 | 分享到:

一、安装vue

方式1：命令行安装

npm create vue@latest 或 pnpm create vue@latest

方式2：CDN方式全局构建

1.引入js文件

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

2.编写示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局构建示例</title>
    <script src="vue.global.js"></script>
</head>
<div id="app">
    {{name}}
</div>

<body>
    <script>
        //声明vue对象
        Vue.createApp({
            setup() {
                return {
                    name: "HELLO VUE"
                }
            },
        }).mount("#app")
    </script>
</body>

</html>

1.mount 将vue挂载到 div->id=app的页面元素上

2.return 值即为返回值。

3.{{name}}为页面通过插值表达式取值。

改造-去掉Vue标识符

<script1> const { createApp } = Vue //声明vue对象 createApp({ setup() { return { name: "HELLO VUE" } }, }).mount("#app") </script1>

方式3：使用 ES 模块构建版本

import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 ES 模块构建版本</title>
</head>
<div id="app">
    {{name}}
</div>

<body>
    <script type="module">
        import { createApp } from './vue.esm-browser.js'
        //声明vue对象
        createApp({
            setup() {
                return {
                    name: "HELLO VUE"
                }
            },
        }).mount("#app")
    </script>
</body>

</html>