JCDC Vue Starter Kit v1.19.1

Setup Instructions

Install VS Code

Download and install Visual Studio Code

Verify Node

Recommended Version - 16.13.0 Ensure you're running the recommended version of node, by typing node -v in the command line. this will either print your current node version, or fail. If it fails, follow the install instructions, otherwise follow the update instructions

Install Node

Download Node from nodejs.org. Choose the The Long Term Support (LTS) install. Once the installer has downloaded, run it, and follow the onscreen instructions. Once install is complete, open your command line, and type node -v. It should print the version of node that you just installed.

Update Node

It is suggested that you install Node Version Manager. (WIN | MAC). Follow the instructions, and you’ll be able to easily update node at any time, as well as manage different versions of node.

Install Vue.js

Install vue with the following command:

$ npm install -g @vue/cli

If you run into problems, follow the install instructions here: Vue CLI Install Instructions

Vue Starter Kit

• Copy the files from D:\TFS\VueStarterKit into the root of your project.
• In Visual Studio Code, open your project by using File > Open Folder
• Go to Terminal > New Terminal. The terminal will open at the bottom and will already be in the application folder.
• Run npm install --legacy-peer-deps
  • If you get an error saying that node is “unable to resolve dependency tree”, make sure you are using the recommended version of Node, v14.17.0.
  • The current install includes 7 high vulnerabilities from the @vue/cli-service. All are “Regular Expression Denial of Service” and are not of concern.
• Then run npm run build. This will build the application as a production environment and output it to a dist folder. The process should be successful. If it fails, communicate with the JCDC UI team to troubleshoot.
• Once install is complete, run npm run serve this will serve your development environment. The console will print out a link to the URL where the application is served, e.g., http://localhost:8080.
• Click the link and the application will open in your default browser.

You should be good to go. Keep in mind that as you're developing, you'll use the command npm run serve to view your development changes. Vue CLI has live reload, so any frontend changes should update immediately, and errors will be printed to both the console and the browser window. Any changes to the backend, like adding import statements to main.ts, updating webpack definitions, or changing vue settings, will require running the serve command again.

Optional, but recommended: Vue provides a Chrome extension, that can assist with development within the browser. One feature is it can show the VUE elements on the page as opposed to the HTML Elements in the standard browser inspector.

Project setup

npm install --legacy-peer-deps

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint