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.
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:
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.
This will create a dist folder which can be deployed to gh-pages or any other host.
Runs the linter against your code.
Runs your unit tests
You can learn more in the Vue CLI Overview.
To learn Vue, check out the Vue documentation.