Vue CLI 3: Setting Up a New Project!
Bonus: Tips on adding helpful developer tools such as SASS, ESLint, and Chai/Mocha unit testing
Many of you may already know about the popular web framework called Vue JS. Today this article is going to walk you through setting up a Vue project using it’s very powerful CLI tool.
“What is Vue CLI 3?”
Vue CLI 3 is an npm package, it allows users to quickly and easily create Vue projects. By default a project built using Vue CLI 3 will come intergrated with webpack and other helpful dependencies.
Using Vue CLI 3:
Step 1. Install Vue CLI
The first thing to do is to launch a terminal (command line for Windows users). In your terminal we are going to install vue cli into our system. Do this by running either<npm install -g @vue/cli > for npm, or <yarn global add @vue/cli> for yarn.
Step 2. Creating your project
This step is fairly simple. In your already open terminal navigate to the directory you’d like to keep your project. Ex:
Now type <vue create “project-name” > and hit enter. This command should now open the cli menu in your terminal. You will be presented with the option of using the default configuration or manually selecting your features. For the sake of this tutorial we will chose to manually select our features.
In the next menu, select these four features to add into our project: Babel, Linter/Formatter, CSS preprocessors and Unit Testing. If you need anything else for your project feel free to select it now.
Step 3. Configuring Plugins
SASS
As promised in the header of this aritcle we will be using SASS rather than traditional CSS. Meaning we will need a CSS pre-processor to translate our SASS code into browser readable CSS. Lets keep things consistent and select SASS/SCSS with node.
Linting
Picking a linter is made fairly simple, since ESLint is the only option provided to us. Some of you may prefer to use a different linter don’t worry it is still possible to switch over after the project is made. And for those of you that don’t know what a linter is. Here is the Wikipedia definition:
lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. The term originates from a Unix utility that examined C language source code.
Back in the CLI menu you’ll be presented with four choices. What you choose here is entirely up to preference. However if none of the choices here are familiar simply select standard config and move forward.
Vue CLI offers additional options for linters such as linting on save or linting on commit. Again the choice is completely up to you. This setting can easily be changed after the project is created.
Unit Testing
For unit testing I am most familiar with Mocha + Chai as a test runner. Jest and Mocha do have suttle differences so it might be best for you to read up on what suits you best. Here is a link if you would like to know more. https://vue-test-utils.vuejs.org/guides/choosing-a-test-runner.html
Step 4. Working in your Project Environment & Hot Module Reloading
Congratulations! You’ve now successfully setup your project environment. Complete with SASS/SCSS, ESLint, and Mocha/Chai unit testing capabilities. Now would be a good time to test everything out and see your site up and running.
In the terminal, navigate to your projects folder and run the command <npm run serve>. A lot of processes should be running wild in your terminal. Don’t worry your computer is safe. We are simply launching a development server which displays our site in Web browsers and allows us to work on the fly.
Earlier, I talked about a nice feature called Hot Module Reloading. Here we get to see first hand what that means. In a web browser (Chrome, Firefox, etc.) go to this url http://localhost:8080. You should see this web page:
This is the intro page for your web app. Click around on the links and you’ll find the page is fully responsive. This is thanks to npm run serve loading up your files into a development server. This server allows you to do hot module reloading. Essentially, you know have the ablity to edit any file in the project, save it and your webpage will automatically update with the changes.
To try this out open navigate the App.vue file located in the src directory and change the “Welcome to your Vue.js App” to “Hello World” then hit save.
Navigate back to your web browser and you’ll find that the webpage now says “Hello World”. This is called hot module reload. As you can imagine this feature is super helpful in speeding up the development process.
Thank you for reading this article. If you need even more info than provided here checkout the official Vue CLI documentation here.
Also if you are interested in Vue and overall Web Development make sure to follow my account. I’ll have more articles on similar topics in the future. Happy Developing!
