vue-移动端开发笔记1---项目的创建初始化

---

前言

vue +vant开发移动端

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、项目初始化

1：使用 Vue CLI 创建项目

1：Run npm i -g @vue/cli to update!

2：启动项目

启动项目：

npm run derve

界面：

3：创建git仓库

去除所有对勾：

测试公钥能否使用：




自动：init的提交：

与远程仓库连接：

关联：

git add 文件
git commit -m "提交日志"
git push
......
# 如果修改了提交信息，则重新
git push -u 远程仓库 分支信息

# 创建本地仓库
git init

# 将文件添加到暂存区
git add 文件

# 提交历史记录
git commit "提交日志"

# 添加远端仓库地址
git remote add origin 你的远程仓库地址

# 推送提交
git push -u origin master

：

4:项目列表

.
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── api 存储 API 请求模块
│ ├── router Vue Router 路由模块
│ ├── store Vuex 容器模块
│ ├── styles 存储全局样式资源目录
│ ├── utils 存储工具模块
│ ├── views 存储视图组件
│ ├── App.vue 根组件
│ └── main.js 入口模块
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
└── package.json

vuex：共享状态的管理

5： vant 组件

下载安装
npm i vant – save
配置：全局引入
import Vue from ‘vue’
import Vant from ‘vant’
import ‘vant/lib/index.css’
Vue.use(Vant)

 van-button type="primary">主要按钮</van-button>
     <van-button type="info">信息按钮</van-button>
     <van-button type="default">默认按钮</van-button>
     <van-button type="danger">危险按钮</van-button>
     <van-button type="warning">警告按钮</van-button>

测试：有效果就测试成功。

二、REM适配

1.rem

1：amfe-flexible ：第三方包下载引入

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

2： 配置postcss-pxtorem 是一款 postcss 插件，用于将单位转化为
rem 运行依赖

3： lib-flexible 用于设置 rem 基准值 这里用阿里的 amifa-flexble

//自动设置rem 基准值  html 的字体大小
import 'amfe-flexible'

amfe-flexible :效果：

PostCSS 配置 下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改。

module.exports = { plugins: {
autoprefixer: {
browsers: [‘Android >= 4.0’, ‘iOS >= 8’],
},
‘postcss-pxtorem’: {
rootValue: 37.5,
propList: [’*’],
}, }, };
重启项目

行里样式不转换，宽度随着屏幕大小的不同而不同。

2.阿里图标：

<template>
  <div id="app">
    <div id="nav">
      <h1>fff </h1>
      <van-button type="default">默认按钮</van-button>
       <van-button plain hairline type="primary">细边框按钮</van-button>
       <van-button type="primary">主要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
      <van-button type="default">默认按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      111
    <i class="iconfont iconguanbi"></i>
    <i class="iconfont iconshouye"></i>
    <van-icon name="chat-o" dot />
    
    <van-button icon-prefix='iconfont' icon='iconwode' type="iconsousuo"></van-button>
    <van-button icon="plus" type="primary">按钮</van-button>
cc 
       <van-button icon-prefix="iconfont" icon="iconyuedu" type="primary"/>
       <van-button icon-prefix="iconfont"   icon="iconshouye" type="primary" />

        <van-button  type="primary"><i class="iconfont iconshouye"></i></van-button>
    </div>
    <router-view/>
  </div>
</template>

3.路由配置

路径	页面	备注
login	views/login/index.vue	登录组件
/	views/layout/index.vue	布局组件
– /	views/home/index.vue	首页（默认子路由）
– /qa	views/qa/index.vue	问答页面
- /video	views/video/index.vue	视频页面
-/my	views/my/index.vue	我的页面

在这里插入图片描述

<template>
    <div>
<router-view/>
  <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" to='/'>首页</van-tabbar-item>
  <van-tabbar-item icon="search" to='/fw'>服务</van-tabbar-item>
  <van-tabbar-item icon="friends-o" to='/fx'>发现</van-tabbar-item></van-tabbar-item>
  <van-tabbar-item icon="setting-o" to='/my'>我的</van-tabbar-item>
</van-tabbar>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                active:0,
            }
        }
        
    }
</script>

<style lang="less" scoped>

</style>

4.aixos封装模块请求

cnpm i axios --save
// 请求模块
import axios from ‘axios’;
const request= axios.create({
baseURL:‘http://ttapi.research.itcast.cn/’, //基础路径
})
//请求拦截器
//响应拦截器

---

总结

项目的创建初始化