Create a simple instance code for adding, deleting, modifying, and querying from the vue base (recommended), and add and delete vue

Create a simple instance code for adding, deleting, modifying, and querying from the vue base (recommended), and add and delete vue

1. Installationvue-cli    cnpm install vue-cli -g-- Perform global installation

2. Create a basic webpack project. command:vue init webpack myproject;

The directory structure and description of the project are as follows:

Build is a webpack Configuration

Build. js // build code in the production environment

Check-versions.js // check node & npm and other versions

Utils. js // build and configure a public Tool

Vue-loader.conf.js // vue Loader

Webpack. base. conf. js // configure the Basic Environment of webpack

Webpack. dev. conf. js // configure the webpack Development Environment

Webpack. prod. conf. js // configure the webpack production environment

Config -- vue project configuration

Dev. env. js // development environment variable (meaning)

Index. js // some configuration variables of the project

Prod. env. js // production environment variable

Node_modules -- [dependency package]

Src -- [core project file]

App. vue -- root component

Main. js -- entry file

Router -- route Configuration

Static // static files, such as images and json data

Editorconfig // define the code format

Gitignore // file format to be ignored during git upload

Index.html // Home Page

Package. json // basic project information

README. md // Project Description

3. Install the element-ui command: npm I element-ui-S

Configuration required in main. js

　import elementui from 'element-ui'　　import 'element-ui/lib/theme-chalk/index.css'　　Vue.use(elementui);

4. Install the axios command: npm I axios-S

Create an api. js file to configure the axios access interface. The configuration is as follows:

Main. js needs to be configured

import Api from './api';　　Vue.prototype.$api=Api;

5. Create a page named Test/List. vue for addition, deletion, modification, and query.

Create a folder named Test and create the file List. vue. configure it in router:

　import List from '@/Test/List'　　{　　path: '/List',　　name: 'List',　　component: List　　}

7. Enable access: npm run dev, access address #/List

Add search criteria

Add Table display

Define corresponding parameters and Methods

Summary

The above section describes how to create a simple instance for adding, deleting, modifying, and querying vue basic. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!