> 웹 프론트엔드 > JS 튜토리얼 > vue-cli3.0에는 어떤 새로운 특수 효과가 추가되었나요?

vue-cli3.0에는 어떤 새로운 특수 효과가 추가되었나요?

php中世界最好的语言
풀어 주다: 2018-06-06 15:23:14
원래의
1847명이 탐색했습니다.

이번에는 vue-cli3.0에 추가된 새로운 특수효과와 vue-cli3.0의 새로운 특수효과에 대한 주의사항을 알려드리겠습니다. 다음은 실제 사례입니다.

Vue-cli 3.0은 최근 개발 프로젝트에 사용되었습니다. 사용자 경험이 훌륭하다고 할 수 있으며 템플릿이 더욱 맞춤화되었으며 구성이 더 간단해졌습니다. 다음은 지원 과정 중 겪은 몇 가지 경험을 요약한 것입니다.

새 프로젝트

# 安装
npm install -g @vue/cli
# 新建项目
vue create my-project
# 项目启动
npm run serve
# 打包
npm run build
로그인 후 복사

패키지 파일에는 참조 리소스에 사전 로드(사전 로드/프리페치)가 주입되어 있고 PWA 플러그인이 활성화되면 매니페스트/아이콘 링크가 주입되며 웹팩 런타임/청크 매니페스트가 삽입되었습니다. 도입됨(인라인) 최고의 성능.

기능 구성

기능 선택

3.0 버전에는 기본 사전 설정 구성과 사용자 정의 구성이 포함되어 있으며, 사용자 정의 구성 후에는 향후 프로젝트를 위해 현재 구성 기능을 저장할지 묻는 메시지가 표시됩니다. 구성 기본값은 다음에 재구성하지 않고 바로 사용할 수 있습니다.

사용자 정의 기능 구성에는 다음 기능이 포함됩니다.

  1. TypeScript

  2. 프로그레시브 웹 앱(PWA) 지원

  3. Router

  4. Vuex

  5. CSS 전처리기

  6. 린터 / Formatter

  7. Unit Testing

  8. E2E Testing

은 프로젝트 크기와 기능 경험에 따라 다양한 기능을 구성할 수 있습니다. 스페이스바는 선택 항목을 선택/반전하고, a 키를 누르면 모두 선택/모두 선택 취소됩니다. 항목을 선택하고 위쪽 및 아래쪽 키를 사용하여 선택 항목을 위아래로 이동하려면 i 키를 누릅니다.

함수 세부 구성

함수 선택 후 좀 더 세부적인 구성을 하라는 메시지가 나옵니다.

TypeScript:

  1. 클래스 스타일 컴포넌트 구문을 사용할지 여부: 클래스 스타일 컴포넌트 구문을 사용할지?

  2. 이스케이프를 위해 babel을 사용할지 여부: 자동 감지 폴리필을 위해 TypeScript와 함께 Babel을 사용하시겠습니까?

CSS 전처리기:

  1. CSS 전처리 유형 선택: CSS 전처리기 선택

린터/포매터

  1. 린터/포매터 사양 유형 선택: 린터/포매터 구성 선택

  2. 린트 모드 선택, 저장 시 확인/제출 시 확인: 추가 린트 기능 선택

테스트

  1. 단위 테스트 모드 선택

  2. E2E 테스트 방법 선택

Babel, PostCSS, ESLint 등과 같은 사용자 정의 구성의 저장 위치를 ​​선택하세요. Babel, PostCSS, ESLint 등의 구성을 어디에 배치하는 것을 선호하시나요?

vue.config.js 구성 정의 이후

vue.config.js 기본 구성 완료

module.exports = {
 // 基本路径
 baseUrl: '/',
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 设置代理
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}
로그인 후 복사

프록시 설정

# string
module.exports = {
 devServer: {
  proxy: '<url>'
 }
}
# Object
module.exports = {
 devServer: {
  proxy: {
   '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
   },
   '/foo': {
    target: '<other_url>'
   }
  }
 }
}
로그인 후 복사

dll 활성화

dll을 활성화한 후 공급업체의 [chunkhash] 값은 우리가 생성한 동적 라이브러리 파일은 패키징될 때마다 동일하며 해당 값은 true/false이거나 특정 코드 베이스에 대해 지정될 수 있습니다.

module.exports = {
 dll: true
}
module.exports = {
 dll: [
  'dep-a',
  'dep-b/some/nested/file.js'
 ]
}
로그인 후 복사

정적 리소스 경로

상대 경로

  1. @로 시작하는 정적 리소스 경로는 /src

  2. ~로 시작하는 정적 리소스 경로는 노드 모듈에 리소스를 도입할 수 있습니다

공용 폴더의 정적 리소스 참조

 # 在 public/index.html中引用静态资源
 <%= webpackConfig.output.publicPath %>
 <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow" >
 # vue templates中,需要在data中定义baseUrl
 <template>
  <img :src="`${baseUrl}my-image.png`">
 </template>
 <script>
  data () {
   return {
    baseUrl: process.env.BASE_URL
   }
  }
 </script>
로그인 후 복사

Webpack 구성 수정

webpack-chain을 사용하여 webpack 관련 구성을 수정하려면 webpack-chain 및 vue-cli 소스 코드에 익숙해지는 것이 좋습니다. 이 옵션의 구성을 이해하십시오.

모듈 처리 구성 수정

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config.module
   .rule('js')
    .include
     .add(/some-module-to-transpile/) // 要处理的模块
 }
}
로그인 후 복사

웹팩 로더 구성 수정

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config.module
   .rule('scss')
   .use('sass-loader')
   .tap(options =>
    merge(options, {
     includePaths: [path.resolve(__dirname, 'node_modules')],
    })
   )
 }
}
로그인 후 복사

웹팩 플러그인 구성 수정

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config
   .plugin('html')
   .tap(args => {
    return [/* new args to pass to html-webpack-plugin's constructor */]
   })
 }
}
로그인 후 복사

eg: 在本次项目较小,只对uglifyjs进行了少量的修改,后期如果还有配置上优化会继续添加。

chainWebpack: config => {
  if (process.env.NODE_ENV === 'production') { 
    config
      .plugin('uglify')
      .tap(([options]) =>{
        // 去除 console.log
        return [Object.assign(options, {
          uglifyOptions: { compress: {
            drop_console : true,
            pure_funcs: ['console.log']
          }}
        })]
      })
  }
}
로그인 후 복사

全局变量的设置

在项目根目录创建以下项目:

.env        # 在所有环节中执行
.env.local     # 在所有环境中执行,git会ignored
.env.[mode]     # 只在特定环境执行( [mode] 可以是 "development", "production" or "test" )
.env.[mode].local  # 在特定环境执行, git会ignored
.env.development  # 只在生产环境执行
.env.production   # 只在开发环境执行
로그인 후 복사

在文件里配置键值对:

# 键名须以VUE_APP开头
VUE_APP_SECRET=secret
로그인 후 복사

在项目中访问:

console.log(process.env.VUE_APP_SECRET)
로그인 후 복사

这样项目中的 process.env.VUE_APP_SECRET 就会被 secret 所替代。

vue-cli 3 就项目性能而言已经相当友好了,私有制定性也特别强,各种配置也特别贴心,可以根据项目大小和特性制定私有预设,对前期项目搭建而言效率极大提升了。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样对JS+TypeScript中class进行使用

vue计算属性与侦听器实战项目详解

위 내용은 vue-cli3.0에는 어떤 새로운 특수 효과가 추가되었나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿