Table of Contents
URL: https://www.progressiverobot.com/vuejs-using-new-vue-cli-3/
vue-cli version 3 brings a whole new developer experience. The Vue team put a great effort in making sure that creating a Vue.js project is smooth and that no initial configuration is required. At the same time, extending and tweaking the project configuration in a concise and easy way is also made possible.
Let's take a look at some features of the new vue-cli.
[warning] v3 of the vue-cli is still in alpha at the time of this writing.
Getting Started
First you need to install it:
$ npm install -g @vue/cli
As you can see, Vue.js now uses scoped packages to distribute their packages under the @vue namespace.
Then we can simply create a project by running:
$ vue create cli-test # cli-test is just any folder name
That will open up a prompt asking if you want the default config (<^>eslint<^>, <^>babel<^>) or if you'd like to add extra features, such as:
- TypeScript
- Progressive Web App support
- Vue Router
- Vuex
- CSS pre-processors
- Linter / Formatter
- Unit testing
- End-to-end testing
Depending on what options you choose, you'll get more questions. Just choose what fits best for you. When you finish, dependencies will start to be installed and your project should be ready to go.
Configuration
vue-cli should have created some configuration. The default configuration is created in the <^>package.json<^> and it looks like this:
[label package.json]
{
// ...
"vue": {
"lintOnSave": true
},
"babel": {
"presets": [
"@vue/app"
]
},
"eslintConfig": {
"extends": [
"plugin:vue/essential",
"eslint:recommended"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
You can see a brand new @vue/app package that has all the Babel configuration Vue needs to run. But you can still tweak it and add any other configuration you'd like.
As per the eslint config, it includes the plugin:vue/essential which has a recommended ruleset for Vue following its style guide. Additionally it also includes eslint:recommended but that can vary depending on your preferences. For example if you chose to have eslint and prettier, you'll get @vue/prettier instead.
You can tell the cli to put the config in separate files if you chose the features manually. That will create some files depending your choices such as <^>.babelrc<^>, <^>.postcssrc<^>, <^>jest.config.js<^>, <^>tslint.json<^>, etc. You can move out to files the config at any point by removing it from <^>package.json<^> and moving it to its respective config file.
When choosing the options manually, you're asked whether you'd like to save that configuration as a preset for future project. That configuration is saved in <^>~/.vuerc<^>, just in case you need to modify it at some point.
npm Scripts
Out of the box, you'll get a zero-config development and production environment that is already setup following best practices. The dev environment comes with hot module reloading, fast building, and more while the production one provides minification, module concatenation, code optimizations and so.
This happens thanks to vue-cli-service, used in the npm scripts of your <^>package.json<^> files. Internally, vue-cli-service has webpack configurations ready for different environments.
The scripts available to us by default are:
- serve: "vue-cli-service serve –open"
- build: "vue-cli-service build"
- lint: "vue-cli-service lint". You don't need to manually run it, it could be run automatically if you chose to lint on save or before commit
And if you added more features, you could get some extra scripts:
- test: "vue-cli-service test"
- e2e: "vue-cli-service e2e"
- e2e-open: "vue-cli-service e2e:open"
You can run any of those by using npm run. For instance: npm run serve will start a dev server.
Environment Variables
vue-cli uses the conventional <^>.env<^> file as suggested by the twelve factor app. That makes sure it follows standard conventions and is cross-compatible with other systems.
You can define a <^>.env<^> file as follows:
[label .env]
VUE_APP_BASE_URI=/api
VUE_APP_DEBUG=true
[warning] Only variables starting with VUE_APP_ are loaded. Make sure you name them correctly.
And they'll be be loaded and available using process.env.VUE_APP_BASE_URI, for example.
You can also define environment variables per environment. For that you must add the appropriate suffix, which are taken from the NODE_ENV variable:
.env.development
.env.production
.env.test
They will override the base <^>.env<^> values. For example, from the previous example, it's better that we define VUE_APP_DEBUG based on the environment:
[label .env.development]
VUE_APP_DEBUG=true
[label .env.production]
VUE_APP_DEBUG=false
Proxy
You can configure a proxy by adding a proxy object to the <^>package.json<^> file in order to forward some calls to a specific url in development:
[label package.json]
{
"proxy": {
"/api": "http://localhost:4000"
}
}
That way, all calls that match the /\/api/ pattern will be forwarded to http://localhost:4000
The vue.config.js File
By default, you'll have a vue config key on your <^>package.json<^>, but you can move out that config to a <^>vue.config.js<^> file.
The <^>vue.config.js<^> file is intended to have app configuration. For now, there are already a few properties you can use, but it's expected that this file will be the target for upcoming features or plugins:
[label vue.config.js]
module.exports = {
lintOnSave: true,
configureWebpack: {
output: {
path: __dirname + "/cool-build"
}
}
};
I think lintOnSave is pretty descriptive on its own already.
The configureWebpack key allows us to modify the internal default webpack configuration. That's really powerful, since by default you have the most common features setup for different environments with no config at all. But if you need it, you can tweak it using this key. In the example, I'm just changing the output path which defaults to /dist.
The configureWebpack object will be merged with the internal one. You can also use a function that accepts the config as an argument:
[label vue.config.js]
module.exports = {
configureWebpack: config => {
// ...
}
};
Adding CLI Plugins
You can always start from the basic default configuration and add functionality as you go by using plugins. They all work in the same way: you install them, then invoke them and they do the magic for you.
For example, say you need to have Progressive Web App (PWA) functionality and you didn't choose it when you created the project. To add it is as easy as:
$ npm install @vue/cli-plugin-pwa
$ vue invoke pwa # you don't need the @vue/cli-plugin- prefix
Plugins can also have options when they are invoked. For example, cli-plugin-eslint can be invoked with the following arguments:
$ vue invoke eslint --config airbnb --lintOn save
Wrapping Up
You've seen an overview of the new vue-cli. It has a well defined architecture that makes it extensible while starting off from zero config. It covers some usual cases like proxying or setting environment variables as well. Expect more cool features and plugins in the future.
Stay cool 🦄
