vite+vue3+elementPlus+vuex+axios项⽬搭建及问题遇到的问题：
1：elementplus 引⼊后功能正常 其⾥⾯ icon ⽆效
2：elementplus 默认英⽂问题
3：vue3把过滤器删掉了我⽤什么替代
4：vue3 routerview 第⼀次加载空⽩页 我想强制刷新怎么办 next updata？
5：引⼊vuex保存变量发现刷新丢失怎么办
6： vite 打包后放服务器js css 不到怎么配置
常规为题：
1：vue3使⽤获取路由传参
2：vue3⽗组件触发⼦组件⽅法
3：vue3 getCurrentInstance ctx获取不到定义的全局⽅法
总结，新技术你不⽤我不⽤，如何⽕起来，新技术你不踩坑我不踩坑，如何让后边⼈搜到答案.....
1：elementplus 引⼊后功能正常 其⾥⾯ icon ⽆效
当我遇到的时候⾮常诧异这玩意还能这样？后来了好久在elementplus社区到了答案，好像是sass问题导致，解决⽅法就是
⼀：安装 sass 然后
⼆：在node-modules到element-plus/lib/theme-chalk/index.css css 修改为 scss
三：main.js到修改 import 'element-plus/lib/theme-chalk/index.scss' 然后重新运⾏就好了
2：elementplus 默认英⽂问题
main.js import 'dayjs/locale/zh-cn' 就好了
3：vue3把过滤器删掉了我⽤什么替代
当我写到表格转换时间的时候下意识⽤过滤器，然后不⾏，发现vue3删除了过滤器 不⽤就不⽤吧
可以替换过去 如 table表格 会有statusFormatter⽅法替代
⼀：新建js⽂件，
export default {
getTime(num, cc) {
//num 是毫秒时间戳
//cc 'day','min','day_min','day_min_s'
if (!num) {
return ""
}
var date = new Date(num * 1000);
//⽇期格式化
var week = ['⽇', '⼀', '⼆', '三', '四', '五', '六'];
var y = FullYear() + '-';
var m = Month() + 1 + '-';
var d = Date() + '';
var ym = FullYear() + '-';
var mm = Month() + 1;
var w = ' 星期' + Day()];
var h = Hours();
// var am=h>=12?' 下午':' 上午';
//h=h>12 ? h-12 : h;
d = d < 10 ? '0' + d : '' + d;
h = h < 10 ? '0' + h : '' + h;
var mi = Minutes();
mi = mi < 10 ? '0' + mi : '' + mi;
var s = Seconds();
s = s < 10 ? '0' + s : '' + s;
var str = '';
if (cc == 'day') {
str = y + m + d;
} else if (cc == 'min') {
str = h + ' : ' + mi;
} else if (cc == 'day_min') {
str = y + m + d + ' ' + h + ' : ' + mi;
} else if (cc == 'day_min_s') {
str = y + m + d + ' ' + h + ' : ' + mi + ' : ' + s;
} else if (cc == 'moth') {
str = ym + mm
}
return str;
}
}
⼆：在main.js 引⼊import 名称 from '路径 ';
三：全局使⽤
<el-table-column prop="date" :formatter="statusFormatter" label="创建时间"> </el-table-column> const { ctx, proxy } = getCurrentInstance();
const statusFormatter=(row,colum)=>{
return proxy.$ated,'day_min')
}
记得return statusFormatter⽅法
4：vue3 routerview 第⼀次加载空⽩页 我想强制刷新怎么办 next updata？
我没有解决此问题，但是可以⽤v-if来更新视图 并建议加在定时器中 settimeout 100 就会显⽰
vue element admin5：引⼊vuex保存变量发现刷新丢失怎么办
此问题避开，建议⽤cookie session 来存储刷新的数据
6： vite 打包后放服务器js css 不到怎么配置
此问题原以为path问题 后来发现 把打包⽂件放置在根⽬录就好了 dist删掉常规问题
1：vue3使⽤获取路由传参
在vue ⽂件中
import { useRouter } from "vue-router";
const router = useRouter();
router.push( {name:"talkdata",query:{id:val.id}});
接受，每个⽂件使⽤都要引⼊router
router.currentRoute.value.query.id
2：vue3⽗组件触发⼦组件⽅法
在组件定义
<handlist ref="childhandlist"></handlist>
const childhandlist = ref();
ablelist();
gettablelist为你想调⽤的⼦组件⽅法
⼦组件⽗组件⽅法都要return childhandlist gettablelist
3：vue3 getCurrentInstance ctx获取不到定义的全局⽅法
建议不要⽤ctx 使⽤proxy
const { ctx, proxy } = getCurrentInstance();
可以参考过滤器⽤法
上边3问
项⽬的话就不上传了看下main.js吧
总的来说vue3还⾏，抛弃了⼀些东西，写法更简单.
import { createApp } from 'vue'
import App from './App.vue'
// axios封装
import axios from './api/httpset';
// vue3移除过滤器使⽤element⾃带⽅法并⾃定义全局函数import comMethod from './ComMethod/index';
//vuex
import state from './store';
import router from './route/router'
// currentRoute.value 获取router传值
// 全局css
import './assets/app.css'
import ElementPlus from 'element-plus'
// element 默认英⽂
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 当未安装sas会icon不⽣效，建议修改⼀下⽂件夹index后缀scss import 'element-plus/lib/theme-chalk/index.scss'
//全局配置
let app = createApp(App)
app.use(ElementPlus, { locale })
app.use(router)
app.use(state)
{
"name": "element-plus-vite-starter",
"version": "0.0.1",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"@vueup/vue-quill": "^1.0.0-alpha.40",
"axios": "^0.21.1",
"element-plus": "^1.0.2-beta.53",
"qs": "^6.10.1",
"sass": "^1.35.1",
"vue": "^3.0.5",
"vue-router": "^4.0.10",
"vuex": "^4.0.2",
"wangeditor": "^4.7.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.0.4",
"@vue/compiler-sfc": "^3.0.5",
"vite": "^2.0.0-beta.12"
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论