Shulou(Shulou.com)06/01 Report--

This article shows you how to build a front-end separation framework in ASP.NET, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

I. Construction of project development environment

1. Install .NET Core

Unlike the previous .NET Framework, the .NET Core is no longer tightly coupled to the Windows system, so we can install our .NET Core development environment as software on the supported operating systems.

Open the download page of the official website (.NET Downloads) and find the .NET Core. Here, because we need to develop in the current environment, we need to install the .NET Core SDK. After the download is complete, you can go all the way to Next.

When we have completed the installation, open the console and enter the command, which will show the version of .NET Core that we installed locally.

one

Dotnet-- info # # or use dotnet-- version to view the version of .NET Core installed on this machine

The .NET Core CLI is provided to us in the .NET Core to enable us to use the command line to create our .NET Core application. Here we still use VS to create our application. If you are interested, you can take a look at this article in the garden = ".NET Core dotnet Command Collection."

2. Install Node.js & Vue CLI

In the construction of the whole front-end separation project, the front-end Vue project is a scaffolding project built using Vue CLI 3, while Vue CLI is essentially a globally installed npm package, which can provide us with vue commands in the terminal by installing this npm package, so the premise that we need to use this scaffolding tool is that we need to install the Node.js environment.

Open the Node.js official website (Node.js), select the long-term supported version to download, and then go all the way to Next. Npm is already included in the current Node.js installation package, so we can just install Node.js. Npm can be compared to the Nuget of our .NET platform. By default, the global components and cache we install are under C:\ Users\ user name\ AppData\ Roaming. If you want to modify the cached address or the globally installed package address, you need to configure the environment yourself. For more information, please see the Windows section on Node.js installation and environment configuration.

PS:Vue CLI 3 requires Node.js 8.9 or later (8.11.0 + is recommended).

one

two

three

Npm uninstall vue-cli-g # # Uninstall vue-cli (1.x or 2.x)

Node-v # # View the installed version of Node

Npm-v # # View the installed version of npm

When the Node environment is installed, we can install the Vue CLI 3 scaffolding tool. If you have previously installed the old version of vue-cli (1.x or 2.x) globally, you need to uninstall the old version of Vue CLI first.

one

two

Npm uninstall vue-cli-g # # Uninstall vue-cli (1.x or 2.x)

Npm install-g @ vue/cli

After installation, we can use the vue command on the command line.

one

two

Vue # # View vue related help information

Vue-- version # # View the installed vue cli version information

3. Install Git

It is necessary to add version control to the code, it can record your every operation in detail, and when you make an environmental error caused by a death, you can quickly restore the environment. Often make a gesture of death, this great need.

Git as a distributed version control system, different from the centralized version control system like SVN, our local warehouse contains not only our code, but also everyone's operation history log of the code, while the history of operation of SVN only exists in the central warehouse.

What's the advantage of this? If one day the central warehouse goes wrong and needs to be recreated, because our local code does not contain the operation history log, you can only relocate the code to the central warehouse, and the historical version of the file is lost. If we use Git for version control, because our local warehouse is a complete warehouse with historical operations, we can rebuild a central warehouse without difference.

For tutorials on Git, you can take a look at this series of tutorials written by Liao Xuefeng = "Git tutorials"

Open the Git official website (Git) to download the installation package and install it, and you can Next all the way. After the installation is completed, the Git Bash application appears in the start menu, which means that our Git has been installed successfully. After installing Git, we need to set our name and Email to indicate our identity, and we can use the Git Bash setting here.

one

two

Git config-- global user.name "Your Name" # # Global setting user name

Git config-- global user.email "email@example.com" # # globally set mailbox

Second, apply the overall framework to build

When we have installed the project development environment, we can build our project framework. Here I choose to put the front and rear projects into the same Git warehouse, or you can put them into multiple Git repositories as you like.

Create a new folder as the repository, open Git Bash under the created folder path, and initialize our repository. If you check Show Hidden folder, you will find that after we have executed the initialization command, we will create a .git folder under the current folder.

one

Git init

Of course, you can also use VS to create Git repositories. Using VS to create repositories will automatically create .gitignore and .gitattributes files for us. Similarly, we can also do any subsequent Git operations on that repository through VS.

Gitignore files represent files or directories that we need to ignore, while gitattribute is used to set the comparison of non-text files. Here, the gitignore files generated after we use VS to create Git repositories will add files and directories that need to be ignored for .NET projects by default. Because I used VS Code to develop the front-end project, here, I need to add some VS Code-generated files to the gitignore file.

one

two

three

four

five

.vscode / *

! .vscode / settings.json

! .vscode / tasks.json

! .vscode / launch.json

! .vscode / extensions.json

The specific process of creating ASP.NET Core Web API will not be demonstrated. Here we use the basic multi-tier architecture. After we have created the project, we can see that the pencil icon in the lower right corner of VS will show the changes we have not submitted. Click icon, enter our submission information, and then submit our changes to the warehouse.

Now that the back-end API interface application is created, let's use Vue CLI to build our front-end Vue project. Here, I chose to create our front-end project in the root directory of the solution.

In Vue CLI 3, we can not only use the vue create command to create our project, but also use graphical pages to create our application.

one

two

Vue create project-name # # create using the command line format

Vue ui # # create it graphically

When you use the vue ui command, you will automatically open the page to create the project. You can see that the project has not been created under this path. You can choose to import it from another path, or create a new project directly. If you have used a previous version of Vue CLI, you will get an error when creating a project using uppercase letters, but this problem does not occur in the Vue CLI 3 version.

Because I put the front-end project and the back-end project in the same repository, there is no need to initialize the git repository, and the default configuration is used for the project configuration. Click create and our project will be built automatically. How to start this scaffolding project, you can follow the steps in the generated README file.

At this point, the basic Vue scaffolding project has been built, and for things like adding plug-ins, put them in the rest of us. In addition, although we did not check the initialization of the Git repository when we created the project, Vue CLI still created a gitignore file. If you, like me, put the front and back project in a repository, you can copy the contents of this file to the gitignore file in the project root directory, and then delete this file.

Appendix

Microsoft officially provides a set of SPA application templates for Vue, but it is not shown on the page where we created the project using VS, and we need to add a plug-in and create it using the .NET Core CLI. Because I do not have a detailed understanding of the content of this piece, here is only a list of the creation method, please see the Microsoft official documentation (Building Single Page Applications on ASP.NET Core with JavaScriptServices) for a detailed description.

one

two

# # installing SPA template

Dotnet new-install Microsoft.AspNetCore.SpaTemplates::*

When you have installed the template, you can see that there are more options for creating SPA templates using Aurelia, Vue, and Knockout, so we can use the dotnet new command to create template applications that contain Vue. After the template is created, you need to install the dependent package. After loading the dependent packages, we can debug our project through VS or VS Code development.

one

two

Dotnet new vue # # create a Vue SPA project

Npm install # # restore dependent npm packages

The above is how to build a front-end separation framework in ASP.NET. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.