安装vue3最新版本的vue-cli

卸掉旧版

	npm uninstall vue-cli -g
	yarn global remove vue-cli

安装新版本 @vue/cli

	npm install -g @vue/cli
	或
	yarn global add @vue/cli
	检查vue版本号
	vue -V

vue3项目搭建

有两种，分别是常用的vue脚手架和vite脚手架

vite脚手架

创建命令

	npm init vite-app 项目名
	//或者
	yarn create vite-app 项目名
	//进入
	cd 项目名
	//安装依赖
	yarn install
	//启动
	yarn dev

配置项目

配置typescript

1. 安装 typescript

yarn add typescript -D

2. 初始化tsconfing.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

1. 安装

	yarn add vue-router@4.0.12
	// or
	yarn add vue-router@next

2. 安装完成配置

在项目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

1. 安装vuex

	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",
    };
  },
});

配置Ant Design Vue

1. 引用ant-design-vue

	yarn  add ant-design-vue@next

2.在main.ts中引入

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