# vue-template **Repository Path**: q-_-p/vue-template ## Basic Information - **Project Name**: vue-template - **Description**: vue移动端开发模版 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-14 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### 开发规范 一. 模块化思想 每个模块对应的内容大致分为：对应的视图文件，路由，组件，img图片文件，api接口等 例如 商城模块对应为 视图文件src/view/mall文件夹 路由src/route/mall文件夹，index.js导出路由，有最外层router引入...MallRoutes 组件src/components/mall文件夹 图片src/assets/images/mall文件夹 接口src/api/mall文件夹,此处导出接口，由api->index引入，index为统一的接口入口文件，在main.js中由$api接入api入口 二. 注意事项 1. 在写样式之前，字体大小(如.f24)，字体颜色(.red)，背景颜色(.bg-white)，按钮颜色都要优先使用在theme.less下定义过的,可以在出图之后，修改theme下的变量颜色，修改过后重启或强制刷新生效 2. 优先flex布局，优先使用theme下的提前定义好的样式，如水平垂直居中(.flex .flex-center) 3. 内容不确定的块级元素，不要把高度固定 4. icon图标优先使用vant自带的图标组件 5. 多行文本省略优先使用vant的style内置样式 6. 用户操作注意优化弹出等效果，使用transtition自定义或者vant动画 7. 用户填写的输入框，注意整数，小数，等规则限制，可以使用 vant-field输入框 8. 字体显示经常显示不全，是元素高度小于字体高度，给元素加上最小高度或者padding 9. 加载图片可以使用vant懒加载，此模板已在directives注入 10. 如果写了全局组件可以在下方vue配置文档写上组件的使用方法 11. 写页面可以分成多个组件来写，尽量根据需要数据不同来分割组件，每个组件尽量独立，传参和方法注意该组件数据是否需要公用给其他组件，如确实需要不同组件共用统一数据，可使用vuex共享数据 12. 底部导航栏的路由，添加到App下的mainPage下 13. 请求的loading动画可以到https://loading.io/网站自定义，下载css替换plugins插件下的loading动画效果 14. 更多。。。 三. 优化代码 1. 全局注册组件 src/global.js将components目录下的组件自动注册问全局组件 其中用到了lodash这个工具库，它封装了很多常用函数方法，可以看一下 2. 全局注册指令 src/directives为全局指令文件 3. [骨架屏插件](https://github.com/jiingwang/vue-skeleton-loading#readme ) 可使用骨架屏幕进行占位，数据加载完毕再显示 4. 打包时候去除console.log(),debugger看配置文档2 5. 你可以自己写需要的插件放在plugins插件里面 6. 推荐学习better-scroll用法，components有封装的最基本的Bscroll组件 7. 新增插件头像裁剪上传，@/plugin/vue-copper 8. 新增加载loading,@/plugins/vue-loading,使用this.$loading.open()开启，this.$loading.close()关闭 9. 更多 ### Vue配置文档 1.vue.config.js配置全局变量样式 ``` pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, './src/assets/css/theme.less')]//此路径下的文件问全局配置 } }, ``` src/assets/css/theme.less配置全局样式变量 例如： 定义 ``` @background:#041725; ``` 使用 ``` body{ background:@background; } ``` 使用时注意： 若修改theme.less变量需要重启npm run serve才能生效 2.vuecli3生产环境去除console.log() 在`/node_modules/@vue\cli-service/lib/config/terserOptions.js compress` 添加以下代码 ``` warnings: false, drop_console: true, drop_debugger: true, pure_funcs: ['console.log'] ``` 3.vue.config.js配置跨域代理接口 多个控制模块可以配置多个接口代理 ``` proxy: {      '/api': {               target: 'http://open.com/api', //代理路径              changeOrigin: true,                pathRewrite: {                     '^/api': ''              }        },  }, ``` 4.Vue.config.js配置rem布局定义rem转换大小 + main.js引入 ``` //rem布局 import 'amfe-flexible'; ``` + 配置vue.config.js ``` loaderOptions: { postcss: { plugins: [ autoprefixer({ overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'], grid:true }),//兼容版本 pxtorem({ rootValue: 75,//按照设计图750像素转换rem propList: ['*'], selectorBlackList: ["mint-"]//mint-ui样式不进行rem转换 }) ] } } ``` 5.头部组件的使用 @/components/HeadNav.vue | 属性 | 类型 | 默认值 | 说明 | | ---------: | :-----: | :-----: | :--------------------------:| | background | String | #121D2F | 背景颜色 | | arrow | Boolean | true | 是否显示返回键头 | | path | String | -1 | 配置返回路径，默认返回上一页 | | fixed | Boolean | true | 是否固定在头部 | | title | String | '' | 头部标题 | | `` | String | | 右边是一个插槽 | | color | String | #fff | 标题颜色和返回箭头颜色 | | border | Boolean | true | 是否显示下边框阴影 | 6.命名用驼峰,vue文件命名第一个字母大写（英文） 7.路由,接口文件写注释, 8.不需要验证登陆的路由写在router/index的NO_NEED_LOGIN数组变量中 ``` // 这里填写的路由不需要验证登录 const NO_NEED_LOGIN =[ "/login", "/regist", "/forget", ] ``` 9.axios二次封装@/http/requrest.js 新增响应状态 ``` // 401状态为未登陆 跳转登陆 if(error.response.status == 401){ vue.$router.push("/login") } // 跳转404页面 else{ vue.$router.push("/notfound") } ```