精华内容
下载资源
问答
  • 解决.vue文件url引用文件的问题 遇到的问题: 在css中引入图片,明明目录结构是对的,还是This dependency was not found; dev好好的,build 之后凉凉,图片加载404 添加图片路径配置 webpack 添加 alias //...
  • vuets声明文件的编写和引用

    千次阅读 2021-03-05 16:05:51
    1、*.d.ts(*为任意名)必须放在vue项目的src下面,即src/MS.d.ts 2、在tsconfig.json里面的includes里加入**/*.d.ts

    1、*.d.ts(*为任意名)必须放在vue项目的src下面,即src/MS.d.ts

    2、在tsconfig.json里面的includes里加入**/*.d.ts

    展开全文
  • ts vue import .js文件

    2021-07-29 19:39:01
    Could not find a declaration file for module ... 解决: src目录新建一个 shims.d.ts文件 添加以下代码: declare module ‘*.js’ 引用文章链接: https://blog.csdn.net/z17864151193/article/details/108518189

    Could not find a declaration file for module ‘xxx‘. ‘xxx‘ implicitly has an ‘any‘ type.
    解决:
    src目录新建一个 shims.d.ts文件
    在这里插入图片描述
    添加以下代码:
    在这里插入图片描述

    declare module ‘*.js’

    引用文章链接:
    https://blog.csdn.net/z17864151193/article/details/108518189

    展开全文
  • import { defineComponent, reactive, ref, toRefs } from 'vue'; //定义一个类型type或者接口interface来约束data type Todo = { id: number, name: string, completed: boolean } export default ...

    基础语法

    定义data

    //script标签上 **lang="ts"**
    <script lang="ts">
    import { defineComponent, reactive, ref, toRefs } from 'vue';
    //定义一个类型type或者接口interface来约束data
    type Todo = {
      id: number,
      name: string,
      completed: boolean
    }
    
    export default defineComponent({
    	//使用reactive时,可以用toRefs解构导出,在template就可以直接使用了
    	const data = reactive({
    	  todoList: [] as Todo[]
    	})
    	//可以使用ref或者toRefs来定义响应式数据
    	const count = ref(0);
    	//使用ref在setup读取的时候需要获取xxx.value,但在template中不需要
    	console.log(count.value)
    	return {
    	  ...toRefs(data)
    	}
    })
    </script>
    

    定义props

    import { defineComponent, PropType} from 'vue';
    interface UserInfo = {
      id: number,
      name: string,
      age: number
    }
    export default defineComponent({
    //props需要使用PropType泛型来约束。
      props: {
        userInfo: {
          type: Object as PropType<UserInfo>, // 泛型类型
          required: true
        }
      },
    })
    

    定义methods

    import { defineComponent, reactive, ref, toRefs } from 'vue';
    
    type Todo = {
      id: number,
      name: string,
      completed: boolean
    }
    
    export default defineComponent({
      const data = reactive({
        todoList: [] as Todo[]
      })
      // 约束输入和输出类型
      const newTodo = (name: string):Todo  => {
        return {
          id: this.items.length + 1,
          name,
          completed: false
        };
      }
      const addTodo = (todo: Todo): void => {
        data.todoList.push(todo)
      }
      return {
        ...toRefs(data),
        newTodo,
        addTodo
      }
    })
    

    vue-router

    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
    import Home from '../views/Home.vue';
    //routes的约束类型是RouteRecordRaw
    const routes: Array< RouteRecordRaw > = [
      {
        path: '/',
        name: 'Home',
        component: Home,
      },
      {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ];
    //createRouter创建router实例
    const router = createRouter({
    //router的模式分为
    	//createWebHistory -- history模式
    	//createWebHashHistory -- hash模式
      history: createWebHistory(process.env.BASE_URL),
      routes
    });
    
    export default router;
    

    扩展路由额外属性

    // 联合类型
    //在实际项目开发中,常常会遇到这么一个场景
    //某一个路由是不需要渲染到侧边栏导航上的
    //此时我们可以给该路由添加一个hidden属性来实现。
    //在ts的强类型约束下,添加额外属性就会报错,那么我们就需要扩展RouteRecordRaw类型。
    type RouteConfig = RouteRecordRaw & {hidden?: boolean}; //hidden 是可选属性
    const routes: Array<RouteConfig> = [
      {
        path: '/',
        name: 'Home',
        component: Home,
        hidden: true,
        meta: {
          permission: true,
          icon: ''
        }
      }
    ];
    

    在setup中使用

    //需要导入useRouter创建一个router实例。
    import { useRouter } from 'vue-router';
    import { defineComponent } from 'vue';
    export default defineComponent({
      setup () {
        const router = useRouter();
        goRoute(path) {
           router.push({path})
        }
      }
    })
    

    vuex#####

    使用this.$store

    import { createStore } from 'vuex';
    export type State = {
      count: number
    }
    
    export default createStore({
      state: {
        count: 0
      }
    });
    
    • 需要创建一个声明文件vuex.d.ts
    import {ComponentCustomProperties} from 'vue';
    import {Store} from 'vuex';
    import {State} from './store'
    declare module '@vue/runtime-core' {
        interface ComponentCustomProperties {
            $store: Store<State>
        }
    }
    

    在setup中使用

    • 定义InjecktionKey
    import { InjectionKey } from 'vue';
    import { createStore, Store } from 'vuex';
    
    export type State = {
      count: number
    }
    // 创建一个injectionKey
    export const key: InjectionKey<Store<State>> = Symbol('key');
    
    • 在安装插件时传入key
    // main.ts
    import store, { key } from './store';
    app.use(store, key);
    
    • 在使用useStore时传入
    import { useStore } from 'vuex';
    import { key } from '@/store';
    export default defineComponent({
      setup () {
        const store = useStore(key);
        const count = computed(() => store.state.count);
        return {
          count
        }
      }
    })
    

    模块

    • 新增一个todo模块。导入的模块,需要是一个vuex中的interface Module的对象,接收两个泛型约束
    • 第一个是该模块类型
    import { Module } from 'vuex';
    import { State } from '../index.ts';
    
    type Todo = {
      id: number,
      name: string,
      completed: boolean
    }
    
    const initialState = {
      todos: [] as Todo[]
    };
    
    export type TodoState = typeof initialState;
    
    export default {
      namespaced: true,
      state: initialState,
      mutations: {
        addTodo (state, payload: Todo) {
          state.todos.push(payload);
        }
      }
    } as Module<TodoState, State>; //Module<S, R> S 该模块类型 R根模块类型
    
    • 第二个是根模块类型
    // index.ts
    export type State = {
      count: number,
      todo?: TodoState // 这里必须是可选,不然state会报错
    }
    
    export default createStore({
      state: {
        count: 0
      }
      modules: {
        todo
      }
    });
    
    • 使用:
    setup () {
      console.log(store.state.todo?.todos);
    }
    

    elementPlus

    yarn add element-plus
    

    完整引入

    import { createApp } from 'vue'
    import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vue';
    import 'dayjs/locale/zh-cn'
    import locale from 'element-plus/lib/locale/lang/zh-cn'
    const app = createApp(App)
    app.use(ElementPlus, { size: 'small', zIndex: 3000, locale })
    app.mount('#app')
    

    按需加载

    • 需要安装babel-plugin-component插件:
    • 安装依赖包
    yarn add babel-plugin-component -D
    
    • 加入配置
    // babel.config.js
    plugins: [
        [
          'component',
          {
            libraryName: 'element-plus',
            styleLibraryName: 'theme-chalk'
          }
        ]
    ]
    
    • 创建 element 组件文件
    import 'element-plus/lib/theme-chalk/index.css';
    import 'dayjs/locale/zh-cn';
    import locale from 'element-plus/lib/locale';
    import lang from 'element-plus/lib/locale/lang/zh-cn';
    import {
      ElAside,
      ElButton,
      ElButtonGroup,
    } from 'element-plus';
    
    const components: any[] = [
      ElAside,
      ElButton,
      ElButtonGroup,
    ];
    
    const plugins:any[] = [
      ElLoading,
      ElMessage,
      ElMessageBox,
      ElNotification
    ];
    
    const element = (app: any):any => {
      // 国际化
      locale.use(lang);
      // 全局配置
      app.config.globalProperties.$ELEMENT = { size: 'small' };
      
      components.forEach(component => {
        app.component(component.name, component);
      });
    
      plugins.forEach(plugin => {
        app.use(plugin);
      });
    };
    
    export default element;
    
    • 引用于项目
    // main.ts
    import element from './plugin/elemment'
    
    const app = createApp(App);
    element(app);
    

    axios

    • axios的安装使用和vue2上没有什么大的区别,如果需要做一些扩展属性,还是需要声明一个新的类型。
    type Config = AxiosRequestConfig & {successNotice? : boolean, errorNotice? : boolean}
    
    import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
    import { ElMessage } from 'element-plus';
    const instance = axios.create({
      baseURL: process.env.VUE_APP_API_BASE_URL || '',
      timeout: 120 * 1000,
      withCredentials: true
    });
    
    // 错误处理
    const err = (error) => {
      if (error.message.includes('timeout')) {
        ElMessage({
          message: '请求超时,请刷新网页重试',
          type: 'error'
        });
      }
      if (error.response) {
        const data = error.response.data;
        if (error.response.status === 403) {
          ElMessage({
            message: 'Forbidden',
            type: 'error'
          });
        }
        if (error.response.status === 401) {
          ElMessage({
            message: 'Unauthorized',
            type: 'error'
          });
        }
      }
      return Promise.reject(error);
    };
    
    type Config = AxiosRequestConfig & {successNotice? : boolean, errorNotice? : boolean}
    
    // 请求拦截
    instance.interceptors.request.use((config: Config) => {
      config.headers['Access-Token'] = localStorage.getItem('token') || '';
      return config;
    }, err);
    
    // 响应拦截
    instance.interceptors.response.use((response: AxiosResponse) => {
      const config: Config = response.config;
    
      const code = Number(response.data.status);
      if (code === 200) {
        if (config && config.successNotice) {
          ElMessage({
            message: response.data.msg,
            type: 'success'
          });
        }
        return response.data;
      } else {
        let errCode = [402, 403];
        if (errCode.includes(response.data.code)) {
          ElMessage({
            message: response.data.msg,
            type: 'warning'
          });
        }
      }
    }, err);
    
    export default instance;
    

    setup script

    • 官方提供了一个实验性的写法,直接在script里面写setup的内容,即:setup script。
    • 之前我们写组件是这样的:
    <template>
      <div>
        {{count}}
        <ImgReview></ImgReview >
      </div>
    </template>
    <script lang="ts">
    import { ref, defineComponent } from "vue";
    import ImgReview from "./components/ImgReview.vue";
    
    export default defineComponent({
      components: {
        ImgReview,
      },
      setup() {
        const count = ref(0);
        return { count };
      }
    });
    </script>
    
    • 启用setup script后:在script上加上setup
    <template>
      <div>
        {{count}}
        <ImgReview></ImgReview>
      </div>
    </template>
    <script lang="ts" setup>
    	import { ref } from "vue";
    	import ImgReview from "./components/ImgReview.vue";
    	const count = ref(0);
    </script>
    
    • 是不是看起来简洁了很多,组件直接导入就行了,不用注册组件,数据定义了就可以用。其实我们可以简单的理解为script包括的内容就是setup中的,并做了return。

    导出方法

    const handleClick = (type: string) => {
      console.log(type);
    }
    

    定义props

    • 使用props需要用到defineProps来定义,具体用法跟之前的props写法类似:
    • 基础用法
    import { defineProps } from "vue";
    const props = defineProps(['userInfo', 'gameId']);
    
    • 构造函数进行检查 给props定义类型:
    const props = defineProps({
      gameId: Number,
      userInfo: {
          type: Object,
          required: true
      }
    });
    
    • 使用类型注解进行检查
    defineProps<{
      name: string
      phoneNumber: number
      userInfo: object
      tags: string[]
    }>()
    
    • 可以先定义好类型:
    interface UserInfo {
      id: number,
      name: string,
      age: number
    }
    
    defineProps<{
      name: string
      userInfo: UserInfo
    }>()
    

    defineEmit

    import { defineEmit } from 'vue';
    
    // expects emits options
    const emit = defineEmit(['kk', 'up']);
    const handleClick = () => {
      emit('kk', '点了我');
    };
    
    <Comp @kk="handleClick"/>
    
    <script lang="ts" setup>
    const handleClick = (data) => {
      console.log(data)
    }
    </script>
    

    获取上下文

    • 在标准组件写法里,setup 函数默认支持两个入参:
      在这里插入图片描述
    • 在setup script 中使用useContext获取上下文:
     import { useContext } from 'vue'
     const { slots, attrs } = useContext();
    
    • 获取到的slots,attrs跟setup里面的是一样的。

    参考地址

    展开全文
  • 我们项目中,可能回想着将typescript引入进来,但是又苦于项目过于繁杂,不能够简单的全部文件都修改成ts文件,那么这个时候能不能在新加入的vue文件引入ts相关的语法,而不需要修改其它的文件呢? 答案是肯定的。...

    前言

    我们项目中,可能回想着将typescript引入进来,但是又苦于项目过于繁杂,不能够简单的全部文件都修改成ts文件,那么这个时候能不能在新加入的vue文件引入ts相关的语法,而不需要修改其它的文件呢?
    答案是肯定的。以下是vue-cli3的修改操作。

    安装依赖

    首先必须要安装typescript 和 相应的loader 转换器 ts-loader,我们把它们先下载安装到当前项目:

    npm install typescript ts-loader --save-dev
    

    接着我们需要在vue项目中不仅仅把script的lang改成“ts”方式,我们在项目启动的时候,也要用修饰器运作,vue组件给我们提供了这样的修饰器,vue-property-decorator,我们进行下载安装:

    npm install vue-property-decorator --save-dev
    

    这个时候,我们在package.json 文件就可以找到下载的三个文件在依赖devDependencies中在这里插入图片描述

    配置vue.config.js

    我们接下来需要在vue.config.js中配置一下,这个是为了让项目能够识别ts文件和vue文件中进行loader的转换,如下:

    module.exports = {
     configureWebpack: {    
        resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },    
        module: {        
          rules: [    
            {    
              test: /\.tsx?$/,    
              loader: 'ts-loader',    
              exclude: /node_modules/,    
              options: {
                appendTsSuffixTo: [/\.vue$/],    
              }    
            }        
          ]    
        }    
      }  
    }  
    

    主要的文件说明配置

    // tsconfig.json
    {
      "compilerOptions": {
        // 与 Vue 的浏览器支持保持一致
        "target": "es5",
        // 这可以对 `this` 上的数据 property 进行更严格的推断
        "strict": true,
        // 如果使用 webpack 2+ 或 rollup,可以利用 tree-shake:
        "module": "es2015",
        "moduleResolution": "node"
      }
    }
    

    把这个文件放在根目录,跟package.json文件同根,这是告诉项目,所写的ts文件需要遵循什么样的语法和规则。

    在src目录下新建vue-shim.d.ts文件

    declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
    }
    shims-vue.d.ts是为了 typescript 做的适配定义文件,因为.vue 文件不是一个常规的文件类型,ts 是不能理解 vue 文件是干嘛的,
    加这一段是是告诉 ts,vue 文件是这种类型的。
    这一段删除,会发现 import 的所有 vue 类型的文件都会报错。
    

    最后测试

    <template>
    	<div>
        <div @click="msgBtn">
          {{test}}
        </div>
    	</div>
    </template>
    <script lang='ts'>
    import doit from "./test"
    import {Component, Vue } from "vue-property-decorator"
    
    export default Vue.extend({
      components: {
        // TableCom
      },
      data() {
        return {
          msg:'typescript'
        };
      },
      created(){
        console.log('created',this.msg)
      },
      mounted() {
        console.log('doit', doit)
        console.log('mounted')
      },
      computed:{
        // test: {
        //   // 需要标注有 `this` 参与运算的返回值类型
        //   get(): string {
        //     return this.msg
        //   },
        //   set(val: string) {
        //     this.msg = val
        //   }
        // }
        test(): any {
          return this.msg
        }
      },
      watch:{
        msg(val:any){
          console.log('watch',val)
        }
      },
      methods:{
        msgBtn(ev:any){
          this.msg = "点击了typescript"
          console.log('点击事件',ev)
        }
      }
    })
    
    </script>
    

    发觉可以看见页面中显示的内容typescript,如下:
    在这里插入图片描述

    完成混入式的ts添加。

    参考文件: https://cn.vuejs.org/v2/guide/typescript.html
    https://www.cnblogs.com/zhongchao666/p/11207117.html
    https://blog.csdn.net/qq_41860203/article/details/110912759

    展开全文
  • Typescript中导入vue文件报错

    千次阅读 2020-08-20 15:13:30
    Typescript导入vue文件爆出找不到模块,解决办法: 创建一个shims.d.ts文件,放置到src/globalDeclare中 declare module '*.vue' { import Vue from 'vue'; export default Vue; } 注意,该模块声明需要单独创建...
  • vue-cli3项目中引用ts

    千次阅读 2020-04-09 09:41:52
    摘要: 原有的项目是通过vue-cli3创建的vue项目,引入ts...npm install vue-property-decorator // 用于在.vue文件中使用ts语法,第一次用-D的方式安装发现不支持 配置文件 # vue.config.js # 使用ts-loader来转...
  • ts如在vue中使用

    2021-09-26 16:25:57
    vue 中如何使用ts 1:在vue项目中安装ts 命令npm install --save-dev typescript npm install --save-dev ts-loader 2:在更目录下创建tsconfig.ts文件或者用命令 tsc --init创建 3:创建完成之后根据自己需要配置ts...
  • Vue文件组件TypeScript写法

    千次阅读 2020-03-17 09:51:00
    最近学习TypeScript(简称ts),用vue2.6.11+TypeScript3写了一个本地记账项目,tsvue的单文件模版中写法和传统vue文件模版挺不一样的。在此记录一下其中的区别。 ts是js的超集,严格的js,变量定义输入输出都...
  • 因为vue3相对vue2来说已经取消了“require”这块,在vue2中不管是页面还是js板块中引用图片途径的话都可以require('@images/xxx.png'),但是经过测试发现vue3如果这种引用的话是会报错的,提示找不到require ...
  • 先修改.vue文件-----------再修改全局工具类.js文件-----待续。。。 正式内容: 第一步安装引入: npm install typescript ts-loader --save-dev npm install vue-property-decorator --save-dev 进行配置:...
  • Vue -Ts入门 Vue-Router (三)

    千次阅读 2020-01-02 14:59:14
    全局路由可以正常使用。这里说明的是组件内路由钩子 ...import { Component } from 'vue-property-decorator'; Component.registerHooks([ 'beforeRouteEnter', 'beforeRouteLeave', 'beforeRout...
  • vue引入ts main.ts报错

    2020-01-13 11:20:14
    vue引入ts main.ts报错: unused expression, expected an assignment or function call ``` import Vue from 'vue' import App from '@/App.vue' import router from '@/router/index.ts' new Vue({ el...
  • Vue中使用ts

    千次阅读 2020-09-18 17:29:13
    vue add @vue/typescript 项目内使用 创建类型声明文件 src/types/index.ts //类型声明 export type Info = { id: number name: string } //交叉类型 export type Infolist = Info & {selected:boolean} //...
  • ts环境中引入js文件有import方式和require方式,import方式需要写个声明,require则不需要,不过eslint会报错,可以在eslinttrc.js中加入 '@typescript-eslint/no-var-requires': 'off' 来关闭验证 这都没啥问题...
  • VUE+TSVue.set为对象设置(添加)一个属性 有时候在使用的时候需要一个唯一的主键绑定,如果没有唯一主键就可以使用Vue.set给对象新加一个属性(组合属性)作为一个唯一值 this.operationRecordData = JSON.parse...
  • 使用vite引入TS后mian.ts引入的vue文件会报错 原因是引入时typescript 只能理解 .ts 文件,无法理解 .vue文件 解决方法 在src文件夹内添加.ts文件,并输入以下内容 declare module '*.vue' { import { Component...
  • vue项目引入typescript(vuets混用)

    千次阅读 2020-07-16 23:55:16
    为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好。故我选择在vue项目中引入ts。 下载typescript和loader npm install typescript ts-...
  • vue-typescript-import-dts TypeScript声明文件,该文件允许对* .vue文件使用导入。 主要用例是捆绑程序环境,例如我们的vue-typescript-import-dts TypeScript声明文件,该文件允许将导入与* .vue文件一起使用。 ...
  • ts引入js报错(vue3)

    2021-04-08 11:11:24
    我在ts文件引用lodash工具集的时候一直报错。 Could not find a declaration file for module 'lodash/merge 解决方案 在Src目录下面有个shims-vue.d.ts文件 打开 在最下面加上一行declare moudle '*' 参照处
  • 使用vue3框架结合ts开发时,在页面导出xxx.vue文件,就会出现报错,有红色的波浪线。 问题描述: 原因分析: ts识别不出.vue文件, 解决方案: 在根目录下面添加一个xxx.d.ts,文件,文件内容为 ![在这里...
  • ts目前还在学习阶段,在用sha1 加密签名的时候遇到一个坑,用var sha1 = require('sha1')导入第三方模块,会报require is not defined这个错误,(似乎是vite的问题,目前还没找到解决方法,如果有大佬知道如何解决...
  • 在使用 VSCode 开发 Vue3 + TS 项目时,编辑器一直有一个报错,因为不影响编译和运行,所以就一直没在意,但这...找不到 .vue 的声明文件,实际上就是 TS 无法识别 .vue 类型的文件。 那么就需要添加一下 .vue 类型文.
  • vue+ts+elementUI:后端返回文件流,前端预览pdf文件 1.配置接口 //获取pdf文件流 export const getPdfService = (paramsData: any) => { const res: any = service.post('/idsapi/api/dispatch/dispatch_file_...
  • vuex文件: ThemeVuex.ts import { Commit } from 'vuex' const state: any = { /** 当前主题 */ currentTheme: 0 } const mutations: any = { SET_CURRENT_THEME(state1: any, v: any) { state1....
  • 最近工作中需要用到echarts,由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生...在一个.vue文件中引入多张图表 创建Welcome
  • 我用TS语法创建的vue项目,封装了axios模块,取名叫http 在main.ts中引入 ``` import http from "./http/http" Vue.prototype.http = http; ``` 然后我在组件中引用出错 ``` ERROR in F:/daimaku2/...
  • vue+ts项目mockjs模拟数据

    千次阅读 2021-01-09 13:36:05
    1、ts中安装mock yarn add @types/mockjs -D ...具体接口institution.ts文件 import Mock, { Random } from 'mockjs'; const list:any = []; for (let i = 0; i < 20; i++) { list.push({ id: Random.id(),
  • 这篇教程适用于手动构建的 vue 项目和 vue-cli 2x 版本的脚手架自动构建的项目。 vue/cli 3x 版本以上的脚手架可以在自动构建时自选集成的 typescript 环境,这并不有利于学习。 新建 vue 项目 ...ts 和 tsl
  • vue 引用静态json文件

    千次阅读 2021-01-29 14:15:57
    import(es6) import jsonData from './xxx/xxx.json' require(node) const jsonData = require('./xxx/xxx.json') ajax(axios) 异步 axios.get('./xxx/xxx.json').then(res=>{console.log(res)})

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,780
精华内容 1,512
关键字:

ts引用vue文件

vue 订阅