| 序号 | 更新时间 | 备注 |
|---|---|---|
| 1 | 2024.04.03 | 初始化整理笔记 |
目录
一、安装运行命令
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) {
//利用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;
}
