公司项目(vue3): web框架搭建

框架搭建记录
更新于: 2023-10-09 09:29:02

项目搭建

利用  vite 创建 typescript 项目。

yarn create vite . --template vue-ts

相关技术

  • sass: 全局样式
  • tailwind: 业务
  • pinia: 状态管理
  • http-schema: API 管理
  • react-query: 业务 API 组织，缓存等处理
  • local/session: 缓存管理
  • ui: primevue
  • router 基本的页面跳转: 后面优化 lazy 加载，自动 pages 路由
  • public/assets 共享目: 可以在代码中 /assets/images/hello.png 方式来访问图片
# 支持sass
yarn add --dev sass

初始化 sass

@import 'primevue/resources/themes/lara-light-indigo/theme.css';

body {
  font-size: 16px;
}

添加 primevue

yarn add primevue

添加配置，到 main.ts 中去。

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import '@/assets/styles/main.scss';

// 这一行，可以移到 sass 中去
import 'primevue/resources/themes/lara-light-indigo/theme.css';

import App from './App.vue';

const app = createApp(App);

app.mount('#app');
app.use(PrimeVue);

添加 tailwind

# 1. Create your project
npm create vite@latest my-project -- --template react
cd my-project
# 2. Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# 3. 添加配置文件 tailwind.config.js

tailwind.config.js 配置文件

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Start your build process

在使用  PrimeVue 的时候，要去掉这一行 @tailwind base; 否则会有样式冲突。

@tailwind base;
@tailwind components;
@tailwind utilities;

vue/reat 代码

<template>
  <div class="p-2 bg-slate-100 mb-2">
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </div>
  <div class="p-3 bg-slate-200">
    <HelloWorld msg="Vite + Vue" />
  </div>
</template>
export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Vue App 报错处理

建立文件 src/vue-shim.d.ts，内容如下: https://github.com/vuejs/vue-cli/issues/1198

declare module '*.vue' {
  const SFC: Vue.Component;
  export default SFC;
}

参考