Start Vue Project

Posted on  by admin

Without losing many words I'll start straight away: This is a guide showing how to rapidly start Vue.js development with the Vue CLI. So if you wanted to try Vue.js for some time now and can relate to questions like "How to begin without much effort?" — I hope this post can make the start with Vue.js easier for you.

Prerequisites:

To save a lot of time, let the Vue Command-Line Interface do all the work for you. Vue CLI is simply a npm packages, that is globally installed to provide the vue command.

You can install it by using npm or yarn:. Note: Vue CLI requires Node.js version 8.9 or above. To verify the successful installation, try this:. Now everything's ready to setup your project. Navigate to the directory where you want to start your new project in and run the following command:.

Objective: To setup a local Vue development environment, create a starter app, and understand the basics of how it works.

Setup Vue CLI

Note that my-vue-app is the title of your project, choose whatever title you like. Now Vue CLI starts an interactive feature selection, let's see what we have here:. At this point you can either choose a preset (the first two options in the screenshot above are presets I already saved earlier) or the default configuration or the manual selection of features.

For now you can just navigate to default using the arrow keys and hit Enter. The result should be similar to this:. Looks like Vue CLI was really busy doing things. Let's see, what it did in particular (not necessarily in that order):. Create a default package.json containing some dependencies for production and development. Install dependencies (node modules). Create the project files and directories. Initialize a Git repository. Create a README.md with some basic commands to develop your project. The project file structure looks like this:.

Now that you've got an overview what Vue CLI created for you, you can start a development server to see the result. Run the following:. This compiles the project and serves it at localhost:8080 with hot-reload. So whenever you're changing something (e.g. adjusting the welcome message at line 4 in App.vue) you don't have to reload the page in your browser, it updates automatically.

Now simply start playing around with Vue.js. This post is as incomplete as it is short - it was just meant to be a starting point for those struggling to begin with Vue.js. And don't forget to look into the docs, they are awesome 😎. Let me know in the comments, if you want to go more into detail at any point!

Create a new project

Originally published: 1st November 2019 on Medium. This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8. You must have Visual Studio installed and the Node.js development workload. If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free. If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

It is served hot

If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer. Choose the Node.js development workload, then choose Modify.

  1. You must have the Node.js runtime installed. If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.
  2. Node.js is built for 32-bit and 64-bit architectures. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions.
  3. Only one is required and the Node.js installer only supports one being installed at a time. In general, Visual Studio automatically detects the installed Node.js runtime. If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path).
  4. You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects. If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.
  5. For more information, see the prerequisites. Open Visual Studio. Create a new project. Press Esc to close the start window. Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js Web application (either JavaScript or TypeScript).
  6. In the dialog box that appears, type the name basic-vuejs, and then choose Create. From the top menu bar, choose File > New > Project. In the left pane of the New Project dialog box, expand JavaScript or TypeScript, then choose Node.js. In the middle pane, choose Basic Vue.js Web application, type the name basic-vuejs, and then choose OK.
  7. If you don't see the Basic Vue.js Web application project template, you must add the Node.js development workload. For detailed instructions, see the Prerequisites. Visual Studio creates the new project. The new project opens in Solution Explorer (right pane).

Check the Output window (lower pane) for progress on installing the npm packages required for the application.

In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed. If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages. Take a look at Solution Explorer in the right pane. Highlighted in bold is your project, using the name you gave in the New Project dialog box. On disk, this project is represented by a .njsproj file in your project folder. At the top level is a solution, which by default has the same name as your project.

A solution, represented by a .sln file on disk, is a container for one or more related projects.

vue create #

The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.

  • If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.
  • In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item. Select either JavaScript Vue Single File Component or TypeScript Vue Single File Component, and then click Add.
  • Visual Studio adds the new file to the project. Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list.
  • (TypeScript project only) From Visual Studio, choose Build > Clean Solution. Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list. Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. In the console, you see a message Starting Development Server. Then, the app opens in a browser. If you don't see the running app, refresh the page. Close the web browser. Let’s start with a quick tour of Vue’s data binding features. If you are more interested in a high-level overview first, check out this blog post.
  • I’m sure you also have many questions now - read along, and we will cover them in the rest of the guide. Caught a mistake or want to contribute to the documentation?Edit this page on Github! We have started the development of a new Business which is primarily going to be an entirely new platform based business model which aims to create value by facilitating exchanges between two or more interdependent groups, usually consumers and producers. In order to make these exchanges happen, platforms harness and create large, scalable networks of users and resources that can be accessed on demand. Platforms create communities and markets with network effects that allow users to interact and transact. Our new business is not only classified as Start-Up as defined by Eric Ries in his book The Lean Startup: How Constant Innovation Creates Radically Successful Businesses, but it also an institution designed to create a new product or service under conditions of extreme uncertainty and we will over the next few years be continually testing, tweaking, validating and innovating various concepts and strategies of our proposed business model.

When we compared Vue against some of its competitors, including Angular, React, Ember, Aurelia, etc., concluded that Vue beat them in some key aspects. These aspects include simple API, size, performance, learning curve, etc.

Pulling 2.x Templates (Legacy) #

Which for us, was fairly important. Our initial team comprised mainly of very talented Full-Stack Developers, which to be honest can be a bit of drawback, because the truth is although in theory, we should be experts in the entire web development stack the reality is most developers will have a tendency to specialize in a few key areas, because that is the area they particularly enjoy.

Design and UI aesthetics are not skills we have an abundance in! Vue requires Node.JS 8.9+ so you should ensure you have node installed. If you haven’t got node.js installed we recommend installing Node.js and making use of NVM (Node Version Manager)How to install NVM on UbuntuHow to install NVM on Mac OSX. The best and easiest way to make use of Vue in our opinion is by making use of the CLI (Command Line Interface). The CLI ( @vue/cli ) is a globally installed npm package and provides the vuecommand in your terminal.

It provides the ability to quickly scaffold a new project viavue create , or instantly prototype new ideas via vue serve . You can also manage your projects using a graphical user interface via vue ui. To install the vue-cli simply open a terminal window and execute.

Starting a new Vue Project is really easy using the CLI all you really need to do is open a terminal window, navigate to the directory where you store you code projects.

Using the GUI #

In our case we tend to create a folder in our home directory called “code”, so simply do:. Ensure to run either npm install or yarn install to install the dependencies. We can now edit our project files to make use of our MDB Vue Pro, the first step is to edit our main.js to look similar too.

Then all we have to do next is run the project npm serve our project is now making use of the MDB Vue Pro library. However, at this stage you will not notice much difference, but you are now ready to start making use of the Material Design components to develop your application.

We have explored how, why and when to use Vue in a new project and how to install the Vue-CLI to easily and quickly generate new projects. We also explored how to make use of Vue using WebStorm -The smartest JavaScript IDE to start developing Vue.JS projects.

We also explored how to make use of a Material Design Component Framework like MDB Vue Proto help speed up your Vue.js development. How to install and test nuget template packages locally - May 1, 2022. How to use the Strategy Pattern in C# - April 24, 2022. Book Review: API Design Patterns - April 19, 2022. To create a new project, run:. If you are on Windows using Git Bash with minTTY, the interactive prompts will not work.

You must launch the command as winpty vue.cmd create hello-world. If you however want to still use the vue create hello-world syntax, you can alias the command by adding the following line to your ~/.bashrc file. alias vue='winpty vue.cmd' You will need to restart your Git Bash terminal session to pull in the updated bashrc file. You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select "Manually select features" to pick the features you need.

The default setup is great for quickly prototyping a new project, while the manual setup provides more options that are likely needed for more production-oriented projects. If you chose to manually select features, at the end of the prompts you also have the option to save your selections as a preset so that you can reuse it in the future.

We will discuss presets and plugins in the next section. Saved presets will be stored in a JSON file named .vuerc in your user home directory. If you wish to modify saved presets / options, you can do so by editing this file. During the project creation process, you may also be prompted to select a preferred package manager, or use the Taobao npm registry mirror for faster dependency installation.

Your choices will also be saved in ~/.vuerc. The vue create command has a number of options and you can explore them all by running:. You can also create and manage projects using a graphical interface with the vue ui command:. The above command will open a browser window with a GUI that guides you through the project creation process.

Hello World

Vue CLI >= 3 uses the same vue binary, so it overwrites Vue CLI 2 (vue-cli). If you still need the legacy vue init functionality, you can install a global bridge:. I want to state upfront that this article is meant for beginner/intermediate Vue users as I’ve written a separate article for the basics of Vue.

In the beginner article, I explain the fundamental Vue properties, component composition, directives, a life cycle, methods. This article is demonstrates how to interact with components, routing, and state management.

Released in 2014, Vue.js is a lightweight front-end framework similar to React and Angular. React and Angular dominate the front-end framework market share. However, Vue is the fastest growing framework. Since Vue has a smaller ecosystem, Vue has fewer plugins and libraries. This also means there are fewer resolutions on stack exchange for Vue issues that you may encounter.

Summary

While Angular was created by Google and React was created by Facebook. Vue was created by Evan You (who previously worked with Angular at Google). He initially created Vue as a framework for prototyping.

Since Vue is not tethered to a corporate sponsor, Vue is dedicated to supporting its users. Vue’s core libraries and tools are supported by Vue such as Vuex (similar to Redux), Vue Router, Vue Devtools, and Vue CLI.

On the other hand, React relies on 3rd party libraries such as Redux, React-Router-DOM, etc.

Each Vue component has three sections: template (HTML), script (Vue properties), and style (CSS). The logic in the scripts are written in JavaScript so I would strong suggest you brush up on your JavaScript skills. Unlike React, which uses JSX for the view, Vue utilizes plain HTML which reduces the learning curve and makes it easier to port legacy apps made is HTML.

Similar to other front-end frameworks, Vue implements a component-based approach to create single page applications (SPA).

Like Angular, components are inserted into the view via an assigned HTML tag. As we know, making changes to the DOM is time-consuming.

Therefore, Vue creates a virtual DOM which mirrors the real DOM. Any time there is a change in the state, Vue tracks the difference between the new state and the old state.

This difference is applied to the real DOM. Vue implements two-way binding which is a connection between the data and the view.

How to start a new Vue Project

Whenever there are changes in the data, it will change the view. Additionally, changes in the view will cause changes in the data. Getting Started: In your command line, navigate to the folder you want to create your Vue project.

Install the Vue cli: The command below names the folder of our project “vue-cli”. Initialize a Vue project: Confirm the default settings by pressing enter for each configuration. Install the node modules:.

Start the development server on port: 8080. Understanding the Vue structure: The index.html file is being served by the development server.

Handle User Input

  • Within the index.html file, there is a
    .
  • In src/main.js, we create a new Vue instance with {el: ‘#app} with attaches the Vue instance to
    .
  • We also import App.vue (our home page) and set {render: h=>h(App)} which will render the App as our template.
  • App.vue is a component.
  • Each Vue component has three sections: template (HTML), script (Vue properties), and style (CSS).