Vue-cli4.x 入门：轻松创建你的第一个 Vue.js 项目

Vue-cli4.x 入门：轻松创建你的第一个项目

前言

对于任何想要涉足 Vue.js 世界的初学者来说，使用 Vue CLI（命令行界面）创建一个新项目都是至关重要的第一步。在本文中，我们将逐步指导你使用最新版的 Vue CLI 4.x 创建一个 Vue.js 项目，并深入了解项目结构和配置。

安装 Vue CLI

首先，你需要安装 Vue CLI：

npm install -g @vue/cli

安装完成后，你可以使用以下命令创建新项目：

vue create <project-name>

项目结构

Vue CLI 创建的项目遵循一个标准的目录结构：

• node_modules ：包含项目依赖项
• public ：包含静态资产（如 HTML、CSS、图像）
• src ：包含应用程序源代码
  • assets ：包含应用程序特定资产
  • components ：包含 Vue 组件
  • main.js ：应用程序入口点
  • App.vue ：应用程序根组件

项目配置

Vue CLI 提供了一个配置文件 vue.config.js，用于配置构建设置。常见配置包括：

• publicPath ：指定构建后的静态资产的公共路径
• outputDir ：指定构建后文件的输出目录
• devServer ：配置开发服务器

创建你的第一个应用程序

在 src/App.vue 中，添加以下代码：

<template>
  <div>
    <h1>你好，Vue.js！</h1>
    <p>这是我的第一个 Vue.js 应用程序。</p>
  </div>
</template>

在 src/main.js 中，添加以下代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

运行和构建

运行开发服务器：

npm run serve

构建生产版本：

npm run build

构建后的文件将位于 dist 目录中。

结论

通过使用 Vue CLI，你可以轻松快速地创建 Vue.js 项目。本指南提供了最新版 Vue CLI 的概述，以及项目结构和配置的简要介绍。现在，你已经掌握了基础知识，可以开始构建自己的 Vue.js 应用程序了。