vue cli4.0项目引入typescript

萝卜施思 發表於 2020-7-17 15:09:00

现有的项目是采用vue cli4.0脚手架生成的，现在想要引入typescript。
　　1.执行安装命令
<div class="cnblogs_code">
<pre>npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript</pre>
</div>
　　2.根目录下新建 tsconfig.json
<div class="cnblogs_code">
<pre>{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"allowJs": false,
"noEmit": true,
"types": ["webpack-env"],
"paths": {
 "@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"exclude": ["node_modules"]
}</pre>
</div>
　　3.新增 shims-vue.d.ts 根目录下新建 shims-vue.d.ts，让 ts 识别 *.vue 文件，文件内容如下：
<div class="cnblogs_code">
<pre>declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}</pre>
</div>
　　4.修改入口文件后缀
<div class="cnblogs_code">
<pre>src/main.js => src/main.ts</pre>
</div>
　　5.改造 .vue 文件
　　<script>替换为<script lang="ts">
　　加上 lang=ts 可以让webpack识别此段代码为 typescript
　　6.使用装饰器插件
　　vue-class-component：强化 Vue 组件，使用 TypeScript装饰器增强 Vue 组件，使得组件更加扁平化 　　vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰
　　Demo：
<div class="cnblogs_code">
<pre>import { Vue, Component ,Watch} from 'vue-property-decorator';
@Component({
components: { Loading }
})
export default class App extends Vue{
old_back:object=null,
transitionName:string = "slide-right";
get...mapState("base", ["loadingStatus"]);
@Watch('$route')
onChangeValue(to:object, from:object){
// console.log('$route', to, from)
 const noBack = to.meta.noBack; //监听路由变化时的状态为前进还是后退
 // 去终节点左，从终节点过来右
 if (to.meta.last) {
 this.transitionName = "slide-left";
 } else if (from.meta.last) {
 this.transitionName = "slide-right";
 } else if (from.meta.leaf) {
 // 从其它叶子页面过来的，往右
 this.transitionName = "slide-right";
 } else {
 if (noBack) {
 // 去到不需要返回的界面往右
 this.transitionName = "slide-right";
 } else {
 this.transitionName = "slide-left";
 }
 }
}
@Watch('loadingStatus')
onChangeValue(newVal: string){
if (newVal) {
 setTimeout(_ => {
 this.setLoading(false);
 }, 1500);
 }
}
 // 弹出系统提示对话框
 showAlert(msg:string) {
 plus.nativeUI.alert(
 msg,
 function() {
 // console.log("User pressed!");
 },
 "报警详情",
 "确定"
 );
}
}</pre>
</div>
....

</div>
<div id="MySignature" role="contentinfo">
<div align="left"><div style="color: #111111"><table style="vertical-align: top">
<tbody><tr>
<td id="tdSign">博客地址：</td><td>http://www.cnblogs.com/jiekzou/</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>博客版权：</td><td>本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 </td>
</tr>
<tr><td>其它：</td><td>
.net-QQ群4：612347965
java-QQ群：805741535
H5-QQ群：773766020 
<div>我的拙作
《Vue3.x+TypeScript实践指南》
《ASP.NET MVC企业级实战》
《H5+移动应用实战开发》
《Vue.js 2.x实践指南》
《JavaScript实用教程》
《Node+MongoDB+React 项目实战开发》
已经出版，希望大家多多支持！</div></td></tr>
</tbody></table></div>
</div>
<img src="https://images.cnblogs.com/cnblogs_com/jiekzou/780174/t_240929014358_%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240929094331.png" style=" border:2px solid #ddd;border-radius:20px;" height="326" width="235"> 
来源：https://www.cnblogs.com/jiekzou/p/13328675.html

頁: [1]

琼殿技术论坛's Archiver

vue cli4.0项目引入typescript