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

序号	更新时间	备注
1	2024.04.03	初始化整理笔记

一、安装运行命令
二、相关依赖内容
- [1、http客户端 - alova](#1、http客户端 - alova)
- [2、国际化 - I18n](#2、国际化 - I18n)
- [3、时间管理 - moment](#3、时间管理 - moment)
- [4、pdf预览 - pdfjs-dist](#4、pdf预览 - pdfjs-dist)
- [5、doc预览 - docx-preview](#5、doc预览 - docx-preview)
- [6、请求参数处理 - qs](#6、请求参数处理 - qs)
- [7、全局状态管理 - Pinia](#7、全局状态管理 - Pinia)
- [8、路由管理 - vue-router](#8、路由管理 - vue-router)
- [9、加密工具 - js-base64、js-sha256](#9、加密工具 - js-base64、js-sha256)
三、基础版本
- [1、yarn & Vue3 & vite& node 18+](#1、yarn & Vue3 & vite& node 18+)
- [2、empty folder initialize](#2、empty folder initialize)

一、安装运行命令

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

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形式的字符串，以&符号进行拼接

javascript 复制代码

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

使用 qs.parse(data)

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

javascript 复制代码

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模式，然后谨记，需要在创建的时候加上相对地址

javascript 复制代码

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

javascript 复制代码

// 全局使用
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

shell 复制代码

# 初始化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 **

javascript 复制代码

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

2、使用 @ 来引入文件

yarn @types/node

javascript 复制代码

//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

javascript 复制代码

//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

javascript 复制代码

//定义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

nginx 复制代码

# 采用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;
}