2022-03-22 【待办Todo】day01-项目初始化

一、全局安装 Vue CLI 脚手架

npm install -g @vue/cli

二、创建 Vue 2 项目

1. 终端输入如下命令

vue create todo

2. 选择预设

3. 手动配置

4. 余下配置

三、初始化项目文件

1. 进入到项目文件夹

2. 删除 components 文件夹

3. router/index.js

4. 删除 views 文件夹下所有 vue 文件

5. App.vue

四、安装 Vant UI 组件库 Vue 2 版本

1. Vant 2 官网

Vant 2

2. 通过 npm 安装 Vant 2

npm i vant@latest-v2 -S

3. 全局引入组件

main.js 代码如下

五、使用 Vant UI 布局静态页面

1. 在 views 文件夹下新建 Home.vue 文件

使用一个 div 标签包裹 html 代码

2. 在 Vant 官网开发文档中找到 Tabbar 标签栏

3. 复制 html 部分到 div 标签内

4. 在路由文件中绑定 vue 组件

router/index.js 代码如下

六、启动项目

1. 终端执行项目启动命令

npm run serve

2. 运行成功

3. 效果预览