Vue 기본 사항을 사용하여 추가, 삭제, 수정 및 쿼리 생성-JS 튜토리얼-php.cn

Vue 기본 사항을 사용하여 추가, 삭제, 수정 및 쿼리 생성

亚连

풀어 주다： 2018-06-06 10:12:16

원래의

6739명이 탐색했습니다.

이 글에서는 vue의 기초부터 간단한 추가, 삭제, 수정, 쿼리 작성을 위한 예제 코드를 주로 소개합니다. 필요한 친구들은 참고하시면 됩니다

1. vue-cli cnpm install vue-cli를 설치하세요. -g - -전역 설치 수행vue-cli cnpm install vue-cli -g --执行全局安装

2、创建一个webpack的基础项目；命令：vue init webpack myproject

2. 기본 webpack 프로젝트를 생성합니다. 명령: vue init webpack myproject;

다음은 디렉토리 구조와 설명입니다. 프로젝트

빌드는 웹팩 구성

Build.js // 프로덕션 환경 빌드 코드

check-versions.js // node&npm 및 기타 버전 확인

utils.js // 빌드 구성 유틸리티

vue-loader. conf.js // vue 로더

webpack.base.conf.js // Webpack 기본 환경 구성

　 webpack.dev.conf.js // Webpack 개발 환경 구성

　 webpack.prod.conf.js // Webpack 제작 환경 구성

　config——vue 프로젝트 구성

　dev.env.js // 개발 환경 변수(단어의 의미 참조)

　index.js //프로젝트의 일부 구성 변수

　prod.env.js //프로덕션 환경 변수

　node_modules——[종속성 패키지]

　src——[프로젝트 코어 파일]

　App.vue——루트 구성 요소

　Main.js——항목 파일

　router——라우팅 구성

　정적//일부 사진, json 데이터 등의 정적 파일 잠깐

　Editorconfig//코드 형식 정의

　gitignore//git 업로드에서 무시해야 하는 파일 형식

　index.html//홈페이지

　패키지. json//기본 프로젝트 정보

　README.md//프로젝트 설명

3. element-ui 설치 명령: npm i element-ui -S

　Main.js를 구성해야 합니다.

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

로그인 후 복사

4. npm i axios -S

　 axios 액세스를 구성하기 위해 새 api.js 파일을 생성합니다. 인터페이스는 다음과 같이 구성됩니다

Main.js를 구성해야 합니다

import Api from &#39;./api&#39;;
　　Vue.prototype.$api=Api;

로그인 후 복사

5. 추가, 삭제, 수정 및 확인 작업을 수행하려면

Test 폴더를 만들고, 새 파일 List.vue를 만들고, 라우터에서 구성하세요:

　import List from &#39;@/Test/List&#39;
　　{
　　path: &#39;/List&#39;,
　　name: &#39;List&#39;,
　　component: List
　　}

로그인 후 복사

7 액세스 시작: npm run dev, 액세스 주소 #/List

　검색 조건 추가

테이블 표시 추가

해당 매개변수 및 메소드 정의

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 될 것입니다.