精华内容
下载资源
问答
  • 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

    展开全文
  • 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来转...

    摘要: 原有的项目是通过vue-cli3创建的vue项目,引入ts进行开发,不影响之前的页面。

    安装依赖
    npm install typescript ts-loader --D
    npm install vue-property-decorator  // 用于在.vue文件中使用ts语法,第一次用-D的方式安装发现不支持
    
    配置文件
    # vue.config.js
    # 使用ts-loader来转换ts文件
    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": {
      	"baseUrl": "." // 基础目录,如果有配置了paths必须加这一项
        "target": "es5",          // 编译目标平台
        "module": "commonjs",    // 指定模块生成方式,["commonjs", "amd", "umd", "system", "es6", "es2015", "esnext", "none"]
        "strict": true, // 同时开启 alwaysStrict, noImplicitAny, noImplicitThis 和 strictNullChecks
        "esModuleInterop": true, //允许export = 导出,由import from导入
        "experimentalDecorators": true ,//启用装饰器
        "allowJS": true, // 允许编译javascript文件,不加这一条,在ts中引用js文件就需要定义声明文件
        "paths": {
    		"@/*": ["src/*"]  // 设置路径别名 "src/api/index.js" => "@/api/index.js"
    	}
      }
    }
    # 路径别名设置无效;experimentalDecorators: true 无效
    #如果配置项无效是因为在vscode中只会识别工作区第一个项目的tsconfig.js ,解决办法是将项目作为工作区的第一个项目,或者在该工作区的第一个项目中新建tsconfig.json加上这些配置
    
    # 需要在ts环境下识别vue文件,在src目录下添加 vue-shim.d.ts 全局声明文件
    declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
    }
    
    vue文件改造(只针对<script></script>部分,template和style和之前一样的写法,可以有基本组件用法和基于类的组件两种写法)
    # 基本组件用法,和之前的vue组件用法类似,有生命周期函数、data、props、watch、computed、methods
    <script lang="ts">
    	import { Component, Vue } from 'vue-property-decorator'
    	export default Vue.extend({
    		props: {
    		    propA: {
    		      type: Number
    		    },
    		    propB: {
    		      default: 'default value'
    		    },
    		    propC: {
    		      type: [String, Boolean]
    		    }
    	    }
    		data() {
    			return {}
    		},
    		watch: {
    			child(newVal) {},   // 这种写法默认 `immediate`和`deep`为`false`
        		person: {
                	handler: () => {},
                	immediate: true,
                	deep: true
            	}
    		}
    		created(){},
    		methods:{
    			getData():void{...}
    		}
    	})
    </script>
    
    # 基于类的vue组件
    <script lang="ts">
    	import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
    	@Component // 注明了此类为一个Vue组件,不管有没有引用外部组件,这个都要加,否则正常路由跳转会正常显示页面,但是手动刷新页面就会报错不显示页面
    	// 引入外部组件
    	// @Component({
    	//  components: {
    	//   test
    	//  }
    	//})
    	// 组件过滤器(filters)
    	// @Component({
    	//  filters: {
    	//   filterValue(val) {return value + 1}
    	//  }
    	//}) 
    	export default class Index extends Vue {
    		// @Prop 替换Vue中的props属性
    		@Prop(Number) 
    		readonly propA!: number;
            @Prop({default: 'default value'}) 
            readonly propB!: string;
            @propC([String, Boolean]) 
            readonly propC: string | boolean;
            // readonly可以不加,这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值,如果没有,那么你应该使用| undefined
            
    		// 计算属性呢要用到getter
    		get ValA(){
                return 1;
            }
    		
    		//  @Watch装饰器来替换Vue中的watch属性
    		@Watch('child')
    		onChangeValue(newVal: string, oldVal: string){
    		    // todo...
    		}
    
    		@Watch('person', {immediate: true, deep: true})
    		onChangeValue(newVal: Person, oldVal: Person){
    		    // todo...
    		}
    		
    		// 	data里的初始数据可以直接声明为实例的属性
    		msg: string = 'hello world'
    		
    		// 组件methods里面的方法也可以直接声明为实例的方法
      		onClick (): void {
        		window.alert(this.message)
      		}
    		
    		// 生命周期函数直接作为实例方法
    		created(): void {}
    		mounted(): void {}
    	}
    </script>
    

    总结:
    1. 原来的vue文件不受影响,在新的vue文件中使用ts只需要在script标签中加上lang="ts"即可
    2.js文件要使用ts直接将文件后缀改成.ts,

    展开全文
  • ts文件引用js文件异常: TS7016: Could not find a declaration file for module '@/utils/auth'. 'D:/xxxxweb/src/utils/auth.js' implicitly has an 'any' type. 解决方法: 修改tsconfig.json中"strict"的...

    在ts文件中引用js文件异常:

    TS7016: Could not find a declaration file for module '@/utils/auth'. 'D:/xxxxweb/src/utils/auth.js' implicitly has an 'any' type.

    解决方法:

    修改tsconfig.json中"strict"的值为false,禁用严格模式。

     

    展开全文
  • 注意:如果按照下面配置正确发现svg依然无法显示...(vue3.0应该是没有这个问题的)还有就是可能是创建的icons不在src根目录(最开始我尝试在assets中创建文件来装svg图标,但是并没有显示,换到根目录就正常了,具体...

    注意:

    如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的)

    还有就是可能是创建的icons不在src根目录(最开始我尝试在assets中创建文件来装svg图标,但是并没有显示,换到根目录就正常了,具体应该是那里还是有点问题,按道理讲应该是放到assets中也是可以的以后空了研究暂时这样)

    一、安装svg加载插件: npm i svg-sprite-loader -D

    二、定义svg组件

    export default {

    name: 'icon',

    props: {

    name: {

    type: String,

    default: 'home'

    }

    },

    computed: {

    iconName () {

    return `#icon-${this.name}`

    }

    }

    }

    svg {

    fill: currentColor;

    overflow: hidden;

    }

    默认属性设置可以根据自己需要设定。

    三、在src根目录创建装svg的文件夹并创建index.js文件

    文件结构

    index.js内容

    import Vue from 'vue'

    import Icon from '@/components/icon'

    Vue.component('icon', Icon)

    const requireAll = requireContext => requireContext.keys().map(requireContext)

    const req = require.context('./', false, /\.svg$/)

    requireAll(req)

    这个文件没有什么需要处理的基本都是这样写,如果对requireContext不是很理解可以google一下这个requireContext()就知道了。

    四、main.js中全局引用组件

    // The Vue build version to load with the `import` command

    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.

    import Vue from 'vue'

    import App from './App'

    import router from './router'

    import './common/common.scss'

    import '@/icons'

    Vue.config.productionTip = false

    /* eslint-disable no-new */

    new Vue({

    el: '#app',

    router,

    components: { App },

    template: ''

    })

    五、webkit.base.conf.js规则修改:

    添加这部分规则:

    {

    test: /\.svg$/,

    loader: 'svg-sprite-loader',

    include: [resolve('src/icons')],

    options: {

    symbolId: 'icon-[name]'

    }

    }

    修改规则:

    {

    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

    loader: 'url-loader',

    exclude: [resolve('src/icons')],

    options: {

    limit: 10000,

    name: utils.assetsPath('img/[name].[hash:7].[ext]')

    }

    },

    完成,现在可以全局调用:

    Vue3.0+ts配置(不用ts的话就和2.x相同只是规则写法有点不同,可以直接参考规则写法)

    vue3.0+ts无法使用Vue.component(),所以index.ts文件内容有点不同这里直接上代码

    index.ts

    3.0 版本是可以将svg图片放到assets里面到

    然后是main.ts中全局注册

    main.ts文件

    还有基本配置,3.0是链式配置,并且需要先清楚掉默认到svg规则,不清除是不生效的,(还有是写在vue.config.js的,自己建的文件)

    chainWebpack: config => {

    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule

    .test(/\.svg$/)

    .include.add(resolve('./src/assets/icons'))

    .end()

    .use('svg-sprite-loader')

    .loader('svg-sprite-loader')

    .tap(options => {

    options = {

    symbolId: 'icon-[name]'

    }

    return options

    })

    }

    其它基本是和2.x相同的

    展开全文
  • vue的项目中引用了element-ui,使用其上传文件的ui组件,调用后端接口,完成本地文件文件上传 官网解释 https://element.eleme.io/#/zh-CN/component/upload 重点是官网下的属性参数 实现 注册Upload的UI...
  • 01: 仓库Store I: 模块引入 在store文件下index.ts引入所需要的的模块,并且在modules中注册 namespaced: true => namespaced为false的时候...II : 文件名(希望尾缀名.xxxStore.ts) 方便在文件引入的时候看尾缀名...
  • 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 '*' 参照处
  • vue + ts Vuex篇

    千次阅读 2019-09-29 20:09:32
    Vuex对Typescript的支持,仍十分薄弱,官方库只是添加了一些.d.ts声明文件,并没有像vue 2.5这样内置支持。 第三方衍生库vuex-typescript,vuex-ts-decorators,vuex-typex,vuex-class等等,我个人的总结,除了vuex-...
  • Vue读取static文件url

    2020-11-24 14:02:46
    Vue项目在不同的服务器上部署时需要针对该服务器配置请求后端的url路径。 在static文件夹下配置config.js文件 window.aaa= { baseUrl: 'https://www.baidu.com/', }; 在URL.ts中 static getBaseURL() { return ...
  • 在https://www.typescriptlang.org/dt/search中,可通过@types下载的类库,在mian.ts文件中直接引用即可 首先通过npm安装ant-design-vue(2.0rs)版本 npm i --save ant-design-vue@next import { createApp } from 'vue...
  • 文章目录案例说明(总的配置)跨域配置vite.config.js 配置配置目录别名,方便引用引入第三方 案例说明(总的配置) const path = require('path') // vite.config.js # or vite.config.ts console.log(path.resolve(__...
  • 已经安装vue-qriously,但是在引用的时候提示报错信息 在src文件目录下创建一个shime-vue.d.ts文件,在里面写入 declare module 'vue-qriously'
  • 已经安装vue-contextmenu,但是在引用的时候提示报错信息 ...在src文件目录下创建一个 shime-vue.d.ts文件,在里面写入 declare module 'vue-contextmenu' 其他模块找不到差不多一样,可以试试。
  • 当我们项目中遇到需要引用图片目录下svg图片的需求时,如果图片不多我们可以直接在项目文件引用: <script lang="ts"> import svg from './assets/icons/label.svg' console.log(svg) export default {...
  • 因为Typescript默认不能识别.vue文件,导致在引用.vue文件时,提示加载错误。所以需要自己新建一个 .d.ts 文件添加以下内容。这告诉Typescript以.Vue结尾的导入的任何东西都与Vue构造函数本身具有相同的形状。 ...
  • vue-Webpack

    千次阅读 2020-11-26 09:20:39
    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff ....
  • 2.我在组件中直接进行导入引用,这时候TS就报错了。TS2307找不到模块。3.爬墙搜索。4.按照回答操作一下。在shims-vue.d.ts中粘贴进去。declare module '*.svg'{const content:string;export default co...
  • Vue学习Day4

    2020-07-15 23:18:46
    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff ....
  • 相反,编译器将引用保留给文件中的枚举,浏览器向其抛出引用错误。 解决方案 这已经解决了。 非常感谢vue discord服务器上的@pikax将我指向vue上的。 解决方案是将此代码添加到您的webpack配置中: chainWebpack: ...
  • │ index.ts -- main.ts引用文件以全局注册 │ list.ts -- 支持列表 │ resources.ts --加载语言包资源 │ vue.d.ts -- 全局注册时的类型申明文件 │ ├─en-US --英文 │ form.js -- 文件名即为属性名 │ menus....
  • vue认识使用webpack

    2019-07-13 19:30:49
    Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) ...
  • VueApi-05

    2018-07-04 23:40:18
    Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg ....
  • 1. 在网页中会引用哪些常见的静态资源?JS.js .jsx .coffee .ts(TypeScript 类 C# 语言)CSS.css .less .sass .scssImages.jpg .png .gif .bmp .svg字体文件(Fonts).svg .ttf .eot .woff .woff2模板文件.ejs .jade...
  • Vue 07.webpack

    2020-04-10 11:39:18
    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff .woff2 ...
  • 2.在min.ts引用 import Common from '@/utils/Common.js Vue.prototype.utils=Common 注意,如果提示错误utils/Common.js’ implicitly has an ‘any’ type.,在tsconfig.json中添加: 3.使用 t
  • 1.1 在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff .woff2 模板...
  • vue中Webpack的使用

    千次阅读 2019-06-20 13:59:24
    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff ....
  • vue-webpack配置过程及bug锦集 webpack的概念 网页中引用的一些静态资源 js .js .jex .coffee .ts(TypeScript 类c#语言) css .css .less .sass .scss Image .jpg .png .gif .bmp .svg 字体文件(Fonts) ...
  • Vue之webpack的使用

    2019-02-22 16:56:58
    1. 在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .wof...

空空如也

空空如也

1 2 3 4
收藏数 67
精华内容 26
关键字:

ts引用vue文件

vue 订阅