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 = date.getFullYear() + '-';
var m = date.getMonth() + 1 + '-';
var d = date.getDate() + '';
var ym = date.getFullYear() + '-';
var mm = date.getMonth() + 1;
var w = ' 星期' + week[date.getDay()];
var h = date.getHours();
// var am=h>=12?' 下午':' 上午';
//h=h>12 ? h-12 : h;
d = d < 10 ? '0' + d : '' + d;
h = h < 10 ? '0' + h : '' + h;
var mi = date.getMinutes();
mi = mi < 10 ? '0' + mi : '' + mi;
var s = date.getSeconds();
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 '路径 ';
app.config.globalProperties.$co_met = 名称 ;
三：全局使用
const { ctx, proxy } = getCurrentInstance();
const statusFormatter=(row,colum)=>{
return proxy.$co_met.getTime(row.created,'day_min')
}
记得return statusFormatter方法
4：vue3 routerview 第一次加载空白页 我想强制刷新怎么办 next updata？
我没有解决此问题，但是可以用v-if来更新视图 并建议加在定时器中 settimeout 100 就会显示
5：引入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父组件触发子组件方法
在组件定义
const childhandlist = ref();
childhandlist.value.gettablelist();
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.config.globalProperties.$http = axios;
app.config.globalProperties.$co_met = comMethod;
app.use(ElementPlus, { locale })
app.use(router)
app.use(state)
app.mount('#app')
{
"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"
}
}
