1.创建项目

npm create vite@latest my-project,执行后会让我们选择，依次选择vue然后vue-ts，然后项目就创建好了。然后根据提示，cd my-project执行npm install，安装依赖。运行npm run dev，打包：npm run build。

这里执行一下打包，打开打包后的文件，会发现白屏报错，只需要在vite.config.js里添加base：'./'，然后可以用liveServer打开，注意不能直接打开

网友的解释：

2.安装一些必备模块

安装element-plus,vue-router,vuex等 npm install element-plus vue-router vuex --save

在src下面创建router文件夹，然后在router文件夹中创建index.ts。

在index.ts中添加如下代码

import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";
const routes=[
    {
        path:"/",
        redirect:"/login",
        

    },
  
    {
        path:'/login',
        component:()=>import('../page/login.vue')
    }
]
const router=createRouter({
    history:createWebHashHistory(),
    routes
})
router.beforeEach((to,from,next)=>{
    const role = localStorage.getItem('login');
    if (!role && to.path !== '/login') {
        next('/login');
    } else {
        next();
    }
    // next()
})
export default router

继续创建store文件夹，添加index.ts,在index.ts中添加代码

import {createStore} from 'vuex'
const store = createStore({
    state:{
        
    },
    mutations:{
        
    }

})
export default store

然后在main.ts中增加

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import store from './store'
import router from './router'
createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

准备阶段差不多了，在App.vue中加入, 在src下面创建page文件夹，新建index.vue和login.vue,在登录中写一些登录的逻辑代码。

注意，创建的项目script标签上可能是 lang="ts" setup，里面的变量无需return即可使用，注意不要使用this。这里简单介绍下使用router和store的方法

使用router：

import {useRouter，useRoute} from 'vue-router'
const router=useRouter()
router.push('/index')
//然后这个router就和vue2中的this.$router等价的

使用store

import {useStore} from 'vuex'
const store=useStore()
const collapse=computed(()=>store.state.collapse)
//这里就拿到了state中的变量

使用element的图标要注意需要先引入 import { Fold,Expand,Setting } from '@element-plus/icons-vue' 然后再使用 <el-icon :size="25" color="#999"><expand /></el-icon>
使用echarts的方法

//首先安装
npm install echarts -S
//在要使用的组件中：
//div上用ref <div ref="chart1"></div>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const chart1 =ref(null)
onMounted(
  () => {
      console.log(chart1)
      if(chart1.value){
      var myChart = echarts.init( chart1.value);
       //然后可以写option了
       。。。这里省略
       myChart.setOption(option);
      }
   
  }
)

5.获取多个连续dom

<div v-for="i of 4" :key="i" :ref="charts"></div>

const charts=(el:HTMLElement)=>{
  (arr.value as Array<HTMLElement>).push(el)
}
onMounted(
  () => {
  //arr中每一项的value值则为一个
     console.log(arr)
})

使用vue3、vite、typescript、element-plus构建一个项目

1.创建项目

2.安装一些必备模块