How to set a QList at the bottom of the menu, like the image below?
P
Latest posts made by philliperosario
-
To set a QList at the bottom of the menu
-
Get platform inside config/index.js
How I know if the plataform is cordova inside config/index.js?
var path = require('path') module.exports = { // Webpack aliases aliases: { quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'), src: path.resolve(__dirname, '../src'), assets: path.resolve(__dirname, '../src/assets'), '@': path.resolve(__dirname, '../src/components'), variables: path.resolve(__dirname, '../src/themes/quasar.variables.styl'), 'vuex-store': path.resolve(__dirname, '../src/store'), package: path.resolve(__dirname, '../package.json') }, progressFormat: ' [:bar] ' + ':percent'.bold + ' (:msg)', defaultTheme: 'mat', build: { env: require('./prod.env'), publicPath: [Platform.is.cordova] ? '' : '/', // ON HERE! I NEED TO KNOW IF THE PLATFORM IS CORDOVA productionSourceMap: false, purifyCSS: true }, dev: { env: require('./dev.env'), cssSourceMap: true, openBrowser: false, publicPath: '/', port: 8080, proxyTable: {} } }
-
RE: UglifyJs Unexpected token punc «(», expected punc «:»
.babelrc
{ "presets": [["es2015", {"modules": false}], "stage-2"], "plugins": ["transform-runtime"], "comments": false }
build/webpack.base.conf.js
var path = require('path'), webpack = require('webpack'), config = require('../config'), cssUtils = require('./css-utils'), env = require('./env-utils'), merge = require('webpack-merge'), projectRoot = path.resolve(__dirname, '../'), ProgressBarPlugin = require('progress-bar-webpack-plugin'), useCssSourceMap = (env.dev && config.dev.cssSourceMap) || (env.prod && config.build.productionSourceMap) function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: { app: './src/main.js' }, output: { path: path.resolve(__dirname, '../dist'), publicPath: config[env.prod ? 'build' : 'dev'].publicPath, filename: 'js/[name].js', chunkFilename: 'js/[id].[chunkhash].js' }, resolve: { extensions: ['.js', '.vue', '.json'], modules: [ resolve('src'), resolve('node_modules') ], alias: config.aliases }, module: { rules: [ { // eslint enforce: 'pre', test: /\.(vue|js)$/, loader: 'eslint-loader', include: projectRoot, exclude: /node_modules/, options: { formatter: require('eslint-friendly-formatter') } }, { test: /\.js$/, loader: 'babel-loader', include: projectRoot, exclude: /node_modules/ }, { test: /\.vue$/, loader: 'vue-loader', options: { postcss: cssUtils.postcss, loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({ sourceMap: useCssSourceMap, extract: env.prod })) } }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'img/[name].[hash:7].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'fonts/[name].[hash:7].[ext]' } } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': config[env.prod ? 'build' : 'dev'].env, 'DEV': env.dev, 'PROD': env.prod, '__THEME': '"' + env.platform.theme + '"' }), new webpack.LoaderOptionsPlugin({ minimize: env.prod, options: { context: path.resolve(__dirname, '../src'), postcss: cssUtils.postcss } }), new ProgressBarPlugin({ format: config.progressFormat }) ], performance: { hints: false } }
config/index.js
var path = require('path') module.exports = { // Webpack aliases aliases: { quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'), src: path.resolve(__dirname, '../src'), assets: path.resolve(__dirname, '../src/assets'), '@': path.resolve(__dirname, '../src/components'), variables: path.resolve(__dirname, '../src/themes/quasar.variables.styl'), 'vuex-store': path.resolve(__dirname, '../src/store'), package: path.resolve(__dirname, '../package.json') }, // Progress Bar Webpack plugin format // https://github.com/clessg/progress-bar-webpack-plugin#options progressFormat: ' [:bar] ' + ':percent'.bold + ' (:msg)', // Default theme to build with ('ios' or 'mat') defaultTheme: 'mat', build: { env: require('./prod.env'), publicPath: '/', productionSourceMap: false, // Remove unused CSS // Disable it if it has side-effects for your specific app purifyCSS: true }, dev: { env: require('./dev.env'), cssSourceMap: true, // auto open browser or not openBrowser: false, publicPath: '/', port: 8080, // If for example you are using Quasar Play // to generate a QR code then on each dev (re)compilation // you need to avoid clearing out the console, so set this // to "false", otherwise you can set it to "true" to always // have only the messages regarding your last (re)compilation. clearConsoleOnRebuild: false, // Proxy your API if using any. // Also see /build/script.dev.js and search for "proxy api requests" // https://github.com/chimurai/http-proxy-middleware proxyTable: {} } } /* * proxyTable example: * proxyTable: { // proxy all requests starting with /api '/api': { target: 'https://some.address.com/api', changeOrigin: true, pathRewrite: { '^/api': '' } } } */
-
RE: UglifyJs Unexpected token punc «(», expected punc «:»
@danielo515 do you have any idea how I can solve this? Could you tell me another compressor that is widely used by the community? Thanks.
-
UglifyJs Unexpected token punc «(», expected punc «:»
Using Lazy Loading:
// sections from /src/router.js function load (component) { // '@' is aliased to src/components return () => System.import(`@/${component}.vue`) }
And:
quasar build
Trigger the following error:
ERROR in js/0.aab963007f1783dc01dc.js from UglifyJs Unexpected token punc «(», expected punc «:» [js/0.aab963007f1783dc01dc.js:36,13] ERROR in js/1.7861e04c92edd3414bc7.js from UglifyJs Unexpected token punc «(», expected punc «:» [js/1.7861e04c92edd3414bc7.js:36,13] npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! quasar-app@0.0.1 build: `node build/script.build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the quasar-app@0.0.1 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\phill\AppData\Roaming\npm-cache\_logs\2017-09-15T22_41_13_964Z-debug.log
However, if I remove the ${…} ,
// sections from /src/router.js function load (component) { // '@' is aliased to src/components return () => System.import(`@/foo.vue`) }
no error is displayed!
$ npm list --depth=0 quasar-app@0.0.1 C:\Users\phill\Desktop\plenario\quasar +-- autoprefixer@6.7.7 +-- axios@0.16.2 +-- babel-core@6.26.0 +-- babel-eslint@7.2.3 +-- babel-loader@7.1.2 +-- babel-plugin-transform-es2015-shorthand-properties@6.24.1 +-- babel-plugin-transform-runtime@6.23.0 +-- babel-preset-es2015@6.24.1 +-- babel-preset-stage-2@6.24.1 +-- babel-runtime@6.26.0 +-- UNMET PEER DEPENDENCY bulma@>=0.2 +-- colors@1.1.2 +-- connect-history-api-fallback@1.3.0 +-- css-loader@0.28.7 +-- es6-promise@4.1.1 +-- eslint@4.6.1 +-- eslint-config-standard@10.2.1 +-- eslint-friendly-formatter@3.0.0 +-- eslint-loader@1.9.0 +-- eslint-plugin-html@3.2.1 +-- eslint-plugin-import@2.7.0 +-- eslint-plugin-node@5.1.1 +-- eslint-plugin-promise@3.5.0 +-- eslint-plugin-standard@3.0.1 +-- eventsource-polyfill@0.9.6 +-- express@4.15.4 +-- extract-text-webpack-plugin@3.0.0 +-- file-loader@0.11.2 +-- friendly-errors-webpack-plugin@1.6.1 +-- glob@7.1.2 +-- html-webpack-plugin@2.30.1 +-- http-proxy-middleware@0.17.4 +-- json-loader@0.5.7 +-- laravel-echo@1.3.2 +-- less@2.7.2 +-- less-loader@4.0.5 +-- moment@2.18.1 +-- opn@5.1.0 +-- optimize-css-assets-webpack-plugin@3.2.0 +-- postcss-loader@1.3.3 +-- progress-bar-webpack-plugin@1.10.0 +-- purify-css@1.2.6 +-- pusher-js@4.1.0 +-- quasar-extras@0.0.8 +-- quasar-framework@0.14.3 +-- shelljs@0.7.8 +-- stylus@0.54.5 +-- stylus-loader@3.0.1 +-- url-loader@0.5.9 +-- vue@2.3.4 +-- vue-bulma-datepicker@1.3.6 +-- vue-loader@12.2.2 +-- vue-router@2.7.0 +-- vue-select@2.2.0 +-- vue-style-loader@3.0.3 +-- vue-template-compiler@2.3.4 +-- vuex@2.4.0 +-- vuex-persistedstate@2.0.0 +-- vuex-router-sync@4.3.1 +-- webpack@3.6.0 +-- webpack-dev-middleware@1.12.0 +-- webpack-hot-middleware@2.19.1 `-- webpack-merge@4.1.0 npm ERR! peer dep missing: bulma@>=0.2, required by vue-bulma-datepicker@1.3.6 $ npm list --depth=0 -g C:\Users\phill\AppData\Roaming\npm +-- bower@1.8.0 +-- cordova@7.0.1 +-- electron@1.4.15 +-- grunt-cli@1.2.0 +-- gulp@3.9.1 +-- UNMET PEER DEPENDENCY less@^2.3.1 +-- less-loader@4.0.5 +-- npm@5.3.0 +-- quasar-cli@0.6.4 +-- vue-cli@2.8.1 +-- vue-router@2.2.1 +-- vuex@2.1.2 `-- UNMET PEER DEPENDENCY webpack@^2.0.0 || ^3.0.0 npm ERR! peer dep missing: less@^2.3.1, required by less-loader@4.0.5 npm ERR! peer dep missing: webpack@^2.0.0 || ^3.0.0, required by less-loader@4.0.5 npm ERR! invalid: node-gyp@3.4.0 C:\Users\phill\AppData\Roaming\npm\node_modules\cordova\node_modules\npm\node_modules\node-gyp npm ERR! missing: path-array@^1.0.0, required by node-gyp@3.4.0
-
RE: history mode for web and not for cordova
// VueRouter "history" mode DOESN'T works for Cordova builds, it is only to be used only for websites. // If you decide to go with "history" mode, please also open /config/index.js and set "build.publicPath" to something other than an empty string. (Example: '/' instead of current '') // If switching back to default "hash" mode, don\'t forget to set the build publicPath back to '' so Cordova builds work again.
So, is need change the /config/index.js file too. How get Platform.is.cordova value inside this file?