項目總結

時間 2019-11-09

標籤項目總結简体版

原文原文鏈接

項目總結

`app`

技術棧

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

一些基本的配置

vue-cli3.0中簡化了相應的配置文件，使得項目文件相對而言更加的清爽，配置也變得相對簡單。在項目的目錄文件下建立vue.config.js文件。常見配置以下：

const path = require('path')
module.exports = {
// 基本路徑
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/',
// 輸出文件目錄
outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
/**
1. webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
**/
chainWebpack: () => {
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
} else {
// 爲開發環境修改配置...
}
config.resolve = { // 配置解析別名
extensions: ['.js', '.vue'],
alias: {
'@': path.resolve(__dirname, './src'),
'public': path.resolve(__dirname, './public'),
'components': path.resolve(__dirname, './src/components'),
'common': path.resolve(__dirname, './src/common'),
'views': path.resolve(__dirname, './src/views'),
'store': path.resolve(__dirname, './src/store'),
'assets': path.resolve(__dirname, './src/assets'),
'api': path.resolve(__dirname, './src/api'),
'test': path.resolve(__dirname, './src/test')
}
}
},
// 生產環境是否生成 sourceMap 文件
productionSourceMap: false,
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啓 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {
stylus: {
// 全局導入stylus樣式
data: `@import "~@/common/stylus/index.styl";`
}
},
// 啓用 CSS modules for all css / pre-processor files.
modules: true
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
/**
2. PWA 插件相關配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
*/
pwa: {},
// webpack-dev-server 相關配置
devServer: {
open: false, // 編譯完成是否打開網頁
host: '0.0.0.0', // 指定使用地址，默認localhost,0.0.0.0表明能夠被外界訪問
port: 8080, // 訪問端口
https: false, // 編譯失敗時刷新頁面
hot: true, // 開啓熱加載
hotOnly: false,
proxy: null, // 設置代理
overlay: { // 全屏模式下是否顯示腳本錯誤
warnings: true,
errors: true
},
before: app => {
}
},
/**
3. 第三方插件配置
*/
pluginOptions: {}
}

上面一段配置只適用於本身。css

css在手機端的樣式
根據我的習慣設置項目目錄：我的會在項目的src下設置一個common目錄，而後把全部的css樣式都放到裏面。重置文件通常爲reset.less，全局樣式文件通常爲base.less，字體及顏色目錄文件通常爲variable.less，在項目中要使用到的一些特殊樣式爲mixin.styl，字體圖表樣式爲icon.less，出口問文件爲index.styl。具體參考內容以下：

index.styl文件：html

@import "./base"
@import "./reset"
@import "./icon"
@import "variable"

reset.styl：vue

/*移動端css樣式重置,若是要修改全局樣式請在base.styl文件裏面修改*/
html {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
html, body {
-webkit-user-select: none;
user-select: none;
}
html, body, div, object, iframe, applet,
object, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, address, dl, dt, dd, ol, ul, li, table,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure,
figcaption, footer, header, menu, nav, output, ruby,
section, summary, time, mark, audio, video, progress {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline
}
a {
text-decoration: none;
-webkit-touch-callout: none;
background-color: transparent
}
li {
list-style: none
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav,
section, summary {
display: block
}
audio, canvas, progress, video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden], template {
display: none
}
a:active, a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b, strong {
font-weight: bold
}
dfn {
font-style: italic
}
h1 {
font-size: 8.533vw;
margin: 2.859vw 0
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -2.13vw;
bottom: -2.13vw
}
sub {
}
img {
border: 0;
-webkit-touch-callout: none;
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 4.2667vw 10.667vw
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 4.267vw
}
a, button, input, optgroup, select, textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
-webkit-appearance: none;
outline: none;
line-height: normal
}
button {
overflow: visible
}
button, select {
text-transform: none
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 1.493vw 2.667vw 3.2vw
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: bold
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0
}

base.styl文件：webpack

// 總體樣式
body, html
line-height: 1
font-weight: 200
font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif
// 清除浮動
.clearfix
display: inline-block
&:after
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden
// 圖片處理1.5倍像素屏幕1px處理與2倍像素屏幕1px處理
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)

variable.styl文件：ios

// 顏色定義規範
$color-background = #222
$color-background-d = rgba(0, 0, 0, 0.3)
$color-highlight-background = #333
$color-dialog-background = #666
$color-theme = #ffcd32
$color-theme-d = rgba(255, 205, 49, 0.5)
$color-sub-theme = #d93f30
$color-text = #fff
$color-text-d = rgba(255, 255, 255, 0.3)
$color-text-l = rgba(255, 255, 255, 0.5)
$color-text-ll = rgba(255, 255, 255, 0.8)
//字體定義規範
$font-size-10 = 2.667vw
$font-size-12 = 3.2vw
$font-size-14 = 3.733vw
$font-size-16 = 4.267vw
$font-size-18 = 4.8vw
$font-size-20 = 5.33vw
$font-size-22 = 5.867vw

mixin.styl文件：git

// 上邊框1px
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
// 沒有邊框
border-none()
&:after
display: none
// 圖片，3倍和2倍
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")

值得說明的是字體圖標，項目通常會使用iconfont字體圖標github

vuex的使用

目錄結構
因爲不多使用到vuex模塊，爲了更加的熟悉vuex模塊，在此記錄：web
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.jsvuex
1. const state = {
2. name:''
3. }
4. export default states
3.mutation-types.jsvue-cli
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. }