New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kickoff: 3.0 plans #589

Closed
yyx990803 opened this Issue Sep 12, 2017 · 80 comments

Comments

Projects
None yet
@yyx990803
Member

yyx990803 commented Sep 12, 2017

We have been discussing an upgrade for vue-cli for a while, in order to address a few issues in the current version.

Problems

  1. Currently, project build configurations are directly included in the template. This leads to a few problems:

    • once created, it becomes difficult to upgrade an existing project to track latest changes in the remote template;

    • pulling directly from github lacks proper version control mechanism that npm packages have;

    • less experienced users can get intimidated by the seemingly complex code in the build directory.

  2. Too many decisions to make upfront resulting in a less smooth onboarding experience.

    The user has to first pick a template, but for beginners they usually do not possess the experience to decide which template fits their use case best. The official webpack template has a number of questions regarding linters and test tools, which can also be intimidating for beginners.

Solutions

  1. vue-cli@3.0 will be moving towards a "config/scripts in a package" model, which is commonly used among several other tools:

  2. Instead of forcing users to make non-reversible decisions upfront, we would:

    • Phase out browserify support. There will be just one template which is webpack based.

    • Configurations for common use cases (pwa, ts, ssr) can be added on demand via presets, similar to how Neutrino/Poi works. The presets can be maintained and versioned individually.

  3. In addition to the encapsulated package, we will also offer the ability to configure the tooling via vue.config.js. This file exposes two functionalities:

    1. A centralized entry for configuring/toggling high-level built-in features, e.g. env variables, css extraction, API proxying.

    2. Get lower level access to the underlying webpack config and tweak it (probably with webpack-chain). This essentially works like a local preset.

Other Ideas

  • We will probably split out vue build into an addon (e.g. vue-cli-build) so the initial install of vue-cli can be faster. vue build can simply try to call vue-cli-build, and prompt installation if it is not found.

  • vue list will be deprecated, OR list available presets instead.

  • Default integration of vue-test-utils and probably Jest as the runner (although it can lead to license concerns)

  • Better error reporting, e.g. jumping directly to source code from error overlay.

  • Grep for common warning / error messages and suggest potential doc links.

  • Auto port detection (suggested by @billyryanwill)

  • Your idea here

I realize this is in fact very similar to Poi and since @egoist has been an active contributor to vue-cli itself, I would love to get feedback from @egoist and potentially collaborate with him to build the new version. Maybe we can even build this on top of a fork of Poi?

/cc @vuejs/collaborators

@egoist

This comment has been minimized.

Collaborator

egoist commented Sep 13, 2017

This is what I imagine vue-cli might look like:

  • vue create: Create a project with only app code (or name this command vue init)
  • vue init: Still the old vue init behavior (or rename this command to vue clone)

The commands we set in package.json for projects generated by vue-cli:

  • vue-scripts build: Build app for production use (webpack)
  • vue-scripts dev: Run app with a dev server (webpack)
  • vue-scripts test: Run Jest (?) against test files.

Basically a create-react-app + react-scripts structure but we don't eject, we make use of webpack-chain instead.

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Sep 13, 2017

@egoist yep, exactly. Would you be interested in starting this? Feels like we can reuse/learn a lot from Poi. I currently have my hands full with 2.5, won't be able to work on this until that's released.

@Akryum

This comment has been minimized.

Member

Akryum commented Sep 13, 2017

Also, maybe we should make sure the whole flow is proxy-proof for enterprise usage.

@billyryanwill

This comment has been minimized.

billyryanwill commented Sep 13, 2017

A really tiny thing from me (I love vue-cli already), would be automatic port hopping if the default port is already being used. A few of our less technical members have struggled setting up and aren't comfortable changing the port it runs on so it would be cool if this could be implemented!

If I'm being ignorant and this is already an option then please set me straight :)

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Sep 13, 2017

@billyryanwill good point, that's definitely something people have been asking for.

@chrisvfritz

This comment has been minimized.

Member

chrisvfritz commented Sep 13, 2017

@billyryanwill @yyx990803 The portfinder package makes this really easy! It's actually slated to be added to the Webpack template.

@dabernathy89

This comment has been minimized.

dabernathy89 commented Sep 13, 2017

Is a template for distributable components part of the roadmap?

@cristijora

This comment has been minimized.

cristijora commented Sep 14, 2017

I personally enjoy POI a lot and it's presets. I think it's more controllable than create-react-app.
I also like the simplicity of next. Maybe combine and take the best pieces from all those 4 options?

@blocka

This comment has been minimized.

blocka commented Sep 14, 2017

the commands we set in package.json for projects generated by vue-cli:

vue-scripts build: Build app for production use (webpack)
vue-scripts dev: Run app with a dev server (webpack)
vue-scripts test: Run Jest (?) against test files.

We also need to deploy to a staging server as well, and the first thing we do on a vue-cli setup is remove the hardcoded NODE_ENV=production

I think there should be some thought in here as to how to allow this workflow out of the box.

@HerringtonDarkholme

This comment has been minimized.

Member

HerringtonDarkholme commented Sep 14, 2017

I would suggest an eject option similar to create-react-app. It's for advanced users and is a one-way operation. But I guess advanced users will want to have full control of their building scripts (compared to editing vue.config.js).

@egoist

This comment has been minimized.

Collaborator

egoist commented Sep 14, 2017

@HerringtonDarkholme with webpack-chain you actually get full control of your webpack config, and it's hard to have both eject and a preset system.

@karol-f

This comment has been minimized.

karol-f commented Sep 14, 2017

Maybe Neutrino (https://neutrino.js.org/) by Mozilla is a good fit? It provides "presets" which can be easily customized and extended when needed.

Description - https://davidwalsh.name/neutrino
Custimization - https://neutrino.js.org/customization/

@egoist

This comment has been minimized.

Collaborator

egoist commented Sep 14, 2017

@yyx990803 : Better error reporting, e.g. jumping directly to source code from error overlay.

Maybe contribute to https://github.com/geowarin/friendly-errors-webpack-plugin (or a fork if necessary)

@karol-f : Maybe Neutrino (neutrino.js.org) by Mozilla is a good fit?

Sure, maybe start with making a Vue preset for Neutrino and wrap them all in a cli like vue-scripts or similar.

@HerringtonDarkholme

This comment has been minimized.

Member

HerringtonDarkholme commented Sep 14, 2017

@egoist I don't think eject can be replaced by webpack chain. For example, webpack chain doesn't generate other configuration file like .babelrc, .postcssrc, etc. Also, users have to write their own eject/export function.

it's hard to have both eject and a preset system.

Can you elaborate why it is hard? IMHO eject is one-way operation. that means, once ejected, the project is no longer influenced by preset. Upstream preset change don't need to be applied to ejected projects.

@Akryum

This comment has been minimized.

Member

Akryum commented Sep 14, 2017

Well, you don't need to eject to use a .babelrc or .postcsssrc file.

@Ankit-Dave

This comment has been minimized.

Ankit-Dave commented Sep 14, 2017

Is it also possible to add development build command in package.json like

vue-scripts build-dev: Build app for development use (webpack)

this is specially useful if you want to test and debug on remote server.

@Pokom

This comment has been minimized.

Pokom commented Sep 14, 2017

@egoist Sure, maybe start with making a Vue preset for Neutrino and wrap them all in a cli like vue-scripts or similar.

How much effort do you believe this would take? Assuming I know very little about the subject but would be willing to learn :)

@znck

This comment has been minimized.

Member

znck commented Sep 14, 2017

Maybe presets or something to optionally add tools like CSS lint, eslint, storybook, visual testing etc.

@Mark-L6n

This comment has been minimized.

Mark-L6n commented Sep 14, 2017

Vuex is so commonly used, it would be good to add a Vuex option.
This would also help enforce that advanced configurations (i.e. pwa & whatever else comes along) mesh well with vuex.

@elpete

This comment has been minimized.

elpete commented Sep 14, 2017

Any thoughts on renaming it to create-vue-app to take advantage of Yarn’s create functionality and to standardize with the rest of the ecosystem?

@egoist

This comment has been minimized.

Collaborator

egoist commented Sep 15, 2017

@elpete FYI, there's already create-vue-app

@PengXing

This comment has been minimized.

PengXing commented Sep 15, 2017

Will multi entries be supported in one project?

@UncleBill

This comment has been minimized.

UncleBill commented Sep 18, 2017

Specify port from cli: vuejs-templates/webpack#923

@posva posva referenced this issue Sep 18, 2017

Closed

NPM dependencies #578

@brianvoe

This comment has been minimized.

brianvoe commented Sep 23, 2017

This sounds exactly like the process i built. 😄
Docs need some update but we use this for our production apps. The general purpose is you dont need any configuration unless you want to add additional webpack plugins or adjustments aside from the base webpack config.
http://vue-build.com

@posva

This comment has been minimized.

Member

posva commented Sep 23, 2017

@brianvoe That animation

@brianvoe

This comment has been minimized.

brianvoe commented Sep 23, 2017

@posva Thanks!

@mjbates7

This comment has been minimized.

mjbates7 commented Jan 21, 2018

If we say created a project with vue-cli webpack template for example and you've updated the template to include fixes, new features/configuration etc, will there be a way to update it to the latest version in place? Like react you can update the react-scripts dependency in your project - it would be good to have something similar to this.

Something like: vue update webpack <foldername>

@LinusBorg

This comment has been minimized.

Member

LinusBorg commented Jan 21, 2018

No, The "ole" templates will not get an update mechanism.

But new projects created with the new cli will.

@mjbates7

This comment has been minimized.

mjbates7 commented Jan 21, 2018

Sounds spot on. V3 onwards I gather?

@Akryum

This comment has been minimized.

Member

Akryum commented Jan 21, 2018

Since v3 is made from scratch with a complete new architecture, it's safe to say that it will not be retro-compatible.

@serak

This comment has been minimized.

serak commented Jan 22, 2018

also i think on vue-cli or webpack template static path on build prod should be fixed... all the assets are currently build as src=static/js/..... which on windows os or xampp apache is undefined path unless i change all to ./static/js/ ....

root path : http://localhost/prodbuild/

static path on npm run build : static/[js/css]/....

in which the browser is assuming the assets are on http://localhost/static/[js/css/]/... instead of http://localhost/prodbuild/static/[js/css]/...

thanks

@LinusBorg

This comment has been minimized.

Member

LinusBorg commented Jan 22, 2018

This is not a thing to be discussed here, the webpack template has its own repository.

@corbinu

This comment has been minimized.

corbinu commented Jan 27, 2018

I have to say I was really curious to try out v3 as I have been using my own custom templates with v2. However the requirement of yarn rather than something like lerna which is compatible with npm as well is a huge non starter for me.

@codetheorist

This comment has been minimized.

codetheorist commented Jan 28, 2018

@LinusBorg What I meant by multiple configs is, come devs or designers may want to have, for example, the choice to save different presets, rather than one default configuration.

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Jan 30, 2018

@codetheorist 3.x allows you to save multiple presets.

@ralrom

This comment has been minimized.

ralrom commented Jan 30, 2018

How do we pass options to the webpackConfig object? I would like to modify some options which are passed in cli-service/lib/config/prod.js but I wasn't able to figure out how to do this.

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Jan 30, 2018

@ralrom docs are not ready yet, but here's how:

Create a vue.config.js in root (you may need to remove/copy the "vue" field in package.json first):

// vue.config.js
module.exports = {
  chainWebpack: chainableConfig => {
     // modify config with webpack-chain
     // https://github.com/mozilla-neutrino/webpack-chain
  },

  configureWebpack: config => {
    // mutate config directly, or return new config
  },
  
  // object literal will be merged into base config using webpack-merge
  configureWebpack: {
    // ...
  }
}
@Ldoppea

This comment has been minimized.

Ldoppea commented Jan 31, 2018

(you may need to remove/copy the "vue" field in package.json first)

@yyx990803 Where should it be copied?

The simple presence of vue.config.js disables the linter, so I try to add the functionality back.

But when added to configureWebpack I get Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema..
When added directly in the export, nothing happens.

Is there any other side effect when using vue.config.js?

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Jan 31, 2018

@Ldoppea

module.exports = {
  lintOnSave: true,
  configureWebpack: ...
}
@Ldoppea

This comment has been minimized.

Ldoppea commented Jan 31, 2018

It works, thanks 😉

@phiter

This comment has been minimized.

phiter commented Feb 1, 2018

How do you enable source maps to those loaders on the 3.0 CLI?

@toBeTheLight

This comment has been minimized.

Contributor

toBeTheLight commented Feb 1, 2018

How can I make it as a multi-page application?
Will it match the same name files?
for example:

src/index.vue to public/index.html
src/user.vue to public/user.html

Or I only can achieve this by setting webpack in vue.config.js?
thank you.

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Feb 5, 2018

Closing this as we are close to the first beta of 3.0 - if you have any particular feedback regarding current alpha, please submit issues with specific details. Thanks everyone for participating in the discussion.

@yyx990803 yyx990803 closed this Feb 5, 2018

@hearsay316

This comment has been minimized.

hearsay316 commented Feb 7, 2018

你好! 我有时候会用hbuilder直接打包成安卓的app,在vue cli 2.0中只要将的config下的index.js的改成assetsPublicPath: './',路径就完全正确.在3.0中我需要自己将dist里的html引用加点 就像这样
link rel=preload as=script href=./js/vendor.6c050399.js

能不能加个webapp模式 ???

@serak

This comment has been minimized.

serak commented Feb 21, 2018

why yarn build when i am using npm ? very confusing and where did the webpack config go on vue-cli 3?

@blocka

This comment has been minimized.

blocka commented Feb 21, 2018

@serak

This comment has been minimized.

serak commented Feb 21, 2018

what happens when there is a bug in default config file. i use to change some value in config/index.js so than when i build for production every link works as it should be

build: {
   // Template for index.html
   index: path.resolve(__dirname, '../dist/index.html'),

   // Paths
   assetsRoot: path.resolve(__dirname, '../dist'),
   assetsSubDirectory: 'static',
   assetsPublicPath: '',  // use to be assetsPublicPath: '/' in which it assumes my page is in the root directory like localhost/vendor.js instead of localhost/whateverfolder/vendor.js
@rigor789

This comment has been minimized.

Contributor

rigor789 commented Feb 21, 2018

@serak take a look at the configuration docs: https://github.com/vuejs/vue-cli/blob/dev/docs/config.md more specifically the baseUrl option

@yyx990803

This comment has been minimized.

Member

yyx990803 commented Feb 21, 2018

@serak read the documentation please. Locking this thread.

@vuejs vuejs locked and limited conversation to collaborators Feb 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.