Since Vue3 will be rewritten in Typescript, for better iteration, this project uses Vue2+ + Typescript to make it easier to replace Vue3 when it comes out.

structure

Vue – cli installation

npm install -g @vue/cli
vue create project
Copy the code

The project structure

├ ─ ─ node_modules / / dependence ├ ─ ─ public / / static file ├ ─ ─ SRC / / source directory ├ ─ ─ the unified management of API / / API ├ ─ ─ assets/resources/static ├ ─ ─ the components / / component │ ├── Vue │ ├── vue │ ├── vue │.vue │.vue │.vue │.vue │.vue / / element global variable ├ ─ ─ the index, which s / / third party dependency injection statement ├ ─ ─ main. Ts / / main entrance ├ ─ ─ shims - TSX. Which s / / TSX composite modules into statement ├ ─ ─ shims - vue. Which s / / vue Env. Production // Generate environment variables ├─.gitignore // git out file ├─.babel.config.js // bable │ ├─ package.json │ ├─ package.json │ ├─ package. md │ ├─ tsconfig.json // ts │ ├─ Vue.config.js // Vue ConfigurationCopy the code

usage

The official written

import Vue from 'vue'
const Component = Vue.extend({
  // Type inference is enabled
})

const Component = {
  // There will be no type inference,
  // Because TypeScript cannot confirm that this is an option for Vue components
}
Copy the code

This is the official way of writing it, and it’s not very different from the original way of writing it, so I’m not going to do much about it.

vue-class-component

We use the officially maintained decorator library to write components as classes.

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

@Component
export default class Dnn extends Vue {}
Copy the code

Third Party Package Statement

/ / API encapsulation
import api from './api'
Vue.prototype.$api = api
declare module 'vue/types/vue' {  
  interface Vue {  
    $api: any; }}Copy the code