创建uniapp + TypeScript + uview-ui的前端工程

最新推荐文章于 2025-10-10 09:37:34 发布

原创

最新推荐文章于 2025-10-10 09:37:34 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #typescript #uni-app

该文详细介绍了如何使用VueCLI生成一个基于uniapp和TypeScript的项目，然后安装和配置uview-ui，包括修改package.json，安装依赖，引入uView的JS库和SCSS主题文件，配置easycom组件模式，添加声明文件和vue.config.js，以及处理TS配置。最后展示了使用uview-ui的示例代码。

创建uniapp + TypeScript + uview-ui的前端工程

使用vue命令生成一个uniapp工程，在命令行输入：

vue create -p dcloudio/uni-preset-vue my-ts-uni

选择 默认模板(TypeScript)

安装uview-ui，首先进入my-ts-ui目录

cd my-ts-ui

修改package.json文件

"@dcloudio/vue-cli-plugin-uni": "^2.0.0",

然后输入以下命令：

sudo apt install make
sudo apt install g++
yarn add node-sass@npm:dart-sass -D
yarn add sass-loader@10 -D
yarn add uview-ui

用HbuilderX打开my-ts-ui目录，开始配置工程文件。首先引入uView主JS库，在项目根目录中的main.ts中，引入并使用uView的库，注意这两行要放在import Vue之后。

import uView from 'uview-ui';
Vue.use(uView);

引入uView的全局SCSS主题文件：在项目src目录的uni.scss中引入此文件。

@import 'uview-ui/theme.scss';

引入uView基础样式：在项目src目录的App.vue中引入此文件，这里要注意给style标签加入lang="scss"属性

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>

配置easycom组件模式，此配置需要在项目根目录的pages.json中进行。请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

 {
   
   
    "easycom": {
   
   
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

    // 此为本身已有的内容
    "pages": [
            // ......
    ]
}

温馨提示uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。

添加uview-ui的声明文件，编辑sfc.d.ts文件，在下面添加一行：

declare module 'uview-ui';

src目录下添加vue.config.js文件：

module.exports = {
   
   
  transpileDependencies: ['uview-ui']
};

编辑tsconfig.json文件，增加下面这一个配置：

最低0.47元/天解锁文章