vite+vue3+ts+element-plus项目搭建

一.vite+vue3+ts初始化

使用vite初始化,初始化过程选择vue-ts,这样就能引入ts,后面不用额外对他进行加入

npm init vite@latest

二.安装node依赖

npm i --save-dev @types/node
// 引入node模块
// tsconfig.json
{
  "compilerOptions": {
  ...(省略配置)
    "types": ["node"]
  },
  "include": ...(省略配置)
}

// 配置@别名
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
  ...(省略配置)
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }
})

三.安装sass

npm install --save-dev sass

四.根据官网提示安装element-puls

https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E5%AE%8C%E6%95%B4%E5%BC%95%E5%85%A5

五.安装vue路由

npm i vue-router@next -S

vite+vue3+ts+element-plus项目搭建_第1张图片
vite+vue3+ts+element-plus项目搭建_第2张图片

六.安装vuex

npm i vuex@next -S

vite+vue3+ts+element-plus项目搭建_第3张图片

// 使用
// HelloWord.vue
<span @click="$store.commit('add')">{{$store.state.count}}</span>

七.main.js配置

vite+vue3+ts+element-plus项目搭建_第4张图片

参考:
https://www.jianshu.com/p/3c27c36b6cb9

你可能感兴趣的:(vue.js,前端学习,vue.js,typescript,vite)