We have created a variable called weatherDataList. then(data => (this.weatherDataList = data)) Add the file into the root of the public folder of your project.Ĭhange the code in the script section in Weather.json to look like this: weather.jsonĬopy the JSON content in a file called weather.json. We will be using a simple JSON file for fetching the data. Let’s get started fetching our weather data. When we save our files, our local server should reload and show us this web page: #4 Get the Weather Data from the Local JSON File In the script tag, we removed the HelloWorld component and replaced it with our Weather component. In the template tag, we removed all the HTML within the div tag and replaced it with our Weather component. We have only changed the code within the template tag and the script tag. Import Weather from './components/Weather.vue'įont-family: 'Avenir', Helvetica, Arial, sans-serif In the App.vue file, we have changed the code to this: // App.vue Here we have created a simple component displaying a header tag with “My Weather App”. In the components folder, create a new file called Weather.vue and add this code: // Weather.vue The project folder should look something like this: No need to waste valuable seconds refreshing the site manually :). This means that every change you do in the project, it will reflect those changes in the GUI. npm run serveĪs you can see in the terminal, the CLI has started up a local server on “ Open a new tab on your browser and enter this URL. Use the npm run serve command to start a local web server. Go into the folder by typing this in the command: cd weather-json Now we have created a basic Vue CLI project called weather-json. #2 Run the Vue CLI Starter App in the Browser You will then have the option to select a preset. npm install -g the CLI is installed, create the Vue app by using the create command. Install the CLI by typing the following in a terminal. In other to use the Vue CLI, you need to download and install Node.js. 8 Final Words #1 Create the Project with the Vue CLI
0 Comments
Leave a Reply. |