Carbon Tutorial Vue

This tutorial will guide you in creating a Vue app with the Carbon Design System. We’ll teach you the ins and outs of using Carbon components, while introducing web development best practices along the way.

Get started by visiting the tutorial instructions.

Available Scripts

This project was bootstrapped with Vue CLI with the following config.

vue create carbon-tutorial-vue

Vue CLI v3.9.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n

In the project directory, you can run:

'yarn serve'

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

This will create a dist folder which can be deployed to gh-pages or any other host.

'yarn lint'

Runs the linter against your code.

'yarn test:unit'

Runs your unit tests

Learn More

You can learn more in the Vue CLI Overview.

To learn Vue, check out the Vue documentation.