Vue2_Vant2_项目_快速搭建

一：使用vite快速搭建项目环境

1、打开PowerShell对话框(在项目目录下，shift+右键快速调用PowerShell对话框)。

npm create @vitejs/app

2、起项目名称
3、选中安装模板（都是vue）
4、再cd到起的项目名下，在执行 npm install命令安装包

 npm install

5、执行 npm run dev命令，启动项目

 npm run dev

6、出现 http://localhost:3000/说明项目已经启动好了

二：vant安装与基本使用

ide上使用命令安装vant

vant-dms>npm i vant@next -S

导入所有组件（不推荐）
main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant';
import 'vant/lib/index.css';
import "amfe-flexible"//导入lib-flexible
createApp(App).use(Vant).mount('#app')

三、移动端使用 rem 单位进行适配

1、安装lib-flexible 插件用于设置 rem 基准值（根据不同屏幕动态改变基准值）

npm i -S amfe-flexible

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位

npm install postcss postcss-pxtorem --save-dev

四、封装请求

npm install axios

五、创建登录路由

npm install vue-rooter@4