mpvue 단일 파일 페이지 설정

전언
mpvue의 출현은 vue의 개발 체험을 애플릿이라는 플랫폼에 가져왔지만 그 디렉터리 구조는 전통적인 vue 프로젝트와 완전히 일치하지 않는다. 전형적인 페이지는 다음과 같은 세 가지 파일을 포함한다.

index.vue //     
main.js //     ，   vue     
main.json //           ，     main.js

그 중에서 각 페이지의main.js 파일은 기본적으로 일치합니다. mpvue-entry 를 통해 자동으로 생성할 수 있습니다. (weex도 비슷한 처리가 있습니다.)json 저는 개인적으로 vue 파일에 직접 설정하는 것이 더 적합하다고 생각해서 mpvue-config-loader를 개발하여 실현했습니다.
본고는 mpvue 공식 템플릿을 바탕으로 mpvue-config-loader를 설정하여 vvu 파일에서 애플릿을 쓰는 페이지 설정을 실현하는 방법을 소개하고자 한다.
단계
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. 페이지 구성 수정

src/App.vue - 복제 app.json의 내용을 수정하고eslint규범에 부합하도록 포맷 수정


export default {
+ config: {
+   pages: [
+     'pages/index/main',
+     'pages/logs/main',
+     'pages/counter/main'
+   ],
+   window: {
+     backgroundTextStyle: 'light',
+     navigationBarBackgroundColor: '#fff',
+     navigationBarTitleText: 'WeChat',
+     navigationBarTextStyle: 'black'
+   }
+ },
  created () {
    ...
  }
}</code></pre> 
 <ul> 
  <li>src/pages/logs/index.vue -   </li> 
 </ul> 
 <pre><code class="diff">import { formatTime } from '@/utils/index'
import card from '@/components/card'

export default {
+ config: {
+   navigationBarTitleText: '      '
+ },
  ...
}</code></pre> 
 <ul> 
  <li>src/app.json -   </li> 
  <li>src/pages/logs/main.json -   </li> 
 </ul> 
 <p>5.    </p> 
 <pre><code class="bash">npm run dev</code></pre> 
 <p>or</p> 
 <pre><code class="bash">yarn dev</code></pre> 
 <h2>  </h2> 
 <ul> 
  <li>app.vue        <code>globalConfig</code>   ，           ，           </li> 
  <li>   <a href="https://github.com/F-loat/mpvue-entry" rel="nofollow noreferrer">mpvue-entry</a>             ，               </li> 
  <li> <p>               ，               ，          </p> 
   <ul> 
    <li>      <code><config></config></code> </li> 
    <li> <code><script>

탭 내보내기 대상의 config 속성

mpvue 단일 파일 페이지 설정

좋은 웹페이지 즐겨찾기