<>《Vue.js Project development practice 》 Study notes
* MVC,MVP and MVVM Are common software architecture design patterns .
* SPA It's an architectural concept , Single page Web application (single-page application Referred to as SPA) It's a special way Web application .
*
Restful As a software architecture style , It's design style, not standard , It only provides a set of design principles and constraints , It is mainly used for client and server interaction software . The software designed based on this style can be more concise , More level , It's easier to implement caching mechanism .
* Vue.js+vue-router
It's very easy to create a single page in the form of , use Vue.js, You can build applications by combining components , When developers will vue-router After adding , All you need to do is map the component to the route , Then tell me vue-router Where to render them .
<>< One > front end
<> One ． adopt CLI Building applications quickly
<> Related concepts ：
Vue CLI It's based on Vue.js Complete system for rapid development , provide ：
* adopt @vue/cli Build interactive project scaffolding .
* adopt @vue/cli + @vue/cli-service-global Start zero configuration prototyping quickly .
* A runtime dependency (@vue/cli-service), The dependence ：
* Upgradeable ;
* be based on webpack structure , With reasonable default configuration ;
* It can be configured through the configuration file in the project ;
* It can be extended through plug-ins .
* A rich collection of official plug-ins , Integrates the best tools in the front end ecosystem .
* A complete set of graphical creation and management Vue.js User interface of the project .
CLI (@vue/cli) Is a global installation npm package , Provides the information in the terminal vue command .
<> Project creation steps ：
* Open the command line , input ：Vue init webpack projectName
（ The command line will let you choose some items to set , As follows ）
* Enter the new project folder Open the command line input npm install
* Input command line , Project run code npm run dev
* Install network request module npm install vue-resource -save
* And in routers\index.js Introduce and register the component through the following code ：
Import VueResource from ‘vue-resource’ Vue.use(VueResource)
That's it , Just build one Vue project , The following is a detailed explanation of some relevant knowledge in the project .
<> Two ． Project document description ：
* main.js It's our entry file , The main function is initialization vue Instance and use the required plug-ins
* App.vue It's the main component outside , All pages are in App.vue Switch under . In fact, you can also understand that all routes are the same App.vue Subcomponents of .
vue cli Operation principle of Engineering in development environment ：
main.js Is the entry file for the project , Defined vue example , And introduce the root component app.vue, Mount it to index.html in id by ‘app’ On the node of
<> Three ． Knowledge of project page and component writing ：
（ In which files to write page code , What are the common component codes , And how to connect them ）
Analysis with a project
*
This is a problem vue Project directory ：
（ explain ： among src Under the directory ,pages There are page files under the folder ,components The folder contains the sub components of the page file ,router There are routing files under the folder ）
*
Next look router Route file in index.js
① Look at the beginning first ：
（ explain ： Pass at the beginning import join pages Each page component file written in the folder , router Only page files will be introduced in , The sub file of the page is not imported ）
② Let's look at the part routes The contents of the array ,
（
explain ： Where the path The value is in the user browser when accessing the page url The string at the end of the box ,component The value is the same as when adding the page component file above import The corresponding name after , It's not a sub component used by the page . Used to specify that a user accesses a url The corresponding page is accessed when the .
）
*
Look again pages A page file in a folder ：（ as sendEmail.vue file ） The code is as follows ：
① Look first html code ：
（ explain ： By using subcomponents , adopt :A=“B” To pass data to subcomponents , among A Is in the subcomponent props Declared data , and B It's in pages in data Function and .）
② Look again script In the code ：
（ explain ： adopt import Introduce the subcomponents to be used in the page ）
③ Look again export default {}：
（ explain ： stay components in , Describe the subcomponents to be used , The value is above import Name after import .）
④ In addition, in created（） Function is used to get data from the server :
*
Finally, take a look at the above mentioned page file sendEmail A subcomponent used in ：（ With subcomponents EmailList.vue take as an example ）
（ explain ： Subcomponents in export default Zhongzai props Array to declare the data passed from the parent component , and v-bind Assign values to related properties or use them directly ）
<>< Two > back-end
<> One ． New project ：
* npm i -g express
* express book_service
* cd book_service
* npm install
* SET DEBUG=book-service:* & npm start
<> Two ． Some useful tools ：
* A test HTTP Requested Postman plug-in unit
* use Supervisor Modification of monitoring code
* install ：npm install -g supervisor
* start-up ：supervisor bin/www
<> Three ． Description of project structure
1. Project structure ：
（ explain ：routers The folder contains all the codes and routing contents of this project ,public Folder is the static resources related to this project ）
<> other . Some pits ：
1. use ivew report errors ：iView is not defined
Wrong cause ： Global references and local introductions cannot be used at the same time
Correct steps ：
* install npm install iview --save
* stay webpack Entry page main.js Add the following configuration to the ： （ Global reference ）
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
perhaps ：（ Here are on-demand references ）
With plug-ins babel-plugin-import You can load components on demand , Reduce file size .
* Install first npm install babel-plugin-import --save-dev
* And in the file .babelrc Medium configuration ：
{ "plugins": [["import", { "libraryName": "iview", "libraryDirectory":
"src/components" }]] }
* stay webpack Entry page main.js Add the following configuration to the ：
import { Button, Table } from 'iview'; Vue.component('Button', Button);
Vue.component('Table', Table);
Technology