项目总结

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 文件里面可以直接调用方法从而异步获取数据的