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;
}