vite 快速搭建 Vue3.0项目（二）

一、初始化项目

1、执行 npm init vite@latest
2、输入 Project name
3、选择Vue
4、选择TypeScript

二、进入项目目录

cd ……

三、安装依赖

npm install

四、启动项目

npm run dev

五、配置路由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引入即可。