1.eslint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
module.exports = {
  root: true,
  env: {
      node: true
  },
  'extends': [
      'plugin:vue/recommended',
      'eslint:recommended'
  ],
  rules: {
      // 关闭必须使用单引号
      'quotes': [0, 'single'],
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'prefer-promise-reject-errors': 0,
      'space-unary-ops': 0,
      'no-unused-expressions': 0,
      'no-useless-return': 0,
      'standard/no-callback-literal': 0,
      'import/first': 0,
      'import/export': 0,
      'no-mixed-operators': 0,
      'no-use-before-define': 0,

      // 不允许使用分号
      'semi': [2, 'never'],

      // 允许使用==
      'eqeqeq': 0,

      // 缩进使用不做限制
      'indent': 2,

      // 允许使用tab
      'no-tabs': 0,

      // 函数圆括号之前没有空格
      'space-before-function-paren': [2, 'never'],

      // 不要求块内空格填充格式
      'padded-blocks': 0,

      // 不限制变量一起声明
      'one-var': 0,

      // 条件语句中复制操作符需要用圆括号括起来
      'no-cond-assign': [2, 'except-parens'],

      // 允许使用条件表达式使用常量
      'no-constant-condition': 2,

      // 单行可忽略大括号，多行不可忽略
      'curly': [2, 'multi-line'],

      // 不允许使用var变量
      'no-var': 2,

      'no-unused-vars':0,

      // 不允许出现多个空格
      'no-multi-spaces': ['error', { ignoreEOLComments: true }],
      'camelcase': 0,

      // 对象字面量的键值空格风格
      'key-spacing': 2,

      // if语句包含一个return语句， else就多余
      'no-else-return': 2,

      // 建议将经常出现的数字提取为变量
      'no-magic-numbers': [0, { ignoreArrayIndexes: true }],

      // 不允许重复声明变量
      'no-redeclare': [2, { builtinGlobals: true }],

      // 立即执行函数风格
      'wrap-iife': [2, 'inside'],

      // 不允许圆括号中出现空格
      'space-in-parens': [2, 'never'],

      // 确保运算符周围有空格
      'space-infix-ops': 2,

      // 强制点号与属性同一行
      'dot-location': [2, 'property'],

      // 强制单行代码使用空格
      'block-spacing': [2, 'always'],

      // 约束for-in使用hasOwnProperty判断
      'guard-for-in': 0,

      // 采用one true brace style大括号风格
      'brace-style': [2, '1tbs', { 'allowSingleLine': true }],

      // 统一逗号周围空格风格
      'comma-spacing': [2, { 'before': false, 'after': true }],

      // 禁止出现多个空行
      'no-multiple-empty-lines': [2, { 'max': 1, 'maxEOF': 2 }],

      // 允许箭头函数不使用圆括号
      'arrow-parens': 0,

      // 规范generator函数的使用
      'generator-star-spacing': [2, { 'before': false, 'after': true }],

      // 要求在块级
      'lines-around-comment': [2, { 'beforeBlockComment': true, 'afterBlockComment': false, 'beforeLineComment': true, 'afterLineComment': false }]
  },
  parserOptions: {
      parser: 'babel-eslint'
  }
}

2.postcss.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  plugins: {
    //autoprefixer 自动补全css前缀的东西
    'autoprefixer': {
      //兼容的机型
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //换算基数，一般和html的font-size一致
      propList: ['*']  //哪些css属性需要换算
    }
  }
};

3.vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
const path = require('path'),

    //debug是判断当前是开发环境还是发布环境
    debug = process.env.NODE_ENV !== 'production'

module.exports = {

    //部署应用包时的基本URL，如果是生产环境，部署到 /cli-study/dist 路径；如果是开发环境，部署到根路径
    publicPath: process.env.NODE_ENV === 'production'
        ? './'
        : './',

    //输出文件路径
    outputDir: 'dist',

    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir: 'static',

    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
    filenameHashing: true,

    // 是否使用包含运行时编译器的Vue构建版本，设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
    runtimeCompiler: true,

    // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
    transpileDependencies: [],

    // 发布环境不需要sourceMap
    productionSourceMap: false,

    css: {

        // 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
        modules: false,

        // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
        extract: true,

        // 是否构建样式地图，false 将提高构建速度
        sourceMap: true,

        // css预设器配置项
        loaderOptions: {
            css: {

                //这里的选项会传递给 css-loader
            },
            postcss: {

                // 这里的选项会传递给 postcss-loader
            }
        },
    },

    //所有 webpack-dev-server 的选项都支持
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 3000,
        https: false,
        hotOnly: false,
        proxy: {
          //凡是请求以api开头的都会使用下面的代理服务器
          '/api/*': {
            target: 'http://localhost:8899/', // 目标服务器地址
            secure: false,                    // 目标服务器地址是否是安全协议
            changeOrigin: true,               // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!服务端和服务端的请求是没有跨域的
            //pathRewrite: {'^/api': '/a'}     // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
          }
        }
    },

    // 第三方插件配置
    pluginOptions: {},

    //调整webpack配置的最简单的方式
    configureWebpack: config => {
        if (!debug) {

            // 为生产环境修改配置...
            config.devtool = '#cheap-module-source-map'
        } else {

            // 为开发环境修改配置...
            config.devtool = '#cheap-module-eval-source-map'
        }

        Object.assign(config, { // 开发生产共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    'vue$': 'vue/dist/vue.js'
                }
            }
        })
    },

    //webpack的链式编程
    chainWebpack: () => {
        if (debug) {

            // 本地开发配置
        } else {

            // 生产开发配置
        }
    },

    /*  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      //chunk参考：https://segmentfault.com/q/1010000016925412/a-1020000016946034
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },*/

    lintOnSave: false,
}

4.代码关联

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.打开git brash，输入命令:ssh-keygen -t rsa -C "1078838865l@qq.com"
2.配置本地全局的账号和密码
  git config --global user.name "QiangGe-super"
  git config --global user.email "1078838865l@qq.com"
3.关联远程仓库
git remote add origin https://github.com/QiangGe-super/vue_shop.git
git push -u origin master


4.在main.js引入mui:
import 'mui/css/mui.css'
import 'mui/css/icons-extra.css'

5.在main.js中引入mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)