Vue3 Vite 整合组件脚手架笔记

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

目录

• 一、安装运行命令
• 二、相关依赖内容
  • 1、http客户端 - alova
  • 2、国际化 - I18n
  • 3、时间管理 - moment
  • 4、pdf预览 - pdfjs-dist
  • 5、doc预览 - docx-preview
  • 6、请求参数处理 - qs
  • 7、全局状态管理 - Pinia
  • 8、路由管理 - vue-router
  • 9、加密工具 - js-base64、js-sha256
• 三、基础版本
  • 1、yarn & Vue3 & vite& node 18+
  • 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形式的字符串，以&符号进行拼接

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) {//利用reactiveconst 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;
}