在前端开发领域,Vue.js 是一个备受喜爱的框架,而 Vue CLI 则是一个强大的工具,可以帮助开发者快速地创建和管理 Vue 项目。本文将详细介绍如何通过 Vue CLI 快速创建一个 Vue 3 的项目,并简要介绍项目的结构。
1. 安装 Vue CLI
首先,您需要确保您的系统上已经安装了 Node.js 和 npm。您可以通过以下命令检查:
node -v
npm -v
如果您还没有安装 Node.js,请前往 Node.js 官方网站下载并安装合适的版本。
接下来,可以通过 npm 全局安装 Vue CLI:
npm install -g @vue/cli
安装完成后,您可以通过以下命令验证 Vue CLI 是否成功安装:
vue --version
这时候,应该能看到 Vue CLI 的版本号,说明安装成功。
2. 创建 Vue 3 项目
有了 Vue CLI 之后,您可以使用 vue create
命令快速创建一个 Vue 项目。这里我们将创建一个名为 my-vue3-project
的 Vue 3 项目:
vue create my-vue3-project
在创建项目的过程中,Vue CLI 会给出一系列选项供您选择。为了创建一个 Vue 3 项目,请选择 Default Vue 3 preset
。
? Please pick a preset:
Default Vue 3 Preview ([Vue 3] babel, eslint)
选择之后,Vue CLI 会自动生成项目文件。这可能需要几分钟时间,具体取决于网络状况。
3. 启动项目
创建完成后,进入项目目录并启动开发服务器:
cd my-vue3-project
npm run serve
默认情况下,开发服务器会在 http://localhost:8080/
启动。打开浏览器访问这个地址,可以看到 Vue 应用的欢迎页面。
4. 项目结构介绍
创建好的 Vue 项目包含多个文件和目录,具体结构如下:
my-vue3-project
├── node_modules
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ │ └── HelloWorld.vue
│ ├── App.vue
│ ├── main.js
│ └── router
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js
接下来我们将详细介绍每个目录和文件的用途。
node_modules
这是一个由 npm 自动生成的目录,包含了项目的所有依赖包。安装新依赖包时,npm 会将它们保存到这个目录中。
public
这个目录包含了静态资源,最常见的是 index.html
文件。index.html
是项目的入口 HTML 文件,所有的 Vue 组件最终都会被注入到这里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>my-vue3-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-vue3-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src
src
是您编写应用代码的主要目录。它通常包含以下子目录和文件:
assets
:存放静态资源,如图片、字体等。components
:存放 Vue 组件的目录。默认包含一个示例组件HelloWorld.vue
。App.vue
:根组件,所有其他组件都会在这里渲染。main.js
:项目的入口 JavaScript 文件,它实例化了 Vue 应用并挂载到index.html
中的#app
元素。
main.js
文件示例:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
.gitignore
这个文件指定了 Git 在版本控制中忽略的文件和目录。例如,它通常会忽略 node_modules
目录和生成的构建文件。
babel.config.js
Babel 是一个 JavaScript 编译器,可以将 ES6+ 代码转换为兼容性更好的版本。这个文件包含了 Babel 的配置。
package.json
这个文件包含了项目的基本信息,如名称、版本和依赖包。所有的 npm 脚本也在这里定义。
{
"name": "my-vue3-project",
"version": "0.1.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2"
}
}
README.md
这个文件通常包括项目的简要介绍、如何安装和使用的指导。它是一个用 Markdown 语法编写的文本文件。
vue.config.js
这是一个可选的配置文件,您可以在这里自定义 Vue CLI 的配置。例如,修改开发服务器的端口,设置代理等。默认情况下,这个文件可能不存在,您需要手动创建。
总结
通过 Vue CLI 创建 Vue 3 项目是一个非常快捷和高效的过程。它不仅生成了必要的文件和目录,还使您能够专注于编写代码而不是配置项目。
最后问候亲爱的朋友们,并邀请你们阅读我的全新著作