This article is compiled and supplemented by referring to other articles. To read the original text, please check: Shangpinhui Project Notes_Crying Caterpillar Blog-CSDN Blog_Shangpinhui Project

1. Vue file directory

public folder: static resources, which will be packaged into the dist folder intact when webpack packs them.

pubilc/index.html is a template file, which is used to generate the entry file of the project, and the js and css packaged by webpack will also be automatically injected into the page. When our browser accesses the project, it will open the generated index.html by default.
src folder

1.assets:存放公用的静态资源
2.componets:存放非路由组件(全局组件),其他组件放在views文件夹中,路由组件放入pages文件夹中
3.App.vue:唯一的根组件
4.main js:项目入口文件,最先执行的文件

babel.config.js : configuration file (babel-related)
package.json : detailed information record of the project
package-lock.json : cache file (source of various packages)

2. Project configuration

2.1 The project runs and the browser opens automatically

package.json
    "scripts": {
    "serve": "vue-cli-service serve --open", //--open自动打开
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
    },


//或者在vue.config.js文件中设置
module.exports = {
  open:true
  }

2.2 Close the eslint verification tool (If you don't close the annoying code specification, you will report an error if you don't follow the specification)

Create a vue.config.js file in the root directory

module.exports = {
  //关闭eslint
  lintOnSave: false
  }

3. Component page style

The style of the component page uses the less style, and the browser does not recognize the style, so you need to download the relevant dependencies. If you want the component to recognize the less style, set it in the component
npm install --save less less-loader@5

<script scoped lang="less">

4. Clear the default style of the vue page

Vue is a single-page development, we only need to modify the index.html file under the public, and introduce the css file of the clear style

<link rel="stylesheet" href="reset.css">

5. The pages folder

Create pages folder, and create routing component
5.1 Create router folder, and create index.js for routing configuration, and finally introduce registration in main.js

5.2 Summary
The difference between routing components and non-routing components:

Non-routing components are placed in components, and routing components are placed in pages or views
Non-routing components are used through labels, and routed components are used through routes
Register and play routing in main.js, all routing and non-routing components will have $router $route attributes
$router: general programmatic navigation for routing jumps
$route: general access to routing information (name path params, etc.)

5.3 Routing jump mode

Declarative navigation router-link tag, router-link can be understood as a tag, it can also be modified by class
Programmatic navigation: declarative navigation can do what programmatic can do, and it can also handle some business

E-commerce project Shangpinhui study notes