>  기사  >  위챗 애플릿  >  mpvue 단일 파일 페이지 구성 단계 소개

mpvue 단일 파일 페이지 구성 단계 소개

不言
不言앞으로
2018-12-14 10:55:543647검색

이 글은 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 () {
        ...
      }
    }

  • src/pages/logs/index.vue - 위와 동일
  • import { formatTime } from '@/utils/index'
    import card from '@/components/card'
    
    export default {
    + config: {
    +   navigationBarTitleText: '查看启动日志'
    + },
      ...
    }

  • src/app.json - 삭제
  • src/pages/logs/main.json - 삭제

  • 5. 실행을 시작하세요.

    npm run dev
  • or
yarn dev

Others

globalConfig 속성은 app.vue 파일에서 설정할 수 있습니다. 이는 페이지 구성과 병합되어 기본 구성 요소에 대한 전역 참조를 실현할 수 있습니다 mpvue-entry를 사용하는 프로젝트는 당분간 이 모듈을 사용하지 않는 것이 좋습니다. 향후 선택적 모드 중 하나로 직접 통합될 예정입니다.

본 모듈의 구현에는 다음 두 가지 옵션이 있는데, 전자가 현재 에디터에서 강조 표시가 불가능하므로 두 번째 방법을 채택합니다

Custom label

< ;script> 라벨은 객체의 구성 속성을 내보냅니다

위 내용은 mpvue 단일 파일 페이지 구성 단계 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제