Separation from the front and back end [Vue2.0+.net Core2.1] 21 ║vue actual combat: development environment to build "detailed version"

Origin

Hello everybody, go for a spin turn finally came to the Vue real-time, the front of the 6 articles about Vue Basic article I just see, feel write or not ah, not very system, so we may look more tired, or have to take time to embellish, modify the statement and style, at least to have to live fan ha, Blog Park should give a small suggestion, if you can allow friends or other people to modify the function of the article, such as the encyclopedia and wiki kind of good haha, today, finally to a chapter of the installation environment, the online chestnut and documents are many, originally intended to skip this chapter, but think, This series still need this piece to perfect, this is the whole tutorial well, good, nonsense say, ready for computer installation!

Today's main task is to configure the development environment, will not involve the code, will be flat out, relatively simple, just to do a record use, mainly by the following aspects:

A: Install Ide--webstorm/vscode/atom

B: Install NODEJS Environment

C: Install NPM/CNPM

D: Install Git

E: Install Webpack

F: Installation of VUE-CLI Scaffolding

G: Create Blogvue Project

H: Brief description of the overall project document

All right, start the show today.

0, today to complete the lower left corner RedPart of

A, Vue Common ide--I'm a development tool, I'm the one working.

A good tool to start saving too much time, increase efficiency, so as to achieve a multiplier effect, as a. NET siege lion, I almost every day in Visual Studio, this claims to be a cosmic editor, of course, there are a lot of great gods now say that developers use a node++ on the line , ah ~ ~ ~ to tell the truth to disagree, such as today is also anxious to write a few pages, but not smart tips, really slow a lot. Today, to say the development of VUE tools, here is the simple next three kinds of common development tools, everyone can try, according to personal interests (I asked a few Vue developed friends, commonly used is sublime, then now seems like Vscode and Webstrorm more, The rest is atom, this series is Webstorm).

1, Vscode

installation address : Code.visualstudio.com/download

Recommended Advantages : 1, as Microsoft's big product, cough, or compare to force, I work at Microsoft, see a lot of people in order to Visual Studio development, even a small group of pieces are better, like;

2, the first start of the initial initialization particularly fast, claiming to be the fastest, if the computer is relatively low, recommended use;

3, Microsoft This two years in the open source Road mountain more and more to force , so vscode of course also open source, and Yan value is also can, at least than webstorm beautiful one lost;

4, Yu Yuxi greatly a year ago was also very recommended, do not know whether there is no change good;

5, a variety of plug-in installation, the use of a lot of plug-ins are very rich;

6, Support breakpoint debugging debug, is also very hi;

2, Webstorm

installation Address : www.jetbrains.com/webstorm/download/#section =windows

Recommended Advantages : 1, only code completion, for different browsers, but also support the basic popular library jquery, YUI, Dojo, Prototype, Mootools and Bindows.

2, can format code, can also be customized, as obsessive-compulsive disorder, I have to code neat is good code haha;

3, intelligent hints, Lenovo query, can be like VS, Ctrl + mouse click, you can jump to the definition;

4, code inspection and repair, can prompt the location of the error, quickly solve;

5, the latest version has inherited Vode plug-in, you can start the interface service, compile, packaging and so on, no longer have to write command line;

6. Nodejs the best development tool, not one. As long as you will use Chrome debugging browser side of JS, then you will use Webstorm debug Nodejs.

7, simple and easy to operate version control, as long as you simple configuration git or SVN can use shortcut keys to quickly version control

8, real-time preservation, do not have to press Ctrl+s frequently

Diss disadvantage : From the above function can also be seen, vscode focus on open source, fast and community, these webstorm are wood has

1, start slowly, memory occupy large (300m+), if again with WebSocket, low-profile notebook began to sing [Cry laugh];

2, is the charge drops, really very expensive, only one months of free use, but there are policies under the policy, various serial numbers, crack and so never stopped;

3, the style is not very good, although there are many themes, belong to the focus on functional players.

3. Atom

installation address : atom.io/

Recommended Advantages : 1, do not say anything, on this Yan value, you have to add points haha, there are various themes;

2, Atom is the largest open source Web site GitHub out, the basic functions and values are online, plug-in quality is very high;

3, strong community backing, for programmer development to provide benefits, especially the front-end programmers;

4, of course, there are a lot of advantages, is open source free, want to use anything can;

cons : 1, or a little will lag, but the official is slowly optimizing, I believe that GitHub will gradually increase investment;

Summary: Well ... Not too well, you can think about it, but perhaps in a comprehensive way, vscode may be cost-effective, webstorm function deep, atom open-source beauty value.

B, installation Nodejs environment-I am the operating environment, no I can't

node. JS is a JAVASCRIPT runtime environment based on the Chrome V8 engine.
node. JS uses an event-driven, non-blocking I/O model to make it lightweight and efficient.
node. JS's Package Manager, NPM, is the world's largest open source library ecosystem.

installation Address : official website nodejs.org/en/download/

Domestic http://nodejs.cn/download/

Then the normal installation, step by step next can be

After the installation is successful, open our installation path and we can see that in addition to node, there is npm in the folder, which is installed together

Let's talk about NPM here, let's see if node is installed successfully, open CMD Command window, enter node- v

At this point, you can see the version number of node, which proves that we have successfully installed it and that it is global.

C, install npm/cnpm--I am the package manager, I want all to take

First of all, we can not directly up on the installation is it, have to understand the meaning of it, why to install,

The origin of NPM name: Node Package Manager (manager), from the name it is through Node's package manager, well probably understand, that specifically, it seems unclear, this time we say a chestnut 1,

We usually develop C # time, need to install the package, I installed, is through the NuGet package management to install, yes, NPM has played this role, but is the front end of node needs to use the package. If it's still not clear, let's say a front-end Chestnut 2,

Usually when we start jquery, we need to quote Jquery.js file Yes, this two is OK, if more than the whole, one by one manually add inconvenient Ah, hey! This time someone thought of the way, with JavaScript (running on node. js) to write NPM, to control the package has been submitted to the remote warehouse, these packages are published by the original author, a name, if we use, only need to Packbag.json, Write the name, eh! On the success from the remote down, is not very convenient, is not the feeling of the front-end slowly engineering!

Say so much, then how to install it, do not panic! We also said that NPM is running on node. js, so we've just installed node. JS and we've installed it.

In the cmd Command window, enter Npm-v, and you will see the version you have installed.

Then began to use very happy, but the class, later found that the remote warehouse is in foreign countries, each need FQ, sometimes one hundred or two hundred trillion of documents, need to wait a long time, more serious also card to half, hanging off, hey, really mulberry heart, ah! Foreign has the big God, the domestic also has the boss, is right, has been focused on the development of the Ali Siege Lions, their own according to NPM, set up a domestic mirror, basically the content is similar, although claimed to have been in sync, but sometimes the command is still some problems, but the basic is no problem, if you can not FQ, If the computer is very card, no problem! When you're relieved, it's cnpm!. How to install it?

We've just been able to install NPM, and then we execute the command.

NPM install-g cnpm--registry=https://registry.npm.taobao.org

The installation is complete. Later, any NPM command, can use CNPM to write, such as below, it is so simple!

NPM  Run dev// Regular version // mirrored version

D, install git--I come to simplify the cmd operation, can not use my

Here to say why install git, because in the future development, will involve a variety of service Ah, release AH and so on, and all need to enter different items of different folder operations, commonly used is the following three operations:

1, through the cmd command line, into different folders, such as: CD D:\Program Files\nodejs, and then into different folders, in case of not optimistic about the formation of the wrong, the trouble, so we need tools.

2, through the power shell to execute, do not know this tool, you can Baidu, the current win10 comes with, it is very simple to use, in the current folder, first press the SHIFT key, and then click the right mouse button, it bounced out,

Then execute the command also can drip, is not very convenient, of course, can also use the next one.

3, through the Git method, Git-scm.com/downloads, and then the common installation success, you can see in the Git Bash here, is directly into the current folder address, and then you can operate it.

Summary: It is necessary, safe and reliable to assist with the development of certain tools.

E, install webpack--I'm packing things.

Or the same old thing, let's talk about what is webpack, here to say Webpack, that first of all to say the SPA

What is Spa

This name, always let everyone think of other haha, to the point, now the Web site is slowly front-end, at the beginning of VUE I also said, about my development process, to simply say the development of the web under the "14 ║vue plan & My Back-end development history," concluded , more and more JS, from the full page refresh, to the local refresh, to the current spa (single page application)--that is, the entire project is a page, through the anchor point routing, all the components together to look like multiple pages. So let's think about it, now that the entire Web application is fused into a page, a huge code base needs to be well controlled and organized, not to be confused, this time in order to solve this problem, there is the idea of modular programming.

The problem of traditional front-end development

If it's not clear at this time, let's raise a chestnut:

Everyone in the development of the time will encounter this problem, my project is developed with the bootstrap framework, but, suddenly the leader saw Easyui one of the components or a small plug-in, this time, we will directly put Easyui style to introduce,

<link href="Maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"Rel="stylesheet">//introduced the Eeayui style<link rel="stylesheet"Type="Text/css"href=".. /resource/js/jquery-easyui-1.5/themes/default/easyui.css"/><link rel="stylesheet"Type="Text/css"href=".. /resource/js/jquery-easyui-1.5/themes/icon.css"/>

This time, should have been very beginning to see the results, found a lot of places are in conflict, the amount. Embarrassed Ah, of course, the normal project is not so developed, are their front-end engineers wrote, here is just a negative example, this is probably the meaning, of course, there are JS file references, such as

<script src="module111.js"></script><script src="  Module222.js"></script><script src="libraryabc.js">< /script><script src="module333.js"></script>

The module interface is exported to the global object, which is the window object. The interface of the module can access the dependencies of the global object, which can be seen from the problem above

Global conflict
Heavily dependent on the order of loading
Developers must manually resolve module/library dependencies
Large projects, script.js can be very long and difficult to manage

CommonJs: Synchronous loading appears

This style uses a synchronous require method to load a dependency and expose an interface. A module can specify an export export by adding properties to an object or module.exports setting values.

Require ("module"); require (".. /file.js"== somevalue;

This is the standard used by node. js on the server side. 1. Server-side modules can be reused 2. There are already many modules in this style (NPM). Eco-Circle Good 3. Very simple and easy to use.

What is webpack and why use it

Webpack is a module wrapper. Webpack can be seen as a module Packer : What it does is analyze your project structure, find JavaScript modules, and other language extensions (Scss,typescript, etc.) that can't be run directly by browsers. and package it in the appropriate format for use by your browser. Webpack Packages the module (s) together with its dependencies to generate static resources that contain these modules. the existing Module packager is not suitable for large project (large single page application) programs. The urgent need for code segmentation and the seamless modularity of static resources has spawned a new module packager. I tried to extend the existing Module packager, but it failed to achieve all the goals.

1. Split the dependency tree into chunks to enable on-demand loading.

2. Keep the initial load time low

3. Each static resource can be a module

4. Ability to set third-party libraries as modules

5. Features that each part of the packager can be customized almost.

6. Suitable for large projects.

Install : Execute NPM command directly

NPM Install Webpack-g

At this time, our Webpack has been installed and can be used later.

F: Installation of VUE-CLI Scaffolding-I am the one used to create the project template

VUE-CLI is vue.js scaffolding, used to automatically generate Vue.js+webpack project template, scaffolding Everyone must know, is a shelf, used to build the whole basic skeleton of the project, there is a little meaning, such as when we develop. NET, We can actually build our own MVC step-by-step, but instead, we encapsulate the MVC framework, and we directly generate the overall framework, including the basic package and some necessary folders, Vue-cli.

Global Installation : Direct input of NPM commands

NPM Install--global VUE-CLI

After the installation is complete, we enter vue-v (here is big V), see version number, it proves that the installation is successful, now is 3.0 scaffolding, the resulting folder and 2.0 of different, we will say a moment.

G: Create a Blogvue project first, talk about 2.0 the process of creating the project

1. After entering the specified folder, execute

Vue Init webpack Blogvue

2, then is a series of selection process

Then just wait and see that it's done. Then go to the project folder and execute NPM run dev to start the

So it started up.

Second, and then we'll talk about the next 3.0. Create the Engineering process

First execute the next command npm i-g @vue/CLI upgrade to 3.0 (Note Administrator privileges)

Once installed, start creating our project Vue Create Project-name

Here are two ways to do it: default mode and manual mode

The default way is to install Babel and Eslint, consistent Enter key down is, because do not need so much, so I chose to manually, here, many people do not know how to make a choice for the first time-use the mouse up and down keys to operate, and then enter to select, then the plug-in list will appear, Also use the upper and lower keys, and then use the space bar to select, the bottom of the motion diagram.

Select the configuration to install

Here is the meaning of the following:

Babel: A JavaScript translator, the latest version of the JS syntax (ES6, ES7) to the current browser can be compatible with the JS code

Typescript: Functions are somewhat similar to Babel, with type checking capabilities and object-oriented new features.

PWA: Progressive Web App

Router: Routing, setting URLs, making different URLs display different pages

Vuex: Acts like a global object, but not exactly the same.

CSS PRE-PROCESSORS:CSS Preprocessor

Linter/formatter: Code Specification Standard

Unit Testing: Units test

E2E testing:e2e Test

Next, choose CSS Preprocessing, here I choose stylus

default ):  SCSS/SASS  less > Stylus

CSS preprocessor defines a new language, the basic idea is, with a special programming language, for the CSS to add some programming features, CSS as a target to generate files, and then developers just use this language to encode work. In layman's terms, CSS preprocessing uses a specialized programming language for Web page style design, and then compiles the normal CSS file for use by the project. CSS preprocessor adds some programming features to CSS, regardless of browser compatibility issues, such as you can use variables in CSS, simple logic programs, functions and so on in the programming language of some basic features, you can make your CSS more concise, more adaptable, more readable, It is easier to maintain code and many other benefits.

Here's stylus: from the node. JS community, which is used primarily for CSS preprocessing support for node projects, but not as sass and less in use.

Then select Format Configuration

Choose when to check code specifications-When saving

Select, <a> to toggle all, <i> to Invert selection)> (*) Lint on Save () Lint and fix On commit

Select the storage address of the configuration

 Do  for Babel, Postcss, ESLint, etc.? (use arrow keys) // stand-alone file storage  In Package.json//  Package.json file

Then whether to save the above configuration (after saving, the next time will be able to directly configure a key)

 This  as  for the future projects? (y/n)

That's what happens next time you install it.

The next step is to install, wait ...

H: Brief description of the overall project document (finishing) 1, 2.0 The overall project structure is like this

├──readme.md//Project Description Document├──node_modules//Project Dependency Package folder├──build//compile the configuration file, usually without tube│├──build.js│├──check-Versions.js│├──dev-Client.js│├──dev-Server.js│├──utils.js│├──vue-Loader.conf.js│├──webpack.Base. Conf.js│├──webpack.dev.conf.js│└──webpack.prod.conf.js├──config//Project Basic Settings Folder│├──dev.env.js//Development configuration File│├──index.js//Configuring the primary file│└──prod.env.js//compiling the configuration file├──index.html//Project Entry File├──package-Lock. JSON//NPM5 Add files to optimize performance├──package.json//Project Dependency Package configuration file├──src//source code documentation for our projects│├──app.vue//App Entry File│├──assets//Initial Project Resource directory, back to delete││└──logo.png│├──components//Component Catalog││└──hello.vue//test the component and remove it later│├──main.js//Master configuration file│└──router//Routing Configuration Folder│└──index.js//Routing configuration file└──Static                          //Resource Placement Directory└──test//unit test files for our project

2, 3.0 of the overall project made a great adjustment, without the build and config

├── Public                       　　  　     //Project Public Folder│└──favicon.ico//project configuration file│└──index.html//Project Entry File├──src//source code documentation for our projects│├──assets//base Style Storage directory││└──logo.png//Base picture File│├──components//Component Storage Directory││└──helloworld.vue//HelloWorld Components│├──views//View Storage Directory││├──about.vue//About page││└──home.vue//Home Page│└──app.vue//App Entry File│└──main.js//Master configuration file│└──router.js//Routing configuration file│└──store.js//Vuex Store configuration file├──tests//Test Folder│├──unit//Unit Test││├──.eslintrc//Base picture File││└──helloworld.spec.js└──babel.config.js//Babel configuration file└──package.json//Project Dependency Package configuration file└──package-Lock. JSON//NPM5 Add files to optimize performance└──postcss.config.js//└──readme.md//Description Document

I, conclusion

OK, today's installation is here, of course, there are some tips I have not said, finally appeared in the legendary Hello World, next time we will start to formally build the project, Goodbye ~ ~ ~