vue-ele

vue create vue-ele
cube-ui quick-start
vue add cube-ui

? Use post-compile? Yes
? Import type Partly
? Custom theme? Yes
? Use rem layout? No
? Use vw layout? (y/N) No

stylus
cube-ui 會安裝 stylus stylus-loader Reset CSS mixins vue-ele\node_modules\cube-ui\src\common\mixins

debug

@import "~common/stylus/mixin" failed

vue.config.js

~ 代表當前目錄的根目錄 common等目錄起別名 alias

const webpack = require('webpack')
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  ...
  chainWebpack(config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('api', resolve('src/api'))

    config.plugin('context')
      .use(webpack.ContextReplacementPlugin,
        [/moment[/\\]locale$/, /zh-cn/])
  },
}

Error: Failed to load config "@vue/standard" to extend from.

api

vue.config.js

  chainWebpack(config) {
    config.resolve.alias
      ...
      .set('api', resolve('src/api'))

src\api\index.js
const getSeller = get('api/seller')

How to disable eslint on vue-cli 3?

vue.config.js

module.exports = {
    chainWebpack: config => {
        config.module.rules.delete('eslint');
    }
}

chrome / devTools / [Network] / XHR http://localhost:8080/api/seller/

vue.config.js

const appData = require('./data.json')
const seller = appData.seller
module.exports = {
  ...
  devServer: {
    before(app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      })
    }
  },

vue-ele\data.json

{
  "seller": {
    ...

production node express

prod.server.js
node ./prod.server.js
http://localhost:8900/api/seller

Docs

cube-ui create-api 模块

Reference

ustbhuangyi/vue-sell

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.

Deploy

$ yarn add gh-pages

Command Line Utility

package.json

"homepage": "https://jacobhsu.github.io/vue-ele/",
"scripts": {
  "deploy": "yarn build && gh-pages -d dist"
}

vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/vue-ele' : '/',
}

Reference

Vue.js 高仿饿了么外卖 App