Vue3 & Vite 整合组件脚手架笔记

CoffeeAndIce

已于 2025-03-21 14:26:41 修改

阅读量1.5k

点赞数 23

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：笔记 vite vue

于 2024-04-03 17:40:39 首次发布

本文链接：https://blog.csdn.net/CoffeeAndIce/article/details/137352914

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文档详细介绍了如何使用Vue3与Vite搭建组件开发环境，包括安装与配置相关依赖库，如国际化(I18n)、PDF预览(pdfjs-dist)等，以及常见问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序号	更新时间	备注
1	2024.04.03	初始化整理笔记
2	2024.08.20	细化下一些依赖的安装
3	2024.08.29	区分环境的一些配置
4	2025.03.21	补充一些发现的问题

一、安装运行命令

yarn install

yarn run dev

yarn run build

二、相关依赖内容

1、http客户端 - alova

yarn add alova

建议安装状态控制,映射 hook 状态和函数到 vue 实例

yarn add @alova/vue-options

2、国际化 - I18n

yarn add vue-i18n@next --save

import i18n from './i18n/index'

app.use(i18n);
//组件都需要在 app.mount('#app'); 之前

./i18n/index.js配置

import { createI18n } from "vue-i18n";

import sc from "./sc"
import en from "./en"
const  message = {
    sc,
    en
}



const i18n = createI18n({
  locale:  localStorage.lang || "sc", // 设置语言类型
  legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages: message,
});

export default i18n;

sc.js 配置示例

const sc_locale = {
  app: {
    locale: "sc",
  },
};
export default sc_locale;

3、时间管理 - moment

yarn add moment

4、pdf预览 - pdfjs-dist

yarn add pdfjs-dist

5、doc预览 - docx-preview

yarn add docx-preview

6、请求参数处理 - qs

yarn add qs
JavaScript 对象转换为 URL 查询字符串

6.1、全局配置

Vue.prototype.$qs = qs

使用 qs.stringify(data)

对象序列化成url形式的字符串，以&符号进行拼接

const userObj = { name: "zxn", password: "123456" };
let str = this.$qs.stringify(userObj);
console.log("转换后的格式：", str);
// 转换后的格式：转换后的格式： name=zxn&password=123456

使用 qs.parse(data)

将URL形式的字符串解析成对象

const userStr = "name=zxn01&password=980928062";
let userObj = this.$qs.parse(userStr);
console.log("转换后的格式：", userObj);
// { "name": "zxn01", "password": "980928062" }
return userObj;

7、全局状态管理 - Pinia

Vuex的可替代工具

yarn add pinia

8、路由管理 - vue-router

组件都需要在 app.mount(‘#app’); 之前

建议使用hitsory模式，然后谨记，需要在创建的时候加上相对地址

const router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 }),
  history: createWebHistory("/**/"),
  routes,
});

9、加密工具 - js-base64、js-sha256

10、兼容sass

yarn add -D sass

yarn add sass-loader

// 全局使用
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '@/styles/main.scss';`
      }
    }
  }
});
//局部使用
<style lang="scss" module>
.demo-component {
  // Sass code for the component
}

11、mock

yarn add @alova/mock

三、基础版本

1、yarn & Vue3 & vite& node 18+

vite : https://cn.vitejs.dev/guide/

2、empty folder initialize

# 初始化vite
yarn create vite

# 构建vue的模板
yarn create vite my-vue-app --template vue

三、问题定位

1、无法直接打开index.html

打包后的文件提供传统浏览器兼容性支持。

https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

Tips：下列安装插件，连接不上可以加国内源：–registry https://registry.npm.taobao.org/

1、yarn add @vitejs/plugin-legacy

**2、yarn add terser **

export default defineConfig({
...
  plugins: [
  ...
    viteLegacyPlugin({
      //用于兼容直接打开文件访问的模式
      renderModernChunks: false,
    }),
   ...
  ],
...
})

2、使用 @ 来引入文件

yarn @types/node

//vite.config.js
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  ...
  resolve: {
    // 设置路径别名
    alias: {
      '@': resolve(__dirname, './src'),
      '*': resolve('')
    },
  }
  ...
})

3、prop 及 attr注意点

1、 prop需要定义后才可以取值,attr则无需。

2、attr仅能获取字符串，prop则无限制

3.1、prop

//prop初始化定义
//方式1
<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

//方式2
props: ['foo'],
setup(props) {
// setup() 接收 props 作为第一个参数
console.log(props.foo)
}

3.2、attr

//定义data
//方式1
import { reactive } from "vue";
export default {
  name: "header-close",
  props: ["color"],
  setup(props, context) {
      //利用reactive
    const he = reactive({ he: "fwafwa" });
    // setup() 接收 props 作为第一个参数
    console.log(props);
    console.log(props.color);
    console.log(context.attrs);
    console.log(context.attrs.ha);
    console.log(skinColor);
    return { he };
  },
};

//方式2
data(){
    he: "fwafwa"
}

4、挂载子组件前的处理

可以延迟加载

5、代理配置方面

建议location 与基础地址（通常指的是路由设置的基础地址）相匹配

本地资源路径 /opt/test/dist

# 采用root的模式
location /dist {
    root  /opt/test;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

# 采用alias的模式
location /dist {
    root  /opt/test/dist;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

6、环境内容配置

如何配置多个环境信息，使得可以在不同需求下用不同环境内容去调试

假设这里存在两个环境，dev 和 prod ,需要针对调用http使用不同 baseUrl

则设置dev，创建文件 .env.development

VITE_Base_URL=./
VITE_Http_URL=http://localhost:8888

则设置prod，创建文件 .env.production

VITE_Base_URL=/dist/
VITE_Http_URL=http://domain

如何使用

可以通过 import.meta.env.VITE_Http_URL 直接引用

//例如配置 Alova
export const request = createAlova({
  baseURL: import.meta.env.VITE_Http_URL,
  statesHook: VueOptionsHook,
  requestAdapter:
    process.env.NODE_ENV === "development" ? mockAdapter : GlobalFetch,
  responded: (response) => response.json(),
});

如何变更环境

在package.json 中，若是本地测试，变更为prod 环境，则变更如下文件

  "scripts": {
    "dev": "vite --mode production",
    "build": "vite build",
    "preview": "vite preview"
  },

7、一些开发遇到的问题

7.1、element - ui 默认忽视多个空格的情况

这里具体是会将多个空格变为一个空格，导致若是查询的时候，可能会查询不出的情况
具体就是： 你好 ->你好

.el-table .cell {
  white-space: pre !important
}