uni-app 创建typescript 项目并且引入 vant

红龙一一 發表於 2020-5-27 18:40:00

uni-app 创建typescript 项目并且引入 vant

<h2>前言</h2>
在小程序上应用uniapp 然后引入ts ,你说香不香，哈哈哈 
好了先来一发教程：
官网下载软件 https://uniapp.dcloud.io/
我创建的TS项目是，用cli 命令行创建的
全局安装vue-cli
<div class="cnblogs_code">
<pre>npm install -g @vue/cli</pre>
</div>
<h3 id="创建uni-app-1">创建uni-app</h3>
使用正式版（对应HBuilderX最新正式版）
<div class="cnblogs_code">
<pre>vue create -p dcloudio/uni-preset-vue my-ts</pre>
</div>
 
 
<img src="https://img2020.cnblogs.com/blog/983542/202005/983542-20200527182204799-1260684425.png">
选中默认模板（typeScript ）然后回车等待
然后在用编辑器打开 
 
你会发现目录是这样的：
<img src="https://img2020.cnblogs.com/blog/983542/202005/983542-20200527181946083-14245167.png">
 
 
 小程序 page 里面就可以页面啦
在新项目的vue文件中使用内联ts
<div class="cnblogs_code">
<pre><script lang="ts"></pre>
</div>
按需引入vue装饰器
<div class="cnblogs_code">
<pre>import { Component,Vue ,Watch} from "vue-property-decorator";</pre>
</div>
不管干啥先把下面这句话加上。
<div class="cnblogs_code">
<pre>@Component({}) //必须</pre>
</div>
常见装饰器的使用
<div class="cnblogs_code">
<pre>export default class Idnex extends Vue{
private　title:String = 'myTitle'; //响应式属性
private num:Number = 123; //对标之前的data函数返回的对象
get age():Number{ //计算属性
return this.num;
}
onLoad(){
this.printTitle();
let a:string = '123';
}
@Watch('title') //watch，此处是监听title的变化
titleChange(newVal:Number,oldVal:Number){
console.log(newVal,oldVal);
}
printTitle():void{ //methods
console.log('hahahhhaha')
}

}</pre>
</div>
简单的Demo页面
<div class="cnblogs_code">
<pre><template>
<view class="content" @click.self="printTitle">
 <image class="logo" src="/static/logo.png" @click.stop="title = 'ggg'"></image>
 <view class="text-area">
 <text class="title">{{title}}</text>
 <view>{{age}}</view>
 </view>
</view>
</template>

<script lang="ts">
import { Component,Vue ,Watch} from "vue-property-decorator";
@Component({})
export default class Idnex extends Vue{
 private　title:String= 'myTitle'; //响应式属性
 private num:Number = 123; //对标之前的data函数返回的对象
 get age():Number{ //计算属性
 return this.num;
 }
 onLoad(){
 this.printTitle();
 let a:string = '123';
 }
 @Watch('title') //watch，此处是监听title的变化
 titleChange(newVal:Number,oldVal:Number){
 console.log(newVal,oldVal);
 }
 printTitle():void{ //methods
 console.log('hahahhhaha')
 }

}
</script>

<style>
.content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.logo {
 height: 200rpx;
 width: 200rpx;
 margin-top: 200rpx;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 50rpx;
}

.text-area {
 display: flex;
 justify-content: center;
}

.title {
 font-size: 36rpx;
 color: #8f8f94;
}
</style></pre>
</div>
其实我的index 页面是这样的
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_4e175b3e-1f94-4323-8eb4-95b79476b806" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_4e175b3e-1f94-4323-8eb4-95b79476b806" class="cnblogs_code_hide">
<pre><template>
<view class="content">
<image class="logo" :src="'../../static/logo.png'"></image>
<view>
<view v-for="(title, key) in titles" :key="key" class="title">{{title}}</view>
</view>
</view>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Home extends Vue {
titles: string[] = ['title1', 'title2'];
onLoad() {
console.log(this.titles)
}
}
</script>

<style>
.content {
text-align: center;
height: 400upx;
}
.logo{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style></pre>
</div>
View Code</div>
然后运行开发小程序你在小程序上就可以看到了
<img alt="" data-src="https://img2020.cnblogs.com/blog/983542/202005/983542-20200527182912967-507179087.png">
 
 
 
 
是不是很开心哈哈
 
<h2>引入vant</h2>
 
<ul>
<li>
项目根目录下新建 <code>wxcomponents</code> 目录，此目录应该与<code>components</code> 目录同级。
</li>
<li>
直接通过 <code>git</code> 下载 <code>vant-weapp</code> 最新源代码，并将<code>dist</code>目录拷贝到新建的<code>wxcomponents</code>目录下，并重命名<code>dist</code>@vant/weapp。
</li>
</ul>
在你的 pages.json 文件下写
<div class="cnblogs_code">
<pre> "globalStyle": {
"backgroundColor": "light",
"navigationBarBackgroundColor": "#fd4d67",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "white",
"usingComponents": {
 "van-button": "wxcomponents/@vant/weapp/button/index",
 "van-datetime-picker": "wxcomponents/@vant/weapp/datetime-picker/index",
 "van-area": "wxcomponents/@vant/weapp/area/index",
 "van-checkbox": "wxcomponents/@vant/weapp/checkbox/index",
 "van-checkbox-group": "wxcomponents/@vant/weapp/checkbox-group/index",
 "van-picker": "wxcomponents/@vant/weapp/picker/index",
 "van-cell": "wxcomponents/@vant/weapp/cell/index",
 "van-cell-group": "wxcomponents/@vant/weapp/cell-group/index",
 "van-popup": "wxcomponents/@vant/weapp/popup/index",
 "van-tabs": "wxcomponents/@vant/weapp/tabs/index",
 "van-tab": "wxcomponents/@vant/weapp/tab/index",
 "van-radio": "wxcomponents/@vant/weapp/radio/index",
 "van-radio-group": "wxcomponents/@vant/weapp/radio-group/index",
 "van-tag": "wxcomponents/@vant/weapp/tag/index",
 "van-field": "wxcomponents/@vant/weapp/field/index",
 "van-toast": "wxcomponents/@vant/weapp/toast/index",
 "van-switch": "wxcomponents/@vant/weapp/switch/index",
 "van-divider": "wxcomponents/@vant/weapp/divider/index",
 "van-action-sheet": "wxcomponents/@vant/weapp/action-sheet/index",
 "van-dialog": "wxcomponents/@vant/weapp/dialog/index",
 "van-swipe-cell": "wxcomponents/@vant/weapp/swipe-cell/index",
 "van-index-bar": "wxcomponents/@vant/weapp/index-bar/index",
 "van-index-anchor": "wxcomponents/@vant/weapp/index-anchor/index",
 "van-loading": "wxcomponents/@vant/weapp/loading/index"
}</pre>
</div>
 
<h3 id="3-页面中使用引入的ui组件">3. 页面中使用引入的UI组件</h3>
<h3>在App.Vue文件中style部分引入UI组件库</h3>
<div class="cnblogs_code">
<pre><script lang="ts">
export default {
 onLaunch: function() {
 console.log('App Launch')
 },
 onShow: function() {
 console.log('App Show')
 },
 onHide: function() {
 console.log('App Hide')
 }
}
</script>

<style>
@import "/wxcomponents/@vant/weapp/common/index.wxss";
/*每个页面公共css */
</style></pre>
</div>
然后就可以愉快的开始用ts 和 vant啦
<h4><code class="language-css hljs">BOOM shaka laka la 哈哈，开始你的uniapp TS  之旅吧 </code></h4>
面对疾风吧 
来源：https://www.cnblogs.com/yf-html/p/12975355.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 创建typescript 项目 并且引入 vant

uni-app 创建typescript 项目并且引入 vant