이 글은 mpvue 단일 파일 페이지 구성 단계를 소개합니다. 필요한 친구가 참고할 수 있기를 바랍니다.
mpvue의 출현은 Vue 개발 경험을 미니 프로그램 플랫폼에 가져왔지만 디렉토리 구조는 기존 Vue 프로젝트와 완전히 일치하지 않습니다. 일반적인 페이지에는 다음 세 가지 파일이 포함되어 있습니다.
index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中
그 중 각 메인 각 페이지의 .js 파일은 기본적으로 동일하며 mpvue-entry를 통해 자동 생성이 가능하며(weex도 유사한 처리가 있습니다), 개인적으로는 vue 파일에서 직접 main.json을 구성하는 것이 더 적합하다고 생각하여 개발하게 되었습니다. mpvue -config-loader를 구현하는 방법
이 글에서는 공식 mpvue 템플릿을 기반으로 vue 파일에 작은 프로그램을 작성하는 페이지 구성을 구현하기 위해 mpvue-config-loader를 구성하는 방법을 소개합니다
1.
vue init mpvue/mpvue-quickstart my-project
2. 종속성을 설치합니다
npm i mpvue-config-loader -D
또는
yarn add mpvue-config-loader -D
3. 패키징 구성 수정
build/webpack.base.conf.js
module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'mpvue-loader', options: vueLoaderConfig }, + { + test: /\.vue$/, + loader: 'mpvue-config-loader', + exclude: [resolve('src/components')], + options: { + entry: './main.js' + } + } ... ] } ... plugins: [ new MpvuePlugin(), - new CopyWebpackPlugin([{ - from: '**/*.json', - to: '' - }], { - context: 'src/' - }), ... ] }
4. 페이지 구성 수정. vue - app.json의 콘텐츠를 복사하고 eslint 사양을 준수하도록 형식을 수정합니다
<script> export default { + config: { + pages: [ + 'pages/index/main', + 'pages/logs/main', + 'pages/counter/main' + ], + window: { + backgroundTextStyle: 'light', + navigationBarBackgroundColor: '#fff', + navigationBarTitleText: 'WeChat', + navigationBarTextStyle: 'black' + } + }, created () { ... } }
import { formatTime } from '@/utils/index' import card from '@/components/card' export default { + config: { + navigationBarTitleText: '查看启动日志' + }, ... }
src/pages/logs/main.json - 삭제
5. 실행을 시작하세요.
npm run dev
yarn devOthers
globalConfig 속성은 app.vue 파일에서 설정할 수 있습니다. 이는 페이지 구성과 병합되어 기본 구성 요소에 대한 전역 참조를 실현할 수 있습니다 mpvue-entry를 사용하는 프로젝트는 당분간 이 모듈을 사용하지 않는 것이 좋습니다. 향후 선택적 모드 중 하나로 직접 통합될 예정입니다.
본 모듈의 구현에는 다음 두 가지 옵션이 있는데, 전자가 현재 에디터에서 강조 표시가 불가능하므로 두 번째 방법을 채택합니다
Custom label
< ;script> 라벨은 객체의 구성 속성을 내보냅니다
위 내용은 mpvue 단일 파일 페이지 구성 단계 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!