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

이 글은 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

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

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

Custom label

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

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