laravel에서 vuejs의 UI(element-UI) 구성 요소를 사용할 때 페이지에 직접 복사해야 하나요, 아니면 .vue 파일로 만들어야 하나요?

Question

프론트엔드와 백엔드를 분리하여 개발하는 대신 laravel 5.3에서 element-UI를 사용하여
처음에는 http://codesky.me/archives/tr... 이 글에 따라 구성했습니다.
데모가 정상적으로 표시되었습니다. , 즉, 환영합니다.blade.php는 다음과 같습니다:

으아악

질문:
1. element-UI 구성 요소를 사용하는 방법을 아직 잘 모르겠습니다. 예를 들어 다음 스위치를 사용하세요. http://element.eleme.io/#/zh -...
컴포넌트 코드는 어디에 넣어야 할까요? .vue 파일로 만들어야 합니까, 아니면 페이지의 필요한 위치에 직접 작성해야 합니까?

으아악

2. 이 js 렌더링 양식 요소를 기존 방식으로 제출할 수 있나요? 아니면 ajax로만 제출할 수 있나요?

Answer 1

프런트엔드와 백엔드가 분리되지 않은 경우 vue-loader로 .vue 파일을 컴파일할 필요가 없습니다. 그렇지 않으면 브라우저가 이를 인식하지 못합니다

Answer 2

프론트엔드와 백엔드가 분리되지 않는 이유는 라우팅, 템플릿, 레이아웃 등 백엔드 프레임워크가 제공하는 다양한 편의성을 포기할 수 없기 때문입니다.
이런 식으로 vue를 사용하면 .vue 별도 파일만 삭제할 수 있습니다.
vue.js 및 emement ui와 같은 다양한 구성요소 라이브러리를 사용하려면 이렇게 하면 됩니다!
먼저 vue.js를 jquery처럼 도입할 수 있습니다.
둘째, element.js와 전역 CSS를 전체적으로 가져와서 vue에서 참조합니다.
셋째, 백엔드 템플릿 레이아웃 기능과 협력하여 로컬 템플릿 파일에 <el-button>과 같은 구성 요소를 작성합니다.
페이지를 라우팅할 때 배경이 기본 전체 레이아웃 템플릿을 자동으로 호출하여 새 vue 개체를 자동으로 다시 초기화하므로 더 이상 단일 페이지 애플리케이션이 아닙니다.
그러나 백엔드 세션, 구성 및 기타 기능을 사용하면 데이터를 공유하고 크레딧을 청구하는 것은 문제가 되지 않습니다.
현재 vue+element ui+thinkphp5를 테스트하기 위해 위 방법을 사용하고 있습니다. 비록 온디맨드 로딩과 같은 단일 파일 애플리케이션의 기능을 잃었지만 다른 편의성에서도 이점을 얻었습니다.

Answer 3

1. 프론트엔드와 백엔드가 완전히 분리되어 있든, 프론트엔드와 백엔드가 혼합되어 있든 .vue를 사용하시면 되는데, 굉장히 편리해서 최고인 것 같습니다. 연습은 페이지를 포함하여 .vue를 작성하는 것입니다. 다른 모든 js는 app.js 입구에 의해 균일하게 로드된 다음 build 중에 컴파일됩니다. 이는 향후 유지 관리 및 재건축을 용이하게 할 수 있습니다..vue, 而且很方便, 所以我觉得最佳实践是写成.vue, 包括页面所有其他js, 都由app.js入口统一加载, 再在build的时候编译. 这样可以方便以后维护和重构.

2. 怎么提交和js渲染没有任何关系, 你用传统的方式写<button type="submit">就可以让浏览器帮你提交表单. 你监听浏览器事件, 就能在js中做各种操作, 比如ajax提交

附：在app.js中加载.vue文件为全局组件, 如Vue.component('post-page', require('./components/PostPage')), 就可以在blade模版中使用<post-page></post-page>,而且Elixir会帮你搞定一切配置, 只需要一行mix.webpack('path/to/app.js')

🎜제출 방법은 js 렌더링과 관련이 없습니다. 기존 방식으로 <button type="submit">를 작성하고 브라우저가 양식을 제출하도록 하면 됩니다. 브라우저 이벤트, ajax 제출 등 js에서 다양한 작업을 수행할 수 있습니다🎜 🎜첨부 파일: app.js의 .vue 파일을 Vue.comComponent('post-page', require('. /comComponents /PostPage')), blade 템플릿에서 <post-page></post-page>를 사용할 수 있으며 Elixir 는 모든 구성을 얻는 데 도움이 됩니다. mix.webpack('path/to/app.js') 한 줄이면 충분합니다🎜