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

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

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

准备工作：

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

npm install -g @vue/cli

创建项目：

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

vue create 

安装依赖：

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

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

运行项目：

• 在项目目录中，运行以下命令：

npm run serve

• 这将在 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：

import { createApp } from 'vue' import App from './App.vue'  createApp(App).mount('#app')

• src/App.vue：

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

注意：

• Vue CLI 会根据您选择的预设和选项自动配置其他文件，例如 .env 和 vue.config.js。
• 可以通过运行 vue create --help 命令查看可用的预设和选项。