vue-cli3.0以上 + typeScript 教程学习指导（一）入门typeScript

之前在简单的学习了ts后一直想将它与vue结合起来一直没有，对此就开始打算以文章的形式一步一步来从简单入手。

单纯的typeScript如何教程：https://ts.xcatliu.com/

我将写一系列的文章来和大家一起进步，我的所有系列文章会涉及到

1，搭建跑起来

2 数据处理，指令v-if v-for 事件处理，生命周期

3 计算属性 watch

4 父子传值

5 vueX的使用

6 做一个登录项目

7 做一个登录加下订单的项目

所有系列文章地址https://blog.csdn.net/www_share8/category_9877844.html

现在我们就先来搭建项目吧

vue create tslearn

然后选择自定义

然后等待下载就可以

然后运行起来就可以了到这一步就进步算完成我们的第一系列的目标了，但为了后续的系列文章这里需要添加一些东西和改建一些项目。

想来添加 elment-ui https://element.eleme.cn/#/zh-CN/component/input,

vue add element

选择如上选择语言 zh-cn 我选择全部安装

看到 button 按钮就知道我们安装完成了接下来做一些改动删除一些页面和规整一下路由,暂时不想涉及父子页面

App.vue

<template><div id="app"><router-view /></div>
</template><script>export default {name: 'app'
}
</script><style>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

router index

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Index from '../components/HelloWorld.vue'Vue.use(VueRouter)const routes: RouteConfig[] = [{path: '/',name: 'Index',component: Index,},{path: '/about',name: 'About',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () =>import(/* webpackChunkName: "about" */ '../views/About.vue'),},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes,
})export default router

将HelloWorld.vue 变成如下

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";@Component
export default class HelloWorld extends Vue {private msg: string = "测试";
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

配置一下 tsline.json 作用和eslint差不多

{"defaultSeverity": "warning","extends": ["tslint:recommended"],"linterOptions": {"exclude": ["node_modules/**","tests/**"]},"rules": {"trailing-comma": [true,{"singleline": "never","multiline": {"objects": "ignore","arrays": "always","functions": "never","typeLiterals": "ignore"}}],"quotemark": [false,"single"],"indent": [true,"spaces",2],"interface-name": false,"ordered-imports": false,"object-literal-sort-keys": false,"no-consecutive-blank-lines": false,"semicolon": [false,"always","ignore-interfaces"],"member-access": false,"no-console": false,"max-line-length": [false],"no-parameter-properties": false,"no-debugger": false,"no-unused-expression": true,"no-use-before-declare": true,"no-var-keyword": true,"triple-equals": true,"no-empty": [true,"allow-empty-catch"],"no-unnecessary-type-assertion": true,"return-undefined": true,"no-parameter-reassignment": true,"curly": [true,"ignore-same-line"],"no-construct": true,"no-duplicate-super": true,"no-duplicate-switch-case": true,"no-duplicate-variable": [true,"check-parameters"],"no-return-await": true,"no-sparse-arrays": true,"no-switch-case-fall-through": true,"prefer-object-spread": true,"use-isnan": true,"cyclomatic-complexity": [true,20],"no-duplicate-imports": true,"encoding": true,"no-unnecessary-initializer": true,"number-literal-format": true,"one-line": true,"space-before-function-paren": [true,"asyncArrow"],"no-unsafe-finally": true}
}

最终页面就完成了

至此我们就完成了 vue +typeScript的搭建工作，也是所有代码的基础框架搭建好了。

接下来看我的第二系列将和大家一起探讨数据和事件

vue-cli3.0以上 + typeScript 教程学习指导（一）入门typeScript相关推荐

可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题参考文章: (1)01-路由跳转安装less this.$router.re ...
vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
vue cli3.0 引入eslint 结合vscode使用
ESLint 它的目标是提供一个插件化的javascript代码检测工具. 官网地址最近一个项目里,最开始使用cli3.0搭建的时候没有默认选用eslint,导致现在有的人使用其他编辑器,就会出现格 ...
TensorFlow2.0 Guide官方教程学习笔记20 -‘Effective TensorFlow 2‘
本笔记参照TensorFlow Guide官方教程,主要是对'Effictive TensorFlow 2'教程内容翻译和内容结构编排,原文链接:Effictive TensorFlow 2 高效的T ...
TensorFlow2.0 Guide官方教程学习笔记17 -‘Using the SavedModel format‘
本笔记参照TensorFlow官方教程,主要是对'Save a model-Training checkpoints'教程内容翻译和内容结构编排,原文链接:Using the SavedModel f ...
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
错误: throw new Error(^Error:Vue packages version mismatch:- vue@2.6.12 (C:\Users\Administrator\AppDat ...
vue cli3.0 修改配置文件
问题:资源找不到新版的vue-cli构建出来的项目目录没有build和config文件夹,需要改输入路径的地址,需要在项目的根目录添加一个Vue.config.js. 修改资源目录 module. ...

vue-cli3.0以上 + typeScript 教程学习指导（一）入门typeScript

vue-cli3.0以上 + typeScript 教程学习指导（一）入门typeScript相关推荐

最新文章

热门文章

vue-cli3.0以上 + typeScript 教程学习指导（一） 入门typeScript

vue-cli3.0以上 + typeScript 教程学习指导（一） 入门typeScript相关推荐

最新文章

热门文章

vue-cli3.0以上 + typeScript 教程学习指导（一）入门typeScript

vue-cli3.0以上 + typeScript 教程学习指导（一）入门typeScript相关推荐