Earlier versions of VUE-CLI support building with typescript directly, so you don’t need to configure it yourself. Version 3.4.1 does not automatically integrate typescript with UI building, so record the pits you build

A total of three steps

Step 1: Configure loader with vue.config.js, involving two dependencies on TS-Loader, typescript

chainWebpack: config => {
    config.module
    .rule('tsx')
    .use('ts-loader')
    .loader('ts-loader')
    .tap(options => {
        return Object.assign(options || {}, { allowTsInNodeModules: true}); })}Copy the code

Step 2: Cli3 cannot modify entry manually. Install @vue/ CLI-plugin-typescript

yarn add @vue/cli-plugin-typescript
Copy the code

Step 3: Root tsconfig.json configuration

{
    "compilerOptions": {
        "target": "esnext"."module": "esnext"."strict": true."jsx": "preserve"."importHelpers": true."moduleResolution": "node"."experimentalDecorators": true."esModuleInterop": true."allowSyntheticDefaultImports": true."sourceMap": true."baseUrl": ".", / /"types": / / /"webpack-env"/ /,"paths": {
			"@ / *": [
			    "src/*"]},"lib": [
			"esnext"."dom"."dom.iterable"."scripthost"]},"include": [
        "./src/**/*"]."exclude": [
        "./node_modules/*"."./public/*"]}Copy the code

Ok, now that the configuration file is done, you can start writing ts

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component<Vue>({
	components: {
		HelloWorld
	}
})
export default class App extends Vue {
	public name:string = 'app';
}
</script>
Copy the code

Other tools

<template lang="pug">
<style scoped lang="scss">
yarn add pug
yarn add pug-plain-loader
yarn add sass-loader
yarn add node-sass
Copy the code

Configure the SASS variable and postCSS pxtorem

css: {
	modules: true,
	loaderOptions: {
		sass: {
			data: `@import "@/variables.scss"; ` }, postcss: { plugins: [ require('postcss-pxtorem')({
                    rootValue: 75,
                    propList: [The '*'.'! font-size'],}),]}}}Copy the code

How to package multi-page applications

Those familiar with Webpack know that multi-page packaging is mainly to declare multiple entries, vuE-CLI3 configuration is a little different, need to specify pages

let path = require('path')
let glob = require('glob')

function getEntry(globPath) {
    let pages = {};
	glob.sync(globPath).forEach(function(entry) {
        let basename = path.basename(entry, path.extname(entry));

        pages[basename] = {
            entry: entry,
            template: 'public/index.html',
            filename: `${basename}.html`,
            chunks: [basename]
        }
    });
    returnpages; } // below vue.config.jsexportAdd pages property Pages: getEntry('./src/pages/*.ts'),
Copy the code

The above code will produce

pages: {
    login: {
        entry: './src/pages/login.ts',
        template: 'public/index.html',
        filename: 'login.html',
        chunks: ['login']
    },
    main: {
        entry: './src/pages/main.ts',
        template: 'public/index.html',
        filename: 'main.html',
        chunks: ['main']}}Copy the code

The packed file directories are as follows:

Another problem with multi-page packaging is: which page is the entry point for the local server?
DevServer: {index:'main.html'
}
Copy the code

For other configuration items, see vuE-cli3 official website cli.vuejs.org/zh/guide/