搭建项目解构层

1. vue create 项目名称 

整理目录

2. 工具层  utils 

封装本地存储 storage.js  

　　存值 取值 删值

封装请求实例 request.js

　　创建实例  - 配置基准地址 baseURL

　　请求拦截器 - 统一携带 token 

　　响应拦截器 - 处理 token 过期 未登录 异常错误

3. 状态层  store 

就是 vuex 状态管理工具 实现全局共享token 可以配合localStorage 实现全局 、持久性的token ；

4. 请求层  api 

按照模块封装请求方法 

5. 路由层 router 

配置路由、全局前置守卫 

beforeEach - 作用 ：进入某些特殊的页面要登录才行 ，比如进入 我的收藏页面，没有登录的情况下强制去登录页面 ；
ps：没有next 就不会跳转 ；

6. 页面层 src - views 

放置页面组件等组件的 

7. 样式层 src - style

放置样式 

8. 移动端适配 

把 px 单位换成 rem 的插件 

　　npm i postcss-pxtorem@6.0.0    

设置 rem 的基准值的插件

　　npm i amfe-flexible

根目录新建 postcss.config.js

module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
"postcss-pxtorem": {
// 使用van就写成下面
rootValue({ file }) {
return file.indexOf("vant") !== -1 ? 37.5 : 75;
},
// 如果不使用vant,
rootValue:75, // 好处设计图是多少px，你就写多少px即可
propList: ["*"],
exclude: "github-markdown", // 增加这一句！
},
},
};

1、分析需求，知道要做什么（根据设计稿、原型图）

2、分析接口，知道接口需要什么、提供了什么