Skip to content

Commit b14d036

Browse files
committed
docs: add getting started
1 parent 7f65149 commit b14d036

File tree

2 files changed

+80
-0
lines changed

2 files changed

+80
-0
lines changed

.vitepress/config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Guides: DefaultTheme.NavItemWithLink[] = [
66

77
const vue3VantMobile: DefaultTheme.NavItemWithLink[] = [
88
{ text: '介绍', link: '/vue3-vant-mobile/' },
9+
{ text: '快速开始', link: '/vue3-vant-mobile/getting-started'},
910
{ text: '目录结构', link: '/vue3-vant-mobile/directory'},
1011
{ text: '图标', link: '/vue3-vant-mobile/icons' },
1112
]

vue3-vant-mobile/getting-started.md

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: 快速开始
3+
description: 如何开始创建第一个项目
4+
outline: deep
5+
---
6+
7+
# :rocket: 快速开始 {#getting-started}
8+
9+
## 开发环境 {#development}
10+
11+
`vue3-vant-mobile` 使用 [Vite](https://cn.vitejs.dev/) 作为前端构建工具,使用 [pnpm](https://pnpm.io/zh/) 作为包管理器,两者能够显著提升前端开发体验。
12+
在最新的 `Vite` 版本当中,要求 [Node.js](https://nodejs.org/en) 版本 `18+``20+`(推荐优先安装长期维护 `LTS` 版), `pnpm` 版本应不小于 `v9`
13+
14+
如果您还没有安装 `pnpm`,请执行下面的命令进行安装。
15+
16+
```bash
17+
npm install -g pnpm
18+
```
19+
20+
安装完成以后,我们建议您更换为国内的镜像源。
21+
22+
```bash
23+
npm config set registry https://registry.npmmirror.com
24+
```
25+
26+
## 拉取代码 {#pull-code}
27+
28+
我们提供了以下几种方式拉取代码。
29+
30+
### Github 模板 {#use-template}
31+
32+
这种方式是你希望使用 [GitHub](https://github.com/) 作为代码仓库的时候使用。
33+
34+
[使用这个模板在 GitHub 上创建一个仓库](https://github.com/easy-temps/vue3-vant-mobile/generate)
35+
36+
### 本地克隆 {#local-clone}
37+
38+
如果您喜欢使用更干净的 `git` 历史记录,请执行下面的操作。
39+
40+
```bash
41+
npx tiged easy-temps/vue3-vant-mobile my-mobile-app
42+
cd my-mobile-app
43+
```
44+
45+
接下来,安装项目依赖。
46+
47+
```bash
48+
pnpm install
49+
```
50+
51+
## 本地开发 {#local-development}
52+
53+
### 项目启动 {#dev}
54+
55+
只需运行并访问 <http://localhost:3000>
56+
57+
```bash
58+
pnpm dev
59+
```
60+
61+
### 生产构建 {#build}
62+
63+
要构建打包,请运行
64+
65+
```bash
66+
pnpm build
67+
```
68+
69+
你将会在 `dist` 目录中看到生成的文件,它已经可以被使用了。
70+
71+
### 生产预览 {#preview}
72+
73+
想要预览打包后的文件,请运行
74+
75+
```bash
76+
pnpm preview
77+
```
78+
79+
访问 <http://localhost:4173/>

0 commit comments

Comments
 (0)