第1节:Vue3 安装部署 创建应用(实例)

Vue3 的详细安装及部署步骤如下:

  1. 首先,确保你的计算机上已经安装了 Node.js。如果没有,请访问 Node.js 官网 下载并安装。
  2. 打开命令行工具(如 Windows 上的 cmd 或 PowerShell,macOS 和 Linux 上的终端),运行以下命令来全局安装 Vue CLI:
 npm install -g @vue/cli
  1. 创建一个新的 Vue3 项目。在命令行中输入以下命令,将 my-vue3-app 替换为你的项目名称:
 vue create my-vue3-app

4.进入项目目录:

 cd my-vue3-app

5.选择 Vue3 预设:

select Vue version: [ 2 ] Choose from options: [ 2, 3 ] default is 2 (preview)

6.等待安装完成,然后启动开发服务器:

npm run serve

7.打开浏览器,访问 http://localhost:8080,你将看到 Vue3 应用的初始页面。

接下来,我将提供一个简单的 Vue3 源码示例,包括组件、模板和样式。

<template>
  <div class="app">
    <h1>{
  { message }}</h1>
    <button @click="changeMessage">点击更改消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎来到 Vue3!'
    };
  },
  methods: {
    changeMessage() {
      this.message = '你已成功更改消息!';
    }
  }
};
</script>

<style scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这个示例中,我们创建了一个简单的 Vue3 应用,包含一个标题和一个按钮。点击按钮后,标题会更新为 “你已成功更改消息!”。

订阅专栏,每日更新

相关推荐

  1. 1Vue3 安装部署 创建应用实例

    2023-12-05 15:58:02       32 阅读
  2. 2Vue3 模板语法

    2023-12-05 15:58:02       33 阅读
  3. 6Vue3 调用函数

    2023-12-05 15:58:02       45 阅读
  4. 10:Vue3 论点

    2023-12-05 15:58:02       38 阅读
  5. 11: Vue3 动态参数

    2023-12-05 15:58:02       40 阅读
  6. 9:Vue3 指令

    2023-12-05 15:58:02       35 阅读
  7. 28: Vue3 条件渲染

    2023-12-05 15:58:02       44 阅读
  8. 30: Vue3 监听事件

    2023-12-05 15:58:02       56 阅读
  9. 41: Vue3 watch函数

    2023-12-05 15:58:02       42 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-05 15:58:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-05 15:58:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-05 15:58:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-05 15:58:02       20 阅读

热门阅读

  1. tomcat 弱口令war远程部署

    2023-12-05 15:58:02       43 阅读
  2. Android 打包配置与输出教程

    2023-12-05 15:58:02       34 阅读
  3. 安陆FPGA调试中遇到的问题总结

    2023-12-05 15:58:02       50 阅读
  4. AWS中使用ECS时ecsTaskExecutionRole缺失

    2023-12-05 15:58:02       40 阅读
  5. 2-- 简要介绍 Kubernetes

    2023-12-05 15:58:02       35 阅读
  6. MiniDumpWriteDump函数生成dmp文件

    2023-12-05 15:58:02       44 阅读
  7. Xshell远程登录AWS EC2 Linux实例

    2023-12-05 15:58:02       48 阅读
  8. Github项目-CNNResnet9-残差神经网络水果多分类项目

    2023-12-05 15:58:02       39 阅读
  9. sklearn教程:titanic泰坦尼克号数据集

    2023-12-05 15:58:02       33 阅读
  10. 快速学习PyQt5的高级自定义控件

    2023-12-05 15:58:02       33 阅读