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

vite + vue3 + elementPlus + vuex + axios项目搭建及问题_第1张图片

 

你可能感兴趣的:(vue+apicloud,vite,vue3)