Vue 3 创建项目(图文讲解)
前言
大家好,我是小哈~
上小节 中,我们已经搭建好了 Vue 的开发环境。本文我将带着大家创建第一个 Vue 项目。
创建第一个 Vue 项目
在 D
盘下创建一个 vue-projects
文件夹,用于统一存放 Vue 项目,然后打开命令行,执行如下命令,进入到该文件夹中:
cd D:\vue-projects
然后,执行初始化 Vue 项目命令:
npm init vue@latest
TIP: 该命令会安装并执行
create-vue
, 它是 Vue 官方的项目脚手架工具。
创建第一个 Vue 项目
执行过程中,会提示你命名新项目,以及是否需要开启一些诸如 TypeScript 和测试支持之类的可选功能,这里如果不确定,统一敲击回车键选择 No
即可。当你看到命令行中提示 Done
, 表示你已经创建好了第一个 Vue 应用。
项目目录说明
创建好了第一个 Vue 应用后,进入该项目文件夹,看下目录结构:
Vue 3 应用目录结构
解释一下目录结构以及相关文件的作用:
node_modules
: 项目依赖包文件夹,比如通过npm install 包名
安装的包都会放在这个目录下;public
: 公共资源目录,用于存放公共资源,如favicon.ico
图标等;index.html
: 首页;package.json
: 项目描述以及依赖;package-lock.json
: 版本管理使用的文件;README.md
: 用于项目描述的 markdown 文档;src
: 核心文件目录,源码都放在这里面;
进入 src
文件夹,目录如下:
src 目录
assets
: 静态资源目录,用于存放样式、图片、字体等;components
: 组件文件夹,通用的组件存放目录;App.vue
: 主组件,也是页面的入口文件,所有页面都是在 App.vue 下进行路由切换的;main.js
: 入口 Javascript 文件;