Create a simple addition, deletion, modification, and query instance from the vue base, and add and delete vue

Create a simple addition, deletion, modification, and query instance from the vue base, and add and delete vue

 

 

1. install vue-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