Vue e-commerce project--detailed application development

vue-cli scaffolding initialization project

First, create a new folder on the page. Then open the command port

vue create app

 Select Default ([Vue 2] babel, eslint)

 Then drag and drop the project into vscode. Take a look at the project directory

The directory of the scaffolding project
node_modules: the place where the project depends on is placed
public: generally some shared static resources are placed, and when packaged and launched, the resources in the public folder are packaged into the dist folder intact and packaged into the dist folder
src: the programmer’s source code folder

assets folder: some static resources (pictures) are often placed, and the resources in the assets folder will be packaged into a module by webpack (in the js folder)

components folder: generally place non-routing components (or components shared by projects)

        App.vue's only root component
        main.js entry file [the first file executed by the program]
        babel.config.js: babel configuration file
        package.json: see project description, project dependencies, project operation instructions
        README.md: project description document 

Other configuration of the project

Configure the project downloaded from the scaffolding a little bit

browser opens automatically

in the package.json file

"scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

Just add an open , it does open automatically

Close the eslint verification tool

Create a vue.config.js file: it needs to be exposed to the outside world

module.exports = {
   lintOnSave:false,
}

Setting the alias of the src folder

Because when the project is large, src (source code folder): there will be many directories inside, and it is not convenient to find files. The advantage of setting the alias of the src folder is that it will be more convenient to find files

@ represents the src folder, so there will be too many files in the future, and it will be much more convenient to find

Create jsconfig.json file

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

The new version has been configured for us