element-plus #

vite.config.js 配置文件 #

之前 vue2 中使用的是 vue.config.js，使用 vite 搭建的项目就需要在根目录下配置 vite.config.js

vueRouter #

安装 vue-router@next，最新版路由 cnpm install vue-router@next --save

pnpm install vue-router@next --save

在 src 目录下创建 router 路由目录，添加 index.js （记得在 src 目录下创建 views 文件夹） 在 main.js 中引入 router

import { createApp } from 'vue'
import router from './router/index';
import App from './App.vue'
const app = createApp(App);
app.use(router);
app.mount('#app')

Vuex #

cnpm install vuex@next

pnpm install vuex@next --save

安装完后配置 vuex 在项目 src 目录下面新建 store 目录，并添加 index.js 文件，添加以下内容

axios #

安装 axios 和 qs cnpm install axios -S

pnpm install axios --save

cnpm install qs -S

pnpm install qs --save

eslint-plugin-vue 文件检查 #

cnpm install -D eslint eslint-plugin-vue

pnpm install eslint eslint-plugin-vue --save-dev

根目录下创建 .eslintrc.js

TypeScript #

安装 typeScript cnpm install typescript -D

pnpm install typescript --save

初始化配置文件 tsconfig.json，之后的文件 就可以直接使用。ts 文件开发了 npx tsc --init 配置 ts 识别vue文件,在项目src目录下添加shims-vue.d.ts文件

declare module "*.vue" {
    import { Component } from 'vue';
    const component: Component;
    export default component;
}

安装完 ts 后 将。js 文件后缀都改成。ts

src\store\index.js=>src\store\index.ts src\router\index.js=>src\router\index.ts src\main.js => src\main.ts index.html src="/src/main.js"=> src="/src/main.ts"

element-plus 安装配置 #

cnpm install element-plus --save
or
pnpm install element-plus  --save

在 main.ts 中引入，即可正常使用了

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import router from './router/index';
import App from './App.vue'

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app')

安装成功

vite 配置 alias #

vite.config.js