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 = 名称 ;

三：全局使用

 <el-table-column prop="date" :formatter="statusFormatter"  label="创建时间"> </el-table-column>

 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父组件触发子组件方法

在组件定义

 <handlist  ref="childhandlist"></handlist>

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