17、vue-cli3 js项目中引入ts混用（typeScript）
<h4 id="说明">说明：</h4><blockquote>
<p>vue3.0搭建的项目，不过没有引入ts，后来需要用到一个插件是用ts写的，所以vue要用到ts。。。</p>
</blockquote>
<h3 id="一安装typescript及loader">一、安装typescript及loader</h3>
<blockquote>
<p>npm install typescript ts-loader --save-dev</p>
</blockquote>
<p><img src="https://upload-images.jianshu.io/upload_images/12200279-66167e3888df7aa4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image" loading="lazy"></p>
<h3 id="二安装vue-property-decorator">二、安装vue-property-decorator</h3>
<blockquote>
<p>npm install vue-property-decorator --save-dev</p>
</blockquote>
<p><img src="https://upload-images.jianshu.io/upload_images/12200279-1f3adccd5c8af473.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image" loading="lazy"></p>
<h3 id="三配置vueconfigjs">三、配置vue.config.js</h3>
<pre><code>module.exports = {
configureWebpack: {
resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
}
</code></pre>
<pre><code>var path = require('path');
module.exports = {
outputDir:'vuecli3',
publicPath: './',
devServer: {
// 设置主机地址
host: 'localhost',
// 设置默认端口
// port: '8080',
// 打开浏览器
open: true,
port: 9000,
// 设置代理
// proxy: {
// '/api': {
// target: 'http://localhost:8081',
// pathRewrite: {
// '^/api': '/mock'
// }
// }
// }
},
configureWebpack: {
resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
}
</code></pre>
<p><img src="https://upload-images.jianshu.io/upload_images/12200279-9cc2352a7e3c02e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image" loading="lazy"></p>
<h3 id="四新建tsconfigjson放在项目根目录">四、新建tsconfig.json放在项目根目录</h3>
<pre><code>{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"strictNullChecks": true,
"esModuleInterop": true,
"experimentalDecorators": true
}
}
</code></pre>
<p><img src="https://upload-images.jianshu.io/upload_images/12200279-b81aa3ee64172f02.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image" loading="lazy"></p>
<h3 id="五在src目录下新建vue-shimdts文件">五、在src目录下新建vue-shim.d.ts文件</h3>
<p>不加此文件会报错。。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/12200279-eb46e524553092c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image" loading="lazy"></p>
<pre><code>declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
</code></pre>
<h3 id="六运行测试">六、运行测试</h3>
<pre><code><template>
<div>
<el-button type="primary" @click="msgBtn">{{msg}}</el-button>
<el-card shadow="always">
{{test}}
</el-card>
</div>
</template>
<script lang='ts'>
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('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>
</code></pre>
<p><img src="https://upload-images.jianshu.io/upload_images/12200279-14ed8248d2aedd71.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image" loading="lazy"></p>
<p><img src="https://upload-images.jianshu.io/upload_images/12200279-9a8bb00603c76fa5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/zhongchao666/p/11207117.html
頁:
[1]