VueCli3构建TS项目的方法步骤(5)

Vue.component(modal.name, modal) // dialog
Vue.component(pagination.name, pagination) // 分页
Vue.component(dateRange.name, dateRange) // 日期
Vue.component(proxyAutocomplete.name, proxyAutocomplete) // 远程模糊搜索
Vue.component(card.name, card) // el-tabs
Vue.component(tabLoad.name, tabLoad) // el-tabs

import '@/components/useElement'

// 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.
// 不能直接new一个函数，通过重新as一个变量，或者new其原型的constructor 都可以解决
// const encodePsw = new Encode.prototype.constructor().encodePsw(this.passwd)
const E = Encode as any
const encodePsw = new E().encodePsw(this.passwd)

import * as filters from '@/filters/index'

// 全局filter
const F = filters as any
Object.keys(filters).forEach(item => {
 Vue.filter(item, F[item])
})

declare var Chart: any;

@Component({
 selector: 'my-component',
 templateUrl: './my-component.component.html',
 styleUrls: ['./my-component.component.scss']
})

export class MyComponent {
  //you can use Chart now and compiler wont complain
  private color = Chart.color;
}

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
const VueConf = require('./src/assets/js/libs/vue_config_class')
const vueConf = new VueConf(process.argv)

module.exports = {
 baseUrl: vueConf.baseUrl, // 根域上下文目录
 outputDir: 'dist', // 构建输出目录
 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
 pages: vueConf.pages,
 lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error'
 runtimeCompiler: true, // 运行时版本是否需要编译
 transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
 productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
 configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
  if (debug) { // 开发环境配置
   config.devtool = 'cheap-module-eval-source-map'
  } else { // 生产环境配置
  }
  Object.assign(config, { // 开发生产共同配置
   resolve: {
    alias: {
     '@': path.resolve(__dirname, './src'),
     '@c': path.resolve(__dirname, './src/components'),
     'vue$': 'vue/dist/vue.esm.js'
    }
   }
  })
 },
 chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  if (debug) {
   // 本地开发配置
  } else {
   // 生产开发配置
  }
 },
 css: { // 配置高于chainWebpack中关于css loader的配置
  modules: true, // 是否开启支持‘foo.module.css'样式
  extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
  sourceMap: false, // 是否在构建样式地图，false将提高构建速度
  loaderOptions: { // css预设器配置项
   css: {
    localIdentName: '[name]-[hash]',
    camelCase: 'only'
   },
   stylus: {}
  }
 },
 parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
 pluginOptions: { // 第三方插件配置
 },
 pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 },
 devServer: {
  open: true,
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: {
   '/api': {
    target: '<url>',
    ws: true,
    changOrigin: true
   }
  },
  before: app => {}
 }
}