vite 快速搭建 Vue3.0项目

一、初始化项目

npm create vite-app <project name>

二、进入项目目录

cd ……

三、安装依赖

npm install

四、启动项目

npm run dev

五、配置项目

1. 安装 typescript

npm 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

1. 安装vue-router

npm 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

1. 安装vuex（需带版本号安装）

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

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

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

注：其余前端UI插件（Element Plus 或 Ant Design Vue）自行安装，然后main.ts引入即可。