Modified1 year, 10 months ago. Here is my vue.config.js file:. With this config, vue.js (Vue) library is excluded and I can link it from a CDN. But core-js is packed anyway and not recognized as an external library. What is wrong with my config? 22 gold badges2222 silver badges4141 bronze badges.
4141 bronze badges. You need to change babel config. Here is my babel.config.js:. 4141 bronze badges.
Put the client app in a separate project, outside from the ASP.NET Core project. Create the client project based on the framework CLI installed on your computer. Currently, the front-end project must be published manually (not currently supported with the Publish tool). For additional information, see https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135.
|Objective:||To setup a local Vue development environment, create a starter app, and understand the basics of how it works.|
Visual Studio 2022 Preview 2 or later with the ASP.NET and web development workload installed. Go to the Visual Studio downloads page to install it for free.If you need to install the workload and already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer.
vue.config.json (modified). HelloWorld.vue (modified). package.json (modified). In Solution Explorer, right-click the solution name, hover over Add, and then select New Project. Search and select the ASP.NET Core Web API project. Give your project and solution a name. When you get to the Additional information window, select .NET 6.0 as your target framework.
Once the project is created, Solution Explorer should look like this:. Open launchSettings.json from the Properties folder, and under the profiles section for the backend app, change the default ports to 5001 and 5003. In Solution Explorer, right-click the ASP.NET Core project and choose Properties.
Go to the Debug menu and select Open debug launch profiles UI option. Clear the Launch browser option. Currently, launch.json must be located under the .vscode folder. Right-click the solution and select Set Startup Project. Change the startup project from Single startup project to Multiple startup projects. Select Start for each project’s action. Next, select the backend project and move it above the frontend, so that it starts up first.
Initializing a new project
Before you start the project, make sure that the port numbers match. Go to the launchSettings.json file in your ASP.NET Core project (in the Properties folder).
- Get the port number from the applicationUrl property. If there are multiple applicationUrl properties, look for one using an https endpoint.
- It should look similar to https://localhost:5001. Then, go to the vue.config.js file for your Vue project.
- Update the target property to match the applicationUrl property in launchSettings.json. When you update it, that value should look similar to this:. To start the project, press F5 or select the Start button at the top of the window. You will see two command prompts appear:.
- The ASP.NET Core API project running. The Vue CLI running the vue-cli-service serve command. Check console output for messages, such as a message instructing you to update your version of Node.js.
- In the Solution properties, set your backend app as the startup project. In the Debug menu, switch the profile using the Start button drop-down menu to the profile for your backend app.
- Next, in the Solution properties, reset to multiple startup projects.
- Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type y , otherwise type n .
The CLI will now begin scaffolding out your project, and installing all of your dependencies.
If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag
--packageManager=, when you run
vue create. So if you wanted to create the
moz-todo-vue project with npm and you'd previously chosen yarn, you'd run
vue create moz-todo-vue --packageManager=npm.
Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.
If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:
.eslintrc.js: This is a config file for ESLint. You can use this to manage your linting rules.
.browserslistrc: This is a config for Browserslist. You can use this to control which browsers your tooling optimizes for.
public: This directory contains static assets that are published, but not processed by Webpack during build (with one exception;
index.htmlgets some processing).
favicon.ico: This is the favicon for your app. Currently, it's the Vue logo.
index.html: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
Note: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.
src: This directory contains the core of your Vue app.
main.js: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the
index.htmlfile your app should be attached to. This file is often where you register global components or additional Vue libraries.
App.vue: this is the top-level component in your Vue app. See below for more explanation of Vue components.
components: this directory is where you keep your components. Currently, it just has one example component.
assets: this directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like Sass/SCSS or Stylus.
Note: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a
.vue files (single file components)
Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.
While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in
.vue. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.
As a bonus, projects created with the Vue CLI are configured to use
.vue files with Webpack out of the box. In fact, if you look inside the
src folder in the project we created with the CLI, you'll see your first
Let's explore this now.
App.vue file — you'll see that it has three parts:
, which contain the component's template, scripting, and styling information. All Single File Components share this same basic structure.
contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.
Note: By setting the
lang attribute on the
tag, you can use Pug template syntax instead of standard HTML —
. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.
contains all of the non-display logic of your component. Most importantly, your
tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a
In the case of
App.vue, our default export sets the name of the component to
App and registers the
HelloWorld component by adding it into the
components property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.
Note: If you want to use TypeScript syntax, you need to set the
lang attribute on the
tag to signify to the compiler that you're using TypeScript —
is where you write your CSS for the component. If you add a
scoped attribute —
— Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.
Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a
lang attribute to the
tag so that the contents can be processed by Webpack at build time. For example,
will allow you to use SCSS syntax in your styling information.
Running the app locally
The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a
serve command to the project's
package.json file as an npm script, so you can easily run it.
In your terminal, try running
npm run serve (or
yarn serve if you prefer yarn). Your terminal should output something like the following:
If you navigate to the "local" address in a new browser tab (this should be something like
http://localhost:8080 as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.
Making a couple of changes
Let's make our first change to the app — we'll delete the Vue logo. Open the
App.vue file, and delete the
element from the template section:
If your server is still running, you should see the logo removed from the rendered site almost instantly. Let's also remove the
HelloWorld component from our template.
First of all delete this line:
If you save your
App.vue file now, the rendered app will throw an error because we've registered the component but are not using it. We also need to remove the lines from inside the
element that import and register the component:
Delete these lines now:
Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside
Let's add a new Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes. With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos. In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.
App.vue will now show our heading, as you'd expect.
In this module
Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.
With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.
In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.