vue cli 3 + typescript + webpack 項目搭建

一、運用官方腳手架搭建

這是官方文檔：https://cli.vuejs.org/zh/

全局安裝 @vue/cli

npm install -g @vue/cli

運行vue create

vue create vue-ts-demo

default 那一項沒有包含typescript，咱們選擇 Manually select features這一項。

我這裏選擇了babel，typescript，router，vuex，CSS Pre-processors，Linter / Formatter

而後按照提示選擇本身須要安裝的，這是個人選擇。我沒有選擇默認的histoty mode for router，習慣了使用hash mode，這些都是能夠自由選擇的

配置成功以後

把項目跑起來

$ cd vue-cli3-ts-demo
$ npm run serve

項目跑起來是 npm run serve，並非之前的 npm run dev，能夠看下package.json裏面的代碼

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

在瀏覽器打開地址 "http://localhost:8080/"，能夠看到項目已經跑起來了

二、typescript

ts的語法及用法，參考官方文檔：https://www.tslang.cn/index.html

我以前也寫過一些筆記：https://github.com/liujianxi/...

三、項目結構

├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   ├── shims-tsx.d.ts
│   ├── shims-vue.d.ts
│   ├── store
│   │   └── index.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
└── tsconfig.json

看一下項目結構，能夠看到shims-tsx.d.ts和shims-vue.d.ts這兩個文件

用處以下

shims-tsx.d.ts：容許在vue項目中使用.tsx文件，詳細可參考此處

shims-vue.d.ts：容許導入和使用.vue單個文件組件，由於typescript默認並不支持導入vue文件

四、webpack配置

從項目結構中能夠看到，以前的webpack相關的配置都不見了。

而後 vue-cli-service 是個什麼東西，文檔這麼描述的

vue-cli-service serve 命令會啓動一個開發服務器 (基於 webpack-dev-server) 並附帶開箱即用的模塊熱重載 (Hot-Module-Replacement)

咱們能夠看到 vue-cli-service 是封裝好的，開箱即用的。
但是有時候須要本身配置webpack，文檔中也有給出方法，就是新建一個vue.config.js文件

vue.config.js 是一個可選的配置文件，若是項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。

在package.json同級處新建vue.config.js文件，按照文檔，配置以下

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? './'
  : '/',

  outputDir: 'dist',

  assetsDir: 'static',

  filenameHashing: true,

  // eslint-loader 是否在保存的時候檢查
  lintOnSave: true,

  // 是否使用包含運行時編譯器的Vue核心的構建
  runtimeCompiler: false,

  // 默認狀況下 babel-loader 忽略其中的全部文件 node_modules
  transpileDependencies: [],

  // 生產環境 sourceMap
  productionSourceMap: false,

  // cors 相關 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
  // corsUseCredentials: false,
  // webpack 配置，鍵值對象時會合並配置，爲方法時會改寫配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: (config) => {
  },

  // webpack 連接 API，用於生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: (config) => {
    // 由於是多頁面，因此取消 chunks，每一個頁面只對應一個單獨的 JS / CSS
    config.optimization
    .splitChunks({
        cacheGroups: {}
    });

    // 'src/lib' 目錄下爲外部庫文件，不參與 eslint 檢測
    config.module
    .rule('eslint')
    .exclude
    .add('/Users/maybexia/Downloads/FE/community_built-in/src/lib')
    .end()
  },

  // 配置高於chainWebpack中關於 css loader 的配置
  css: {
    // 是否開啓支持 foo.module.css 樣式
    requireModuleExtension: true,

    // 是否使用 css 分離插件 ExtractTextPlugin，採用獨立樣式文件載入，不採用 <style> 方式內聯至 html 文件中
    extract: true,

    // 是否構建樣式地圖，false 將提升構建速度
    sourceMap: false,

    // css預設器配置項
    loaderOptions: {
      // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名
        // 因此這裏假設你有 `src/variables.sass` 這個文件
        // 注意：在 sass-loader v7 中，這個選項名是 "data"
        prependData: `@import "~@/variables.sass"`
      },
      // 默認狀況下 `sass` 選項會同時對 `sass` 和 `scss` 語法同時生效
      // 由於 `scss` 語法在內部也是由 sass-loader 處理的
      // 可是在配置 `data` 選項的時候
      // `scss` 語法會要求語句結尾必須有分號，`sass` 則要求必須沒有分號
      // 在這種狀況下，咱們可使用 `scss` 選項，對 `scss` 語法進行單獨配置
      scss: {
      //   prependData: `@import "~@/variables.scss";`
      },
      // 給 less-loader 傳遞 Less.js 相關選項
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
            primary: '#fff'
        }
      }
    }
  },

  // All options for webpack-dev-server are supported
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: true,

    host: '127.0.0.1',

    port: 3001,

    https: false,

    hotOnly: false,

    proxy: null,

    before: app => {
    }
  },
  // 構建時開啓多進程處理 babel 編譯
  parallel: require('os').cpus().length > 1,

  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // 第三方插件配置
  pluginOptions: {}
};

值得注意的是 從 Vue CLI 3.3 起已棄用 baseUrl，推薦使用 publicPath。

配置好以後運行 npm run serve 能夠看到運行成功，剛配置的host、port已經生效，其餘的配置能夠本身慢慢添加

項目打包運行 npm run build 也是ok的

五、項目中的ts用法

項目已經搭建完畢，看一下里面的ts用法

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
  ...
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string; //非空斷言
}
</script>
<style scoped>
</style>

vue-property-decorator是什麼呢，文檔在這，它提供了函數 裝飾器修飾符 語法

從官方文檔中可看到

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

至關於

export default {
  props: {
    propA: {
      type: Number
    },
    propB: {
      default: 'default value'
    },
    propC: {
      type: [String, Boolean]
    }
  }
}

那麼src/components/HelloWorld.vue 就至關於

<template>
  <div class="hello">
      <h1>{{ msg }}</h1>
  </div>
  ...
</template>
<script lang="ts">
export default {
  props: {
    msg: {
      type: String
    }
  }
}
</script>
<style scoped>
</style>

以上

github地址：https://github.com/liujianxi/...