vue3.0+TS+AntDesignVue项目

vite

vite是尤大大在今年新鼓捣出来的一个工具
为什么尤大大要推出vite，在使用webpack的时候，每次开发启动项目都比较慢，而且热更新也比较慢，而vite的主要特点就是快，官网对于vite的特点是这样描述的

1、快速的冷启动
2、即时的模块热更新
3、真正的按需编译

初始化vite项目

1、初始化项目，可以打开git bash; win电脑也可以直接cmd打开窗口
执行下面命令

yarn create vite-app <project name>
//我用的yarn，如没安装需要安装yarn

下图 Done in 15.39s. 执行完也是快；在这里插入图片描述
2、cd 进入目录即可；
3、执行安装依赖 yarn install ; 通过yarn dev 启动项目；下图是在vscode启动

上图可以看到新建的项目结构与vue-cli4创建的项目结构基本一样，都是App.vue和main.js
查看main.js文件内容

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

createApp(App).mount('#app')

发现创建Vue的方式变了，原来是new Vue来初始化Vue，但在Vue3.0中，修改为了通过createApp的方式；
Vue3中文文档

配置项目

配置typescript

1、安装typescript

yarn add typescript -D

2、初始化 tsconfig.json

//执行命令 初始化 tsconfig.json 
npx tsc --init

3、将main.js修改为main.ts
其他的引用也修改为main.ts,也需要将其他页面的 <script> 修改为 <script lang="ts">

4、配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件
添加以下内容

declare module "*.vue" {
    
    
  import {
    
     Component } from "vue";
  const component: Component;
  export default component;
}

配置Vue Router

Vue Router 4.0 ，变化请查看 Github 中完整的细节，
目前版本beta: v4.0.0-beta.13, yarn 进行安装需要带上版本号
1、安装vuex

yarn add [email protected]
// or
yarn add vue-router@next

2、安装完后配置vue-router
在项目src目录下面新建router目录，然后添加index.ts文件，添加以下内容

// import VueRouter from 'vue-router'
import {
    
    createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
    
    
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

// const routes :any = []
// // 3. Create the router instance and pass the `routes` option
// // You can pass in additional options here, but let's
// // keep it simple for now.
// const router = VueRouter.createRouter({
    
    
//   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
//   history: VueRouter.createWebHashHistory(),
//   routes, // short for `routes: routes`
// })

3、将router引入到main.ts中,修改main.ts文件

import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'

// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')

配置Vuex

Vuex 4.0 ，变化请查看Github
目前版本beta: v4.0.0-beta.4
1、安装vuex

       yarn add [email protected]
       //或者
       yarn add vuex@next

2、安装完后配置vuex
在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容

import {
    
     createStore } from 'vuex'

interface State {
    
    
  userName: string
}
export default createStore({
    
    
  state(): State {
    
    
    return {
    
    
      userName: "vuex",
    };
  },
});

配置Ant Design Vue

具体使用方式请参考：官方文档
1、引入ant-design-vue

yarn  add ant-design-vue@next

2、在main.ts中引入

iimport {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router/index'
import store from './store/index'

// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_  实例来创建router
// 整个应用程序路由器感知。
app.use(router)
app.use(store)
app.use(AntDesignVue)
app.mount('#app')
// createApp(App).mount('#app')

vite 搭建 Vue3.0项目