Set Up Your Computer for VueJS

If you are new to VueJS, this is one place where you can start. Since I think that Windows can be tricker to get started on, I've tried to pay special attention to Windows users throughout this guide.

If you have questions, or would like to have something explained in more detail, please create an issue. if you want to make contributions, please create a Pull Request with a very clear description of the change you propose and why. This project functions under the Geek Feminism Code of Conduct.

Steps to Vue! (Follow them loosely, or in strict order, or not at all! :-))

• Node (Node.JS)
  • What is Node? (Wikipedia)
  • Open terminal, check node -v
  • NPM should be installed when you install node. Check with npm -v
• NPM
  • What is NPM? (Wikipedia)
  • NVM exists, and you might want to use it (but we won't do that now)
• VSCode (Get VSCode)
  • Extensions
    • Sarah Drasner's Extension Pack
    • Extras: Gift's Recommendations (goes beyond Vue)
• Vue See the Docs
  • npm install -g vue will install Vue everywhere
  • npm install -g @vue/cli to install Vue CLI
    • A command line interface (CLI) which can help you start new projects quickly, with some common preset options to choose from.
    • What do each of the options mean?
      • Babel - A JavaScript compiler that makes your newer JavaScript work with older versions of JavaScript.
      • TypeScript - A compiled programming that includes JavaScript, but has extra features (most importantly strong typing). It is a "superset of Javascript," and compiles down to plain JavaScript.
      • Progressive Web App support - Helps your site act like a native app on the device, most notably it lets you use the app offline.
      • Router - Mostly we think of it as helping you to create multiple linked pages within your single page application ("routes"), but Vue Router does a bunch of other things too!
      • Vuex - Helps to manage "state" in your application. It stores some data that you may want to view and manipulate, and it makes sure you're manipulating that data in a safe way.
      • CSS Preprocessors - These let you use CSS extension languages such as SASS, LESS, and Stylus (which are like CSS but with more features and different syntax).
      • Linter - Analyzes your code for errors, and alerts you to what and where, roughly, the errors are.
      • Unit Testing - Lets you choose from Jest or Mocha frameworks to test chunks of code in your app.
      • E2E Testing - Short for "End to End Testing," Cypress/Nightwatch are set up so you can test how your app works overall (e.g., What happens if you log in with an invalid email address?)
      • @TODO Use History Mode for Router?
      • @TODO Which CSS Preprocessor
      • @TODO Where do you prefer storing config?
      • @TODO Save as preset for future projects?
• Let's get hacking!
  • Add the project to VSCode. File > Add Folder (find the folder where your new project lives, click once on it, and click "Add Folder").
  • Have a look at the README file in the base of the project folder.
  • Open a terminal (ctrl + `)
  • Since this is the first time we've gotten into the project, we will use npm install
  • npm run serve
  • If asked whether node should be able to access networks (Windows) allow access.
  • Ctrl + click the "local" web address. This will start the browser and show us the starter template.
  • Hands-on Vue, part 1, by Marina Mosti
  • Git!
    • Sign up/into GitHub (we'll be using GitHub here, but GitLab and BitBucket are two other excellent choices)
    • (on your computer) Create ssh keys
      • Windows
      • @TODO Add the SSH keys to GitHub
    • (on your computer)If it's not on there already, install Git on the computer. If you are on Windows, cmder is recommended.
    • In the root of your Vue project, initialize a new project
    • If you haven't set a git name and email before, you'll need to follow the command line prompts to do that now.