手把手教你创建一个VUE项目简单教程-Vue.js-PHP中文网

手把手教你创建一个VUE项目简单教程

下次还敢

发布： 2024-07-05 20:48:47

原创

912人浏览过

创建一个 Vue.js 项目的步骤：安装先决条件： Node.js (v16.x+)、Vue CLI（全局安装）。创建项目：使用 vue create 命令，导航到目标目录。安装依赖： Vue CLI 自动安装依赖。运行项目：在项目目录中，使用 npm run serve 命令。

手把手教你创建一个VUE项目简单教程

手把手教你创建一个 Vue.js 项目

准备工作：

安装 Node.js (v16.x 或更高版本)
安装 Vue CLI (全局安装)

<code>npm install -g @vue/cli</code>

登录后复制

创建项目：

打开终端或命令提示符，导航到您希望创建项目的位置。
运行以下命令：

<code>vue create <项目名称></code>

登录后复制

安装依赖：

立即学习“前端免费学习笔记（深入）”；

豆包AI编程

豆包推出的AI编程助手

483

查看详情

Vue CLI 将创建项目并自动安装依赖项。

运行项目：

<code>npm run serve</code>

登录后复制

这将在 http://localhost:8080 处启动开发服务器。

项目结构：

src/main.js： 项目入口点，创建和挂载 Vue 实例。
src/App.vue： 根 Vue 组件，定义应用程序的布局和内容。
src/components： 包含可重用的 Vue 组件的目录。
public： 包含静态文件和 favicon 的目录。
node_modules： 由 NPM 安装的依赖项的目录。
package.json： 包含项目设置、依赖项和脚本的 JSON 文件。

代码示例：

src/main.js：

<code class="js">import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')</code>

登录后复制

src/App.vue：

<code class="html"><template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    sayHello() {
      this.message = 'Hello, I am Vue!'
    }
  }
}
</script></code>

登录后复制

注意：