Notes on Shangpin project in shangsilicon Valley (I)

                                

 

1:vue-cli Scaffolding initialization project .

node+webpack+ Taobao mirror

node_modules Folder ： Project dependent folders

public Folder ： Generally, some static resources are placed （ picture ）, We need to pay attention to , place public Static resources in folders ,webpack When packing , Will be packed intact to dist In the folder

src Folder （ Programmer source code folder ）：

assets Folder ： Generally, static resources are also placed （ Generally, static resources shared by multiple components are placed ）, We need to pay attention to , Put in asset Static resources in the folder , stay webpack When packing ,webpack Will treat static resources as a module , pack Js In the document .

    components Folder ： Generally, non routing components are placed （ Global components ）

    app.vue: The only root component ,Vue The components are .vue Components

    mian.js: Program entry file , It is also the first file to be executed in the whole program

babel.config.js: The configuration file （babel Related components ）

package.json file ： Think of it as a project ‘ Id card ’, Record what the project is called , What are the dependencies in the project , How the project works

package-lock.json: Cache file （ Previously, it relied on cache ）

README.md: Descriptive documents

2. Other configurations of the project

2.1 When the project runs , Let the browser automatically open

----package.json stay scripts Medium plus --open

"scripts": {

"serve": "vue-cli-service serve --open",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

2.2 eslint The verification function is off （ In case you think your code is wrong ）

---- In the root directory , Create a vue.config.js

such as ： Declare variables but do not use eslint The verification tool reports an error .

----vue.config.js

add ： // close eslint Tools

lintOnSave:false,

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

// close eslint Tools

lintOnSave:false,

})

2.3src Folder abbreviation , Configure aliases . @

jsconfig.json Configure aliases @ Tips 【@ It stands for src Folder , There will be too many files in the future , It's much easier to find 】

{

"compilerOptions":{

"baseUrl":"./",

"path":{

"@/\*":["src/"]

}

},

"exclude":["node_modules","dist"]

}

3. Project routing analysis

vue-router

The front end is called routing ：KV Key value pair

key:URL( The path in the address bar )

value: Corresponding routing components

Be careful ： Top, middle and bottom of the project

Routing component ：

Home Home page routing component ,Search Routing component 、login Login route 、Refister Registered routing

Non routing components ：

Header【 On the home page 、 The search page has 】

Footer 【 On the home page 、 Search page 】, But when you log in 、 There is no registration page

4. Complete the non routing component Header And Footer Business

In our project , No more with HTML+CSS Mainly , Mainly engaged in business 、 Logic

When developing a project ： 1. Write static pages （HTML+CSS） 2. Split components 3. Get the dynamic display of server data 4. Complete the corresponding dynamic business logic

Be careful 1： When you create a component , Component structure + Component style + Image resources

Be careful 2： Our project adopts less style , Browser does not recognize less style , Need to pass through less、less-loader( install 5 Version of ) To deal with , hold less Style changes to css style , To recognize

Be careful 3： If you want component identification less style , Need to be in style Add lang=less

4.1 Steps for using components （ Non routing components ） - Create or define - introduce - register - Use

5） Construction of routing components

vue-router

In the above analysis , The routing component should have four ：Home、Search、Login、Register

--components Folder ： Frequently placed non routing components （ Common global components ）

--pages|views Folder ： Often place routing components

5.1 Configure the routing

Instructions ：cnpm install --save [email protected]（ Version number 3 4 5）

The routes configured in the project are generally placed in router In the folder

5.2 summary

The difference between routing components and non routing components ？ 1. Routing components are generally placed in pages|views Folder , Non routing components are generally placed in components In the folder 2. It is generally necessary to router Register in folder （ Use is the name of the component ）, Non routing components are used in the form of labels

3. After registering the route , Whether it's a routing component 、 Or non routing components $route、$router attribute

$route: Generally get routing information 【 route 、query、params wait 】

$router: Generally, programmed navigation is used for route jump

5.3 Jump of route ？

There are two forms of route jump ：

Declarative navigation router-link, You can jump the route

Programming navigation push|replace, You can jump the route

Programming navigation ： What declarative navigation can do , Programming navigation can do

But programmed navigation can not only perform route jump , You can also do some other business logic

(6)Footer Display and hide of components

Show or hide components ：v-if|v-show

Footer Components ： stay Home、Search Show Footer Components

Footer Components ： In the login 、 Hidden during registration

6.1 We can according to the of the components $route Get the information of the current route , Judge by routing path Footer Show and hide .

<!--   <Footer

      v-show="$route.path == '/home' || $route.path == '/search'"

    ></Footer> -->

This inefficiency

6.2 When configuring routing , You can add route meta information to the route 【meta】, Routing requires configuration objects , its key You can't write nonsense 、 doodle 、 Scribble

routes: [

{

path: '/home',

component: Home,

meta: {

show: true

}

},

（8） Route parameters

8.1 There are several ways of route jump ？

such as ：A->B

Declarative navigation ：router-link( There must be to attribute ), Can realize the jump of routing

Programming navigation : Using the of component instances $router.push|replace Method , Can realize the jump of routing .（ You can write some of your own tasks ）

8.2： Route parameters , There are several ways to write parameters

params Parameters ： Part of the current path , We need to pay attention to , When configuring routes , Space occupation required

query Parameters ： Not part of the current path , Be similar to ajax Medium queryString /home?k=v&kv=, There is no need to occupy space

Route transfer parameters first close the face test questions

1: Routing parameters （ Object writing ）path Can it be combined params Parameters used together ?

Can not be ： You can't write like this , The program will collapse

2: How to specify params Parameters can be transferred or not ?

3:params Parameters can be passed or not , But if the pass is an empty string , How to solve ？

4: If specified name And params To configure , but params Chinese data is a "", Can't jump , The path will go wrong

5: Whether the routing component can deliver props data ?

Interview questions 1： Routing parameters （ Object writing ）path Can it be combined params Parameters used together

answer ： When routing jump passes parameters , The object can be written as name、path form , But here's the thing ,path This way of writing cannot be compared with params Use it together

this.$router.push({

path: '/search',

params: { keyword: this.keyword },

query: { k: this.keyword.toUpperCase() },

})

Interview questions 2: How to specify params Parameters can be transferred or not ?

such as ： When configuring routing , It's occupied （param Parameters ）, But when the route jumps, it will not be delivered

There will be problems with the path

If routing requires delivery params Parameters , But you just don't pass it on params Parameters , You will find a problem ,URL There will be problems.

How to specify params Parameters can be passed , Or parameters cannot be passed , When configuring routes , Add a... After the placeholder ?

{

path: '/search/:keyword?',

component: Search,

meta: {

show: true

},

name: "search"

},

this.$router.push({

name: 'search',

query: { k: this.keyword.toUpperCase() },

})

Interview questions 3:params Parameters can be passed or not , But if the pass is an empty string , How to solve ？

Use undefined solve ：params Parameters can be passed , Don't deliver （ Empty string ）

this.$router.push({

name: 'search',

params: { keyword: '' },

query: { k: this.keyword.toUpperCase() },

})

How to solve ?

this.$router.push({

name: 'search',

params: { keyword: '' ||undefined},

query: { k: this.keyword.toUpperCase() },

})

Interview questions 5: Whether the routing component can deliver props data ?

// Tolerable ： Three ways of writing

// Whether the routing component can deliver props data ？

// Boolean writing

// props: true,

// Object writing : In addition, some... Are passed to the routing component props

/_ props: {

a: 1,

b: 2

} _/

// Function writing , Sure params Parameters ,query Parameters , adopt props Pass to routing component

props: ($route) => {

return {keyword: $route.params.keyword, k: $route.query.k};

}