【uniapp 小程序开发语法篇】资源引入 | 语法介绍 | UTS 语法支持(链接格式)

<template>
  <view>
    <!-- 3.使用组件 -->
    <uni-rate text="1"></uni-rate>
  </view>
</template>
<script>
  // 1. 导入组件
  import uniRate from '@/components/uni-rate/uni-rate.vue';
  export default {
    components: { uniRate } // 2. 注册组件
  }
</script>

<template>
  <view>
    <!-- 2.使用组件 -->
    <uni-rate text="1"></uni-rate>
  </view>
</template>
<script setup>
  // 1. 导入组件
  import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

<template>
  <view>
    <!-- 1.使用组件 -->
    <uni-rate text="1"></uni-rate>
  </view>
</template>
<script>
</script>

<template>
  <view class="container">
    <uni-list>
      <uni-list-item title="第一行"></uni-list-item>
      <uni-list-item title="第二行"></uni-list-item>
    </uni-list>
  </view>
</template>
<script>
  // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
  export default {
    data() {
      return {
      }
    }
  }
</script>

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

npm init -y

npm install packageName --save

import package from 'packageName'
const package = require('packageName')

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }
</style>

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

@font-face {
  font-family: test1-icon;
  src: url('~@/static/iconfont.ttf');
}

<template>
  <view>
    <view>
      <text class="test">&#xe600;</text>
      <text class="test">&#xe687;</text>
      <text class="test">&#xe60b;</text>
    </view>
  </view>
</template>
<style>
@font-face {
  font-family: 'iconfont';
  src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
}
.test {
  font-family: iconfont;
  margin-left: 20rpx;
}
</style>

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  fontFamily: 'fontFamilyName',
  src: "url('https://...')",
});

<script src="js/jquery-1.10.2.js" type="text/javascript"></script>  
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

<script>  
  var util = require('../../../common/util.js');  //require这个js模块  
  var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法  
</script>

function formatTime(time) {  
  return time;//这里没写逻辑  
}  
module.exports = {  
  formatTime: formatTime  
}

// 直接使用js模块的属性。在hello uni-app有示例 
var dateUtils = require('../../../common/util.js').dateUtils; 
// 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例 
import * as echarts from '/components/echarts/echarts.simple.min.js';

<style>  
  @import "./common/uni.css";  
  .uni-hello-text{  
    color:#7A7E83;  
  }  
</style>

<template>
  <view>
    <view>{{userName}}</view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        "userName":"foo"
      }
    }
  }
</script>

import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

<template>
  <view>
    <page-head></page-head>
  </view>
</template>

<script lang="ts">
// 这里编写ts代码
  let s:string = "123"
  console.log(s)
</script>

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "@dcloudio/types"
    ]
  },
  "exclude": [
    "node_modules",
    "unpackage",
    "src/**/*.nvue"
  ]
}

<script lang="ts">
    // 仅展示需要修改的核心代码，完整代码请参考原来的组件。
  import Vue from 'vue';
  export default Vue.extend({
    props: {
      type: {
        type: String,
        default: 'default'
      },
      inverted: {
        type: Boolean,
        default: false
      },
      text: {
        type: [String, Number],
        default: ''
      },
      size: {
        type: String,
        default: 'normal'
      }
    },
    computed: {
      setClass(): string {
        const classList: string[] = ['uni-badge-' + this.type, 'uni-badge-size-' + this.size];
        if (this.inverted === true) {
          classList.push('uni-badge-inverted')
        }
        return classList.join(" ")
      }
    },
    methods: {
      onClick() {
        this.$emit('click')
      }
    }
  })
</script>

<script lang="ts">
  import Vue from 'vue';
  import uniBadge from '../../components/uni-badge.vue';
  export default Vue.extend({
    data() {
      return {
        title: 'Hello'
      }
    },
    components:{
      uniBadge
    }
  });
</script>

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [
    uni(),
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ],
});

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
}