时间戳

首页 > 技术文章 > 项目总结

项目总结

ginkgo-leaves 2019-04-22 18:19 原文

 

项目总结

app

技术栈

vue+vuex+vue-cli@3.0+stylus+axios+vant-ui

 

一些基本的配置

  • vue-cli3.0中简化了相应的配置文件，使得项目文件相对而言更加的清爽，配置也变得相对简单。在项目的目录文件下创建vue.config.js文件。常见配置如下：
  1. const path = require('path')
  3. module.exports = {
  4. // 基本路径
  5. publicPath: process.env.NODE_ENV === 'production'
  6. ? '/production-sub-path/'
  7. : '/',
  8. // 输出文件目录
  9. outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
  10. // eslint-loader 是否在保存的时候检查
  11. lintOnSave: true,
  12. /**
  13. 1. webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  14. **/
  15. chainWebpack: () => {
  16. },
  17. configureWebpack: config => {
  18. if (process.env.NODE_ENV === 'production') {
  19. // 为生产环境修改配置...
  20. } else {
  21. // 为开发环境修改配置...
  22. }
  23. config.resolve = { // 配置解析别名
  24. extensions: ['.js', '.vue'],
  25. alias: {
  26. '@': path.resolve(__dirname, './src'),
  27. 'public': path.resolve(__dirname, './public'),
  28. 'components': path.resolve(__dirname, './src/components'),
  29. 'common': path.resolve(__dirname, './src/common'),
  30. 'views': path.resolve(__dirname, './src/views'),
  31. 'store': path.resolve(__dirname, './src/store'),
  32. 'assets': path.resolve(__dirname, './src/assets'),
  33. 'api': path.resolve(__dirname, './src/api'),
  34. 'test': path.resolve(__dirname, './src/test')
  35. }
  36. }
  37. },
  38. // 生产环境是否生成 sourceMap 文件
  39. productionSourceMap: false,
  40. // css相关配置
  41. css: {
  42. // 是否使用css分离插件 ExtractTextPlugin
  43. extract: true,
  44. // 开启 CSS source maps?
  45. sourceMap: false,
  46. // css预设器配置项
  47. loaderOptions: {
  48. stylus: {
  49. // 全局导入stylus样式
  50. data: `@import "~@/common/stylus/index.styl";`
  51. }
  52. },
  53. // 启用 CSS modules for all css / pre-processor files.
  54. modules: true
  55. },
  56. // use thread-loader for babel & TS in production build
  57. // enabled by default if the machine has more than 1 cores
  58. parallel: require('os').cpus().length > 1,
  59. /**
  60. 2. PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  61. */
  62. pwa: {},
  63. // webpack-dev-server 相关配置
  64. devServer: {
  65. open: false, // 编译完成是否打开网页
  66. host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
  67. port: 8080, // 访问端口
  68. https: false, // 编译失败时刷新页面
  69. hot: true, // 开启热加载
  70. hotOnly: false,
  71. proxy: null, // 设置代理
  72. overlay: { // 全屏模式下是否显示脚本错误
  73. warnings: true,
  74. errors: true
  75. },
  76. before: app => {
  77. }
  78. },
  79. /**
  80. 3. 第三方插件配置
  81. */
  82. pluginOptions: {}
  83. }

上面一段配置只适用于自己。

  • css在手机端的样式 
    根据个人习惯设置项目目录：个人会在项目的src下设置一个common目录，然后把所有的css样式都放到里面。重置文件一般为reset.less，全局样式文件一般为base.less，字体及颜色目录文件一般为variable.less，在项目中要使用到的一些特殊样式为mixin.styl，字体图表样式为icon.less，出口问文件为index.styl。具体参考内容如下：

index.styl文件：

 
  1. @import "./base"
  2. @import "./reset"
  3. @import "./icon"
  4. @import "variable"

reset.styl：

 
  1. /*移动端css样式重置,如果要修改全局样式请在base.styl文件里面修改*/
  2. html {
  3. font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  4. -ms-text-size-adjust: 100%;
  5. -webkit-text-size-adjust: 100%
  6. }
  8. html, body {
  9. -webkit-user-select: none;
  10. user-select: none;
  11. }
  13. html, body, div, object, iframe, applet,
  14. object, h1, h2, h3, h4, h5, h6, p, blockquote,
  15. pre, address, dl, dt, dd, ol, ul, li, table,
  16. caption, tbody, tfoot, thead, tr, th, td,
  17. article, aside, canvas, details, embed, figure,
  18. figcaption, footer, header, menu, nav, output, ruby,
  19. section, summary, time, mark, audio, video, progress {
  20. margin: 0;
  21. padding: 0;
  22. border: 0;
  23. vertical-align: baseline
  24. }
  26. a {
  27. text-decoration: none;
  28. -webkit-touch-callout: none;
  29. background-color: transparent
  30. }
  32. li {
  33. list-style: none
  34. }
  36. article, aside, details, figcaption, figure,
  37. footer, header, main, menu, nav,
  38. section, summary {
  39. display: block
  40. }
  42. audio, canvas, progress, video {
  43. display: inline-block
  44. }
  46. audio:not([controls]) {
  47. display: none;
  48. height: 0
  49. }
  51. [hidden], template {
  52. display: none
  53. }
  55. a:active, a:hover {
  56. outline: 0
  57. }
  59. abbr[title] {
  60. border-bottom: 1px dotted
  61. }
  63. b, strong {
  64. font-weight: bold
  65. }
  67. dfn {
  68. font-style: italic
  69. }
  71. h1 {
  72. font-size: 8.533vw;
  73. margin: 2.859vw 0
  74. }
  76. small {
  77. font-size: 80%
  78. }
  80. sub, sup {
  81. font-size: 75%;
  82. line-height: 0;
  83. position: relative;
  84. vertical-align: baseline
  85. }
  87. sup {
  88. top: -2.13vw;
  89. bottom: -2.13vw
  90. }
  92. sub {
  93. }
  95. img {
  96. border: 0;
  97. -webkit-touch-callout: none;
  98. }
  100. svg:not(:root) {
  101. overflow: hidden
  102. }
  104. figure {
  105. margin: 4.2667vw 10.667vw
  106. }
  108. hr {
  109. -moz-box-sizing: content-box;
  110. box-sizing: content-box;
  111. height: 0
  112. }
  114. pre {
  115. overflow: auto
  116. }
  118. code, kbd, pre, samp {
  119. font-family: monospace, monospace;
  120. font-size: 4.267vw
  121. }
  123. a, button, input, optgroup, select, textarea {
  124. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  125. }
  127. button, input, optgroup, select, textarea {
  128. color: inherit;
  129. font: inherit;
  130. margin: 0;
  131. -webkit-appearance: none;
  132. outline: none;
  133. line-height: normal
  134. }
  136. button {
  137. overflow: visible
  138. }
  140. button, select {
  141. text-transform: none
  142. }
  144. button, html input[type="button"], input[type="reset"], input[type="submit"] {
  145. -webkit-appearance: button;
  146. cursor: pointer
  147. }
  149. button[disabled], html input[disabled] {
  150. cursor: default
  151. }
  153. button::-moz-focus-inner, input::-moz-focus-inner {
  154. border: 0;
  155. padding: 0
  156. }
  158. input {
  159. line-height: normal
  160. }
  162. input[type="checkbox"], input[type="radio"] {
  163. box-sizing: border-box;
  164. padding: 0
  165. }
  167. input[type="number"]::-webkit-inner-spin-button,
  168. input[type="number"]::-webkit-outer-spin-button {
  169. height: auto
  170. }
  172. input[type="search"] {
  173. -webkit-appearance: textfield;
  174. -moz-box-sizing: content-box;
  175. -webkit-box-sizing: content-box;
  176. box-sizing: content-box
  177. }
  179. input[type="search"]::-webkit-search-cancel-button,
  180. input[type="search"]::-webkit-search-decoration {
  181. -webkit-appearance: none
  182. }
  184. fieldset {
  185. border: 1px solid silver;
  186. margin: 0 2px;
  187. padding: 1.493vw 2.667vw 3.2vw
  188. }
  190. legend {
  191. border: 0;
  192. padding: 0
  193. }
  195. textarea {
  196. overflow: auto
  197. }
  199. optgroup {
  200. font-weight: bold
  201. }
  203. table {
  204. border-collapse: collapse;
  205. border-spacing: 0
  206. }
  208. td, th {
  209. padding: 0
  210. }

base.styl文件：

 
  1. // 整体样式
  2. body, html
  3. line-height: 1
  4. font-weight: 200
  5. font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif
  7. // 清除浮动
  8. .clearfix
  9. display: inline-block
  10. &:after
  11. display: block
  12. content: "."
  13. height: 0
  14. line-height: 0
  15. clear: both
  16. visibility: hidden
  18. // 图片处理1.5倍像素屏幕1px处理与2倍像素屏幕1px处理
  19. @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  20. .border-1px
  21. &::after
  22. -webkit-transform: scaleY(0.7)
  23. transform: scaleY(0.7)
  25. @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  26. .border-1px
  27. &::after
  28. -webkit-transform: scaleY(0.5)
  29. transform: scaleY(0.5)

variable.styl文件：

 
  1. // 颜色定义规范
  2. $color-background = #222
  3. $color-background-d = rgba(0, 0, 0, 0.3)
  4. $color-highlight-background = #333
  5. $color-dialog-background = #666
  6. $color-theme = #ffcd32
  7. $color-theme-d = rgba(255, 205, 49, 0.5)
  8. $color-sub-theme = #d93f30
  9. $color-text = #fff
  10. $color-text-d = rgba(255, 255, 255, 0.3)
  11. $color-text-l = rgba(255, 255, 255, 0.5)
  12. $color-text-ll = rgba(255, 255, 255, 0.8)
  14. //字体定义规范
  15. $font-size-10 = 2.667vw
  16. $font-size-12 = 3.2vw
  17. $font-size-14 = 3.733vw
  18. $font-size-16 = 4.267vw
  19. $font-size-18 = 4.8vw
  20. $font-size-20 = 5.33vw
  21. $font-size-22 = 5.867vw

mixin.styl文件：

 
  1. // 上边框1px
  2. border-1px($color)
  3. position: relative
  4. &:after
  5. display: block
  6. position: absolute
  7. left: 0
  8. bottom: 0
  9. width: 100%
  10. border-top: 1px solid $color
  11. content: ' '
  13. // 没有边框
  14. border-none()
  15. &:after
  16. display: none
  18. // 图片，3倍和2倍
  19. bg-image($url)
  20. background-image: url($url + "@2x.png")
  21. @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  22. background-image: url($url + "@3x.png")

值得说明的是字体图标，项目一般会使用iconfont字体图标

 

vuex的使用

  • 目录结构 
    由于很少使用到vuex模块，为了更加的熟悉vuex模块，在此记录：

    1. index.js 
      1. import Vue from 'vue'
      2. import Vuex from 'vuex'
      3. import * as actions from './actions'
      4. import * as getters from './getters'
      5. import mutations from './mutations'
      6. import states from './states'
      8. Vue.use(Vuex)
      10. export default new Vue.Store({
      11. actions,
      12. getters,
      13. state,
      14. mutations
      15. })

    2.state.js

    1. const state = {
    2. name:''
    3. }
    4. export default states

    3.mutation-types.js

    1. export const SET_NAME = set_name // 修改名字信息（请加上注释）

    4.mutations.js

    1. import * as type from './mutation-types'
    2. const mutations = {
    3. [type.SET_NAME](state,name){
    4. state.name = name
    5. }
    6. }
    7. export mutations

    5.getters.js

    1. export const name = state => state.name

    6.actions.js

    1. import * as type from './mutation-types'
    2. export const changeName = ({commit},{newName}){
    3. commit(types.SET_NAME, newName)
    4. }
 
 

axiox封装

 
axiox 的封装可以分为三步，个人喜欢在项目目录文件夹下建立一个api 文件来专门存放关于api 接口的一些东西

  • http.js 用来专门封装 axios 的接口设置,一般会和vue-axios使用

    http.js文件

 
  1. import axios from 'axios'
  2. import vueAxios from 'vue-axios'
  3. import Vue from 'vue'
  4. import QS from 'qs'
  6. Vue.use(vueAxios,axios)
  8. // axios 环境设置
  9. if(process.env.NODE_ENV === 'production'){
  10. axios.defaults.baseURL= 'http://prouction.com'
  11. }else if(process.env.NODE_ENV === 'development'){
  12. axios.defaults.baseURL = 'http://development.com'
  13. }else if(process.env.NODE_ENV === 'debug'){
  14. axios.defaults.baseURL = 'http://debug.com'
  15. }
  16. // axios请求超时
  17. axios.defaults.timeout = 10000
  18. // post请求头
  19. axios.defaults.headers = {
  20. 'X-Requested-With': 'XMLHttpRequest',
  21. 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  22. }
  23. // 请求拦截器
  24. axios.interceptors.request.use(
  25. config=>{
  26. // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
  27. // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
  28. // const token = store.state.user.token
  29. // token && (config.headers.Authorization = `Bearer ${token}`)
  30. config.data = QS.stringify(config.data)
  31. return config
  32. },
  33. error => {
  34. return Promise.error(error)
  35. })
  36. // 相应拦截器
  37. let errorHandle = (status, other) => {
  38. if (status) {
  39. switch (status) {
  40. /**
  41. * 401: 未登录
  42. * 未登录则跳转登录页面，并携带当前页面的路径
  43. *在登录成功后返回当前页面，这一步需要在登录页操作。
  44. */
  45. case 401:
  46. // tip('未登录，请先登录')
  47. break
  48. /**
  49. * 403 token过期,登录过期对用户进行提示,清除本地token和清空vuex中token对象,跳转登录页面
  50. */
  51. case 403:
  52. // tip('登录过期，请重新登录')
  53. // setTimeout(() => {
  54. // logout()
  55. // }, 1000)
  56. break
  57. // 404请求不存在
  58. case 404:
  59. // tip('请求的资源不存在')
  60. break
  61. // 其他错误，直接抛出错误提示
  62. default:
  63. // tip({
  64. // message: error.response.data.message,
  65. // duration: 1500, // 持续时间
  66. // forbidClick: true
  67. // })
  68. console.log(other)
  69. break
  70. }
  71. }
  72. }
  73. axios.interceptors.response.use(
  74. // 拿到数据200
  75. res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
  76. // 未拿到,非200
  77. error => {
  78. if (error.response === undefined) {
  79. console.log('response:' + error.message)
  80. return Promise.reject(error)
  81. // tip('后台错误,请求undfined')
  82. }
  83. errorHandle(error.response.status, error.response.data.message)
  84. return Promise.reject(error.response)
  85. }
  86. )
  88. /**
  89. * 封装接口调用方法
  90. * @param url:地址
  91. * @param data：传入参数
  92. * @param type：类型（仅限于get/post）
  93. * @returns {Promise<any>}
  94. * @constructor
  95. */
  96. export function Axios (url, data = {}, type = 'GET') {
  97. return new Promise((resolve, reject) => {
  98. // 执行异步请求
  99. let promise
  100. if (type === 'GET') {
  101. // 准备url的query参数数据
  102. let dataStr = '' // 数据拼接字符串
  103. Object.keys(data).forEach(key => {
  104. dataStr += key + '=' + data[key] + '&'
  105. })
  106. if (dataStr !== '') {
  107. dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
  108. url = url + '?' + dataStr
  109. }
  110. // get请求
  111. promise = axios.get(url)
  112. } else {
  113. // 发送post请求
  114. promise = axios.post(url, data)
  115. }
  116. promise.then(response => {
  117. // 成功拿到response的data
  118. resolve(response.data)
  119. }).catch(error => {
  120. reject(console.log(error))
  121. })
  122. })
  123. }
  • base.js 里面存放的是api接口模块，所有的接口都存放在里面：

base.js文件

 
  1. let baseURL = '10.10.21.86'
  2. export nameURL = baseURL + '/name'
  3. export let loginURL = baseURL + '/account/login'
  4. export let guestURL = baseURL + '/account/guest'
  5. export let regURL = baseURL + '/account/reg'
  6. export let accountURL = baseURL + '/home/account'
  7. export let kefuURL = baseURL + '/home/getkefu'

api.js 文件是获取数据的接口方法模块：

api.js文件

 
  1. import {Axios} from './http'
  2. import * as url from './base'
  4. esport const getName = ({data})=>Axios(url.nameURL,{data},'POST')

在 vuex 的 actions.js 文件里面可以直接调用方法从而异步获取数据的

 

推荐阅读