The plug-in volar is installed without prompting.
Solution: 1. Check whether it is the latest version , if yes, enter the extension settings, and check all the options.
2. If it still doesn’t work, you need to update vscoe. In general, an error will be caught in Licatch. It's good to be new
TypeScript intellisense is disabled on template. To enable, configure "jsx": "preserve" in the "compilerOptions" property of tsconfig or jsconfig. To disable this prompt instead, configure "experimentalDisableTemplateSupport": true in "vueCompilerOptions" property.volar
Solution:
Open jsx settings.
If you install eslint, there will be a red line prompt at the beginning.
Solution:
"vue/multi-word-component-names": "off"
configure proxy
vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://101.43.207.24:1190',
rewrite: (path) => path.replace(/^\/api/, ''),
changeOrigin: true
},
// '/storage/file': {
// target: '目标服务器2'
// }
}
},
})
An error occurred in the eslint configuration file
解决：
‘env’: {
‘browser’: true,
‘es2021’: true,
‘node’: true
},
‘extends’: [
‘eslint:recommended’,
‘plugin:vue/vue3-essential’
],
vite3.0 distinguishes different environments
Solution: Use import.meta.env.VITE_SOME_KEY
the document to point out that only variables starting with VITE_ will be displayed, and others are undefined
Property 'env' does not exist on type 'ImportMeta'.
Add the following configuration in the tsconfig.json file to
"types": [ "vite/client" ]
Less in vue3 uses ts variables
v-bind
When js-cookie is refreshed once, add a new token to the original token
From the point of view of the executed steps, refresh the page once. The encapsulated setTokne method will be executed once, so it is ok to add the old judgment
import {
defineStore } from 'pinia'
import {
Names } from '../storeNamespace'
import Cookies from 'js-cookie'
const cookiesStorage: Storage = {
setItem (key, state) {
// 加上判断
if (Cookies.get('token')) return
return Cookies.set('token', state, {
expires: 3 })
},
getItem (key) {
return JSON.stringify({
token: Cookies.get('token')
})
}
}
// import {UserInfo} from '@/@type/store'
// Names.User 就是本地存储的名称
export const useStore = defineStore(Names.User, {
state: () => {
return {
token: '',
table: [] as Array<number>
}
},
persist: {
enabled: true, // 开启存储
// **strategies: 指定存储位置以及存储的变量都有哪些,该属性可以不写，不写的话默认是存储到sessionStorage里边，默认存储state里边的所有数据**
strategies: [
{
key:'token', storage: cookiesStorage, paths: ['token'] }
// storage 存储到哪里 sessionStorage/localStorage
// paths是一个数组,要存储缓存的变量,当然也可以写多个
// paths如果不写就默认存储state里边的所有数据，如果写了就存储指定的变量
]
},
//类似于computed 可以帮我们去修饰我们的值
getters: {
},
//可以操作异步 和 同步提交state
actions: {
setToken(token:string) {
this.token = token
}
}
})
vue-router4.x error api.now is not a function solution
Restart/reinstall vue-develop tools
Publishing online, static images are not loaded
There is no such picture posted online.
The reason is
the official default configuration of vite. If the resource file is packaged in the assets folder, the picture name will be added with a hash value, but it will not be imported directly through :src="imgSrc" when packaged. Analysis, the development environment can be imported normally, but the problem cannot be displayed after packaging
. Solve:
// 获取assets静态资源
const getAssetsHomeFile = (root:string,url: string) => {
return new URL(`../assets/${
root}/${
url}`, import.meta.url).href
}
export default getAssetsHomeFile`
Configure 404 page
{
path: '/:pathMatch(.*)',
name: 'MError',
component: MError,
meta: {
title: '404' }
}
Override some default styles of the ui library
use /deep/
If you want to use the await keyword in setup, you need to use it in the life cycle hook function
solve:
onMounted( async () => {
const data = await getChartList({
})
// const a = data.data.year.reduce((pre,cur) => {
// return pre.concat(cur)
// },[])
// console.log(a)
initChart(pros.chartID, option)
})
Resolving element implicitly has type "any" because an expression of type "string" cannot be used with index type "Object". An index signature with a parameter of type "string" could not be found on type "Object"
Solution:
define an interface
interface DAMNU_ENABLE {
....
[key: string]: boolean, // 字段扩展声明
};
[key: string]: boolean, // 字段扩展声明 声明之后可以用方括号的方式去对象里边的值
or method
export function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object
}
code passed by value
const assignmentFiel = (obj:object) => {
for (const key in obj) {
obj[key] = goods.FromRowitem[key]
}
return obj
}