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

简介: 第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 应用,包含一个标题和一个按钮。点击按钮后,标题会更新为 “你已成功更改消息!”。

订阅专栏,每日更新

第2节:Vue3 模板语法

相关文章
|
8天前
|
JavaScript
Vue3中路由跳转的语法
Vue3中路由跳转的语法
111 58
|
1天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
|
6天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
22 9
|
8天前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
|
6天前
|
JavaScript 调度
Vue3 使用 Event Bus
Vue3 使用 Event Bus
11 1
|
6天前
|
JavaScript
Vue3 : ref 与 reactive
Vue3 : ref 与 reactive
9 1
vue3 reactive数据更新,视图不更新问题
vue3 reactive数据更新,视图不更新问题
|
7天前
|
JavaScript
|
7天前
vue3定义暴露一些常量
vue3定义暴露一些常量
|
6天前
Vue3 使用mapState
Vue3 使用mapState
10 0