Vue3+TS + vite 创建项目

一、首先给大家介绍一款极速搭建项目的构建工具（vite）

vite 是一个由原生ESM驱动的Web开发构建工具，打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ，甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量，开箱即用的特点，满足了大部分开发场景的需求，作为快速启动本地 Vue项目来说，这是一个非常完美的工具。

npm init vite-app <projectName> 
//或者
yarn create vite-app <projectName>

用vite安装时特别快的，就是有一个缺点，很多配置还需要自己来下载，基本要下载哪些呢？下面就给大家写在这里了，如下：

1、先来配置项目

（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;
}

2、安装vue-router,目前版本号：v4.0.12

(1)安装

yarn add vue-router@4.0.12
// 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')

3、配置Vuex,目前版本v4.0.2

（1）.安装 

yarn add vuex@4
//或者
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",
    };
  },
});

4、配置Ant Design Vue

具体使用方式请参考：官方文档 

（1）.安装ant-design-vue插件

yarn  add ant-design-vue@next

（2）.在main.js中写入一下内容

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')

二、用vue-cli搭建项目 

选择起来更加灵活可控。丰富的官方插件适配，GUI的创建管理界面，标准化开发流程，这些都是 vue-cli 的特点。

 

照图安装上之后就可以了，不用下载其他插件了。