'登录功能基本完成'

.browserslistrc

@@ -1,3 +1,18 @@
+# 配置文档参考：https://github.com/browserslist/browserslist
+
+# 兼容到超过百分之1的用户使用的浏览器
+# > 1%
+
+# 兼容到最近的两个版本
+# last 2 versions
+
+# ['Android >= 4.0', 'iOS >= 8']
 > 1%
 last 2 versions
 not dead
+
+[Android]
+>=4.0
+
+[iOS]
+>= 8

.postcssrc.js

@@ -0,0 +1,44 @@
+/**
+ * PostCSS 配置文件
+ */
+
+module.exports = {
+  // 配置要使用的 PostCSS 插件
+  plugins: {
+    // 配置使用 autoprefixer 插件
+    // 作用：生成浏览器 CSS 样式规则前缀
+    // VueCLI 内部已经配置了 autoprefixer 插件
+    // 所以又配置了一次，所以产生冲突了
+    // 'autoprefixer': { // autoprefixer 插件的配置
+    //   // 配置要兼容到的环境信息
+    //   browsers: ['Android >= 4.0', 'iOS >= 8']
+    // },
+
+    // 配置使用 postcss-pxtorem 插件
+    // 作用：把 px 转为 rem
+    'postcss-pxtorem': {
+      // lib-flexible 的 REM 适配方案：把一行分为 10 份，每份就是十分之一
+      // 所以 rootValue 应该设置为你的设计稿宽度的十分之一
+      // 我们的设计稿是 750，所以应该设置为 750 / 10 = 75
+      // 但是 Vant 建议设置为 37.5，为什么？因为 Vant 是基于 375 写的
+      // 所以必须设置为 37.5，唯一的缺点就是使用我们设计稿的尺寸都必须 / 2
+      // 有没有更好的办法？
+      //   如果是 Vant 的样式，就按照 37.5 来转换
+      //   如果是 我们自己 的样式，就按照 75 来转换
+      // 通过查阅文档，我们发现 rootValue 支持两种类型：
+      //    数字：固定的数值
+      //    函数：可以动态处理返回
+      //          postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
+      //          它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
+      rootValue ({ file }) {
+        return file.indexOf('vant') !== -1 ? 37.5 : 75
+      },
+
+      // rootValue: 75,
+
+      // 配置要转换的 CSS 属性
+      // * 表示所有
+      propList: ['*']
+    }
+  }
+}

package.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "amfe-flexible": "^2.2.1",
+    "axios": "0.19.2",
     "core-js": "^3.8.3",
     "vant": "^2.12.50",
     "vue": "^2.6.14",
@@ -31,6 +33,7 @@
     "less": "^4.0.0",
     "less-loader": "^8.0.0",
     "lint-staged": "^11.1.2",
+    "postcss-pxtorem": "^6.0.0",
     "vue-template-compiler": "^2.6.14"
   },
   "gitHooks": {

src/App.vue

@@ -1,19 +1,14 @@
 <template>
   <div id="app">
-    <h2>黑马头条</h2>
-    <van-button type="primary">主要按钮</van-button>
-    <van-button type="info">信息按钮</van-button>
-    <van-button type="default">默认按钮</van-button>
-    <van-button type="warning">警告按钮</van-button>
-    <van-button type="danger">危险按钮</van-button>
-    <!-- <i class="toutiao toutiao-shanchu"></i> -->
-    <router-view></router-view>
+    <!-- 路由的出口 -->
+    <router-view />
   </div>
 </template>
 
 <script>
-export default {}
+export default {
+  name: 'App'
+}
 </script>
 
-<style>
-</style>
+<style lang="less"></style>

src/api/index.js

@@ -0,0 +1,11 @@
+
+/*
+    *用户登录api
+ */
+import { login, getSmsCode } from './user'
+export const loginAPI = login // 导出用户接口api
+
+/*
+    * 获取验证码
+ */
+export const getSmsCodeAPI = getSmsCode

src/api/user.js

@@ -0,0 +1,21 @@
+/*
+    *用户相关的请求模块
+ */
+import request from '@/utils/request'
+/*
+    *登录模块
+ */
+export const login = (data) => request({
+  url: '/app/v1_0/authorizations',
+  method: 'post',
+  data
+})
+
+/*
+    *获取验证码--一分钟只能发一次
+    !该接口不可用
+ */
+export const getSmsCode = mobile => request({
+  method: 'get',
+  url: `/app/v1_0/sms/codes/${mobile}`
+})

src/css/index.css

@@ -75,3 +75,12 @@
 .toutiao-fenxiang:before {
   content: "\e607";
 }
+body {
+  background-color: #f5f7f9;
+}
+body .page-nav-bar {
+  background-color: #3296fa;
+}
+body .page-nav-bar .van-nav-bar__title {
+  color: #fff;
+}

src/main.js

@@ -2,9 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+// 加载全局样式
 import '@/styles/index.less'
+// 加载vant 核心组件库
 import Vant from 'vant'
+// 加载vant 全局样式
 import 'vant/lib/index.css'
+
+// 加载动态设置rem基准值
+import 'amfe-flexible'
 Vue.use(Vant)
 Vue.config.productionTip = false
 

src/router/index.js

@@ -4,6 +4,11 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/login')
+  }
 
 ]
 

src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-
+import user from '@/store/modules/user'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
@@ -13,5 +13,6 @@ export default new Vuex.Store({
   actions: {
   },
   modules: {
+    user
   }
 })

src/store/modules/user.js

@@ -0,0 +1,21 @@
+import { getItem, setItem } from '@/utils/storage'
+export default {
+  namespaced: true,
+  state: {
+    // 获取本地token
+    userToken: getItem('user')
+  },
+  mutations: {
+    changeUserToken (state, userToken) {
+      state.userToken = userToken
+      // 将token存入本地
+      setItem('user', userToken)
+    }
+  },
+  actions: {
+
+  },
+  getters: {
+
+  }
+}

src/styles/index.less

@@ -1,2 +1,12 @@
 // 引入icon.less
-@import './icon.less';
+@import './icon.less';
+
+body {
+    background-color: #f5f7f9;
+    .page-nav-bar {
+        background-color: #3296fa;
+        .van-nav-bar__title {
+          color: #fff;
+        }
+    }
+}

src/utils/request.js

@@ -0,0 +1,11 @@
+/*
+   * 封装 axios 请求模块
+ */
+import axios from 'axios'
+axios.defaults.baseURL = 'http://api-toutiao-web.itheima.net'
+const request = axios
+
+// const request = axios.create({
+//   baseURL: "http://ttapi.research.itcast.cn"
+// })
+export default request

src/utils/storage.js

@@ -0,0 +1,26 @@
+/*
+    *本地存储方法封装
+*/
+
+// 获取本地存储数据
+export const getItem = (key) => {
+  const data = localStorage.getItem(key)
+  try {
+    return JSON.parse(data)
+  } catch (err) {
+    return data
+  }
+}
+
+// 向本地存储存入数据
+export const setItem = (key, value) => {
+  if (typeof value === 'object') {
+    value = JSON.stringify(value)
+  }
+  localStorage.setItem(key, value)
+}
+
+// 移除本地存储数据
+export const removeItem = (key) => {
+  localStorage.removeItem(key)
+}