Vue 3.0+Vite 2.0+Vue Router 4.0.6+Vuex 4.0.0+TypeScript +Yarn

Vue 3.0+Vite 2.0+Vue Router 4.0.6+Vuex 4.0.0+TypeScript +Yarn

1、使用Vite 创建项目

#使用Yarn
yarn create @vitejs/app my-vue-app --template vue-ts #my-vue-app 项目名称
#使用npm 6.x
npm init @vitejs/app my-vue-app --template vue
#使用npm 7.x
npm init @vitejs/app my-vue-app -- --template vue

初始化项目

yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock

2、安装Eslint

引用eslint prettier 依赖

yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser 
yarn add -D @typescript-eslint/eslint-plugin

项目根目录建立.eslintrc.js文件

module.exports = {
    parser: 'vue-eslint-parser',
    parserOptions: {
      parser: '@typescript-eslint/parser',
      ecmaVersion: 2020,
      sourceType: 'module',
      ecmaFeatures: {
        jsx: true
      }
    },
    extends: [
      'plugin:vue/vue3-recommended',
      'plugin:@typescript-eslint/recommended',
      'prettier/@typescript-eslint',
      'plugin:prettier/recommended'
    ],
    rules: {
      '@typescript-eslint/ban-ts-ignore': 'off',
      '@typescript-eslint/explicit-function-return-type': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-var-requires': 'off',
      '@typescript-eslint/no-empty-function': 'off',
      'vue/custom-event-name-casing': 'off',
      'no-use-before-define': 'off',
      // 'no-use-before-define': [
      //   'error',
      //   {
      //     functions: false,
      //     classes: true,
      //   },
      // ],
      '@typescript-eslint/no-use-before-define': 'off',
      // '@typescript-eslint/no-use-before-define': [
      //   'error',
      //   {
      //     functions: false,
      //     classes: true,
      //   },
      // ],
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/ban-types': 'off',
      '@typescript-eslint/no-non-null-assertion': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          argsIgnorePattern: '^h$',
          varsIgnorePattern: '^h$'
        }
      ],
      'no-unused-vars': [
        'error',
        {
          argsIgnorePattern: '^h$',
          varsIgnorePattern: '^h$'
        }
      ],
      'space-before-function-paren': 'off',
      quotes: ['error', 'single'],
      'comma-dangle': ['error', 'never']
    }
  };
  

项目根目录建立prettier.config.js文件

module.exports = {
    printWidth: 100,
    tabWidth: 2,
    useTabs: false,
    semi: false, // 未尾逗号
    vueIndentScriptAndStyle: true,
    singleQuote: true, // 单引号
    quoteProps: 'as-needed',
    bracketSpacing: true,
    trailingComma: 'none', // 未尾分号
    jsxBracketSameLine: false,
    jsxSingleQuote: false,
    arrowParens: 'always',
    insertPragma: false,
    requirePragma: false,
    proseWrap: 'never',
    htmlWhitespaceSensitivity: 'strict',
    endOfLine: 'lf'
}

3、安装Vue Route & Vuex

yarn add vue-router@next vuex@next

3.1、 Vuex

在项目src目录下创建strore/index.ts

import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

在项目src目录下main.ts修改如下

import { createApp } from 'vue'
import { store, key } from './store' store 
import App from './App'
import './index.css'

const app = createApp(App)

app.use(store, key)

app.mount('#app')

在components/HelloWorld.vue修改如下

<template>
  <h1>{{ msg }}</h1>
  <button @click="inCrement"> count is: </button>
  <p>{{ count }}</p>
</template>

<script>
  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex'
  import { key } from '../store'

  export default defineComponent({
    name: 'HelloWorld',
    props: {
      msg: {
        type: String,
        default: ''
      }
    },
    setup() {
      const store = useStore(key)

      const count = computed(() => store.state.count)

      return {
        count,
        inCrement: () => store.commit('increment')
      }
    }
  })
</script>

3.2、Vue-Route

在 src 目录下建立 router/index.ts，内容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HelloWorld from "../components/HelloWorld.vue";

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "HelloWorld",
        component: HelloWorld,
    },
    {
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import(/* webpackChunkName: "About" */ "../components/About.vue")
    }
];

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});

export default router;

再新建一个 components/About.vue 文件，内容如下：

<template>
  <img
    alt="Vue logo"
    src="../assets/logo.png"
  />
  <h1>{{ msg }}</h1>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'About',
  data() {
    return {
      msg: 'Hello Vue 3.0 + Vite!'
    }
  },
  setup() {}
})
</script>

再修改 main.ts

import { createApp } from 'vue'
import { store, key } from './store'
import router from "./router";
import App from './App'
import './index.css'

const app = createApp(App)

app.use(store, key)
app.use(router)
app.mount('#app')

运行项目 yarn dev 分别访问http://localhost:3000/ 和http://localhost:3000/about 即可

4、安装Ant Design Vue

$ yarn add ant-design-vue

全局引入Ant Design Vue

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App)
app.use(Antd)
app.use(router)
app.mount('#app')