VueJS & PostCSS

[changtimwu]

official doc https://vue-loader.vuejs.org/en/features/postcss.html

Trace

How to use sugarss in VUE?

• sugarss

Documents of VUE loader mention postcss

A loader ex.( pug-loader, postcss-loader) only load standalone file of its own type. How does vue-loader conjunct them ?

• postcss-loader document says postcss to be accepted by vue

  // webpack.config.js
  module.exports = {
  // other options...
  module: {
  // module.rules is the same as module.loaders in 1.x
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      // vue-loader options goes here
      options: {
        // ...
        postcss: [require('postcss-cssnext')()]
      }
    }
  ]
  }
  }

  And actually our webpack config is like this

• in build/webpack.base.conf.js

  
  var vueLoaderConfig = require('./vue-loader.conf') 

module.exports = {
module: { rules: [ { test: /.vue$/,
loader: 'vue-loader', options: vueLoaderConfig
} ] }

* in `build/vue-loader.conf.js`
``` js
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap,
    extract: isProduction
  }),
  cssModules: {
    localIdentName: '[path][name]---[local]---[hash:base64:5]',
    camelCase: true
  }
}

• in build/utils.js

  return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
  }

[changtimwu]

https://www.npmjs.com/package/postcss-loader

list all factors

modules

necessary

• postcss-loader:
• postcss-load-config
• postcss-scss

  extra

• precss
• sugarss

config files

• .postcssrc.js

  module.exports = {
  parser: 'scss',
  "plugins": {
  // to edit target browsers: use "browserlist" field in package.json
  "autoprefixer": {}
  }
  }

• build/webpack.base.conf.js

  {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        {  loader: 'style-loader',},
        {  loader: 'css-loader',
          options: { importLoaders: 1}},
        { loader: 'postcss-loader'}
     ]
  }

[changtimwu]

disable opening a new browser tab every time rpm run dev

edit file config/index.js

module.exports = {
  build: {  
     ....
  },
  dev: {
    ....
    autoOpenBrowser: false
  }
}

[changtimwu]

store modules journey of an action using GetInfo action as an example.

• src/main.js

  if (store.getters.token) { // 判断是否有token
  if (to.path === '/login') {
    next({ path: '/' });
  } else {
  if (store.getters.roles.length === 0)
  store.dispatch('GetInfo').then(res => { // 拉取user_info
        const roles = res.data.role;
        store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
          router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
          next(Object.assign({}, to)); // hack方法 确保addRoutes已完成
        })

• src/store/modules/user.js

  // 获取用户信息
  GetInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const data = response.data;
        commit('SET_ROLES', data.role);
        commit('SET_NAME', data.name);
        commit('SET_AVATAR', data.avatar);
        commit('SET_UID', data.uid);
        commit('SET_INTRODUCTION', data.introduction);
        resolve(response);
      }).catch(error => {
        reject(error);
      });
    });
  },

[changtimwu]

please note that router is under store. router is used by the permission module in store. Actually the store depends quite a lot stuff. Not sure if this is a good practice. Doesn't this make store hard to standalone test?

main ---------------------> router
           +------------------> store

store ---------> router
           +-------> api/login
           +-------> cookie                      

This is really a mess. Cyclic access.

store -->  api/login ----> utils/fetch  --> store 

Well, that's explainable. It references the store in service's interceptors. In that way every request via fetch would automatically check token in header.

just use upper case for all mutations instead of constants that vuex proposes

 mutations: {
    SET_AUTH_TYPE: (state, type) => {
      state.auth_type = type;
    },
    SET_CODE: (state, code) => {
      state.code = code;
    },
    SET_TOKEN: (state, token) => {
      state.token = token;
    },
}

[changtimwu]

web framework https://github.com/get-ion/ion

using JWT in SPA. In a typical SPA application, we let user login with http form post, which is not json style API. And the server validates the user and returns a token. Then later API accesses must include this token.

JWT is actually an unified way make the login procedure not dependent on form post. It's a login in the form of web API. So your API server can be a pure API instead of required to bother the form post stuff.

[changtimwu]

try this on lambda some other day http://www.jianshu.com/p/08fab8d4ee35

https://htmlpreview.github.io/?https://raw.githubusercontent.com/Miserlou/Talks/master/serverless-sf/big.quickstart.html#91