美食地图项目（二）：前端准备工作
代码库创建
在 GitHub 上创建前端和后端两个空版本库。
- foodmaps-web
- foodmaps-server
1
2
// 前端
git@github.com:tongg112/foodmaps-web.git
1
2
// 后端
git@github.com:tongg112/foodmaps-server.git
nodejs开发环境安装
nodejs官网：https://nodejs.org/zh-cn/
安装完成后在命令行窗口输入以下命令查看版本
1
2
node -v
npm -v
vue安装
首先安装vue-cli工具。
vue-cli官网：https://cli.vuejs.org/zh/
在命令行窗口输入：
1
npm install -g @vue/cli
在代码目录创建vue项目:
1
2
3
4
5
6
# 创建项目foodmaps-web
vue create foodmaps-web
# 进入foodmaps-web目录
cd foodmaps-web
# 运行vue项目
npm run serve
根据命令行窗口中的地址访问vue项目默认页面。
也可以运行
vue ui命令，可以使用 vue 提供的图形化界面创建和管理项目。
git代码库推送
通过上面命令创建的vue项目，会自动生成.gitignore文件（不必手动创建了）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
直接根据github的提示推送新仓库
1
2
3
4
5
6
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:tongg112/foodmaps-web.git
git push -u origin main
这里的main分支就是原来的master分支，github把master改成了main，参考：https://github.com/github/renaming
