vue-cli 3 사용 설명

최근 Vue 작가 유 우 계 가 공식 vue cli 3.0 을 발표 했다.웹 팩 4 를 기반 으로 빨리 시도 해 보 자.
문서 주소
간단 한 소개
Vue CLI 는 Vue.js 를 기반 으로 빠 른 개발 을 하 는 완전한 시스템 입 니 다.
쓰다

<!--    -->
npm install -g @vue/cli
<!--      -->
npm create new-cli

그 다음 설정,기본 값(babel,eslint),사용자 정의
사용자 정의 babel ts pwa vue-router vuex css 예비 처리 및 Linter/Formatter,unittesting e2e testing

router 를 선택 하면 history 모드 를 사용 할 지 여 부 를 다시 선택 합 니 다

4

여기 서 css 예비 처 리 를 선택 하면 less scss stylus 를 선택 할 수 있 습 니 다

에 스 린 트 는 또 몇 가지 가 있다.
오류 방지

airbnb 설정

표준 설정

eslint +prettier

그리고 하 나 는 babel,postCss eslint 와 같은 설정 파일 을 단독 파일 로 넣 는 것 입 니까?아니면 package.json 에 넣 는 것 입 니까?물론 단독 입 니 다

마지막 으로 저장 설정 이 있 습 니 다.나중에 사용 하 십시오그리고 설치 의존.
목록 은 아래 와 같다.

cli 2 버 전의 build 와 config,여러 개의 babel.config.js 가 없습니다.
홈 페이지 소 개 는 vue.config.js 를 새로 만들어 웹 팩 설정 을 할 수 있 습 니 다.예 를 들 어

// vue.config.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 },
 //loader
  chainWebpack: config => {
  config.module
   .rule('vue')
   .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
     //       ...loader
     return options
    })
 },
 //      map
 productionSourceMap:false,
 //  URL
 baseUrl: process.env.NODE_ENV === 'production'
  ? 'http://www.baidu.com'
  : 'https://www.google.com',
 outputDir:'dist', //build   
 assetsDir:'',//asset  
 indexPath:'index.html',//  index.html   
 filenameHashing:true,//    hash
// multi-page  ,  “page”         JavaScript     
 pages: {
  index: {
   // page    
   entry: 'src/index/main.js',
   //     
   template: 'public/index.html',
   //   dist/index.html    
   filename: 'index.html',
   //     title    ，
   // template    title       <title><%= htmlWebpackPlugin.options.title %></title>
   title: 'Index Page',
   //           ，        
   //         chunk   vendor chunk。
   chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  //               ，
  //         `public/subpage.html`
  //          ，     `public/index.html`。
  //            `subpage.html`。
  subpage: 'src/subpage/main.js'
 },
 //css  
 css: {
  sourceMap:false,//css source map
  loaderOptions: {
   css: {
    //           css-loader
   },
   postcss: {
    //           postcss-loader
   }
  }
 },
 //dev server
 devServer: {
  host:127.0.0.1
  port:8000,
  proxy: 'http://localhost:4000',
  overlay: {
   warnings: true,//  
   errors: true//  
  }
 }


}

기타

vue serve 와 vue build 를 사용 하여 단일 vue 파일 을 신속하게 개발 할 수 있 습 니 다

vue ui 그래 픽 인터페이스 생 성 관리 프로젝트
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.