526互联

vite+vue3+ts+elementPlus前端框架搭建 [一]

发布时间 2023-08-02 12:20:18作者: Jason.裕哥

记录下搭建vite + vue3 + ts + elementPlus项目的过程及遇到的问题。

建议使用pnpm安装依赖，npm切换到pnpm 链接地址：[https://www.pnpm.cn/installation]()

 

1. 运行环境

node -v  
v18.17.0  
npm -v
9.8.1

2. 使用pnpm创建vite项目及安装依赖

npm init vite-app   
pnpm create vite  
√ Project name: ... acui  
√ Select a framework: » Vue  
√ Select a variant: » TypeScript  
进入项目目录  
cd   
安装相关依赖  
pnpm i
启动项目  
pnpm dev
 

3. 安装sass、eslint、router、pinia、axios、element-plus、vueuse/core插件

pnpm i sass -D
pnpm i eslint -D
pnpm i vue-router@4
pnpm i pinia
pnpm i axios
pnpm i element-plus -S  
pnpm i @vueuse/core

pnpm install xxx -S 生产环境的所需依赖

pnpm install xxx -D 开发和测试所需的依赖

4. 配置路由，首页设置

在src目录下新建router文件夹，并在router下新建index.ts进行路由配置。在src目录下创建views/index.vue

import * as VueRouter from "vue-router";
const routes = [
  {
    path: "/",
    component: () => import("../views/index.vue"),
  },
];
export default VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});

如果提示：此时报错，找不到模块“***.vue”或去相应的类型声明

解决方案： src文件夹下创建shims-vue.d.ts,使ts文件能够识别.vue类型的文件

declare module "*.vue" {
  import { App, defineComponent } from "vue";
  const component: ReturnType & {
    install(app: App): void;
  };
  export default component;
}

index.vue 内容如下：

<template>
  <div>
    <h5>{{ msg }}</h5>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
interface State {
  msg: string;
}
const msg = ref("我是Home.vue");
</script>

5. main.ts引入并注入相关模块


import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from "element-plus"
import router from "./router"
import "element-plus/dist/index.css"
import './style.css'
const app = createApp(App)
app.use(ElementPlus).use(router).mount('#app')

6. App.vue添加渲染视图组件

<template>;
  <router-view></router-view>
</template>
<script>
export default {
  name: "App",
};
</script>

7. 重新启动项目

pnpm dev