阅读 1150

实践:使用vue-cli搭建一个Vue3-TS的uni-app工程化项目模板(上)

Vue3-TS的uni-app工程化模板搭建

这是我参与更文挑战的第22天,活动详情查看:更文挑战

前言

通过vue-cli创建的项目,更易维护,可以使用非HbuilderX编辑器进行编码,通过终端直接执行编译命令

HbuilderX没有Linux版本(不含wine),但有大神移植了linux版本下的微信开发工具:

因此linux环境下也可以开发微信小程序,这样三种常见操作系统都可以正常的进行开发调试

初始化项目模板

使用uni-app官方提供的vue3基础模板

安装vue-cli

npm install -g @vue/cli
复制代码

初始化vue3工程

vue create -p dcloudio/uni-preset-vue#vue3 uni-vue3-ts-template
复制代码

赖心等待一会儿,即会出现如下选择

图片

这里选择TS版本

此时还会出现一个选择@dcloudio/uni-mp-360的选项,选择第一个(最新的版本)即可

图片

等待一会儿就初始化完毕了,目录结构如下

图片

基础模板

包含jestbabelpostcsstypescript等基本配置文件

咱先运行试试:

yarn install
复制代码

小程序模板还是使用的webpack构建

运行到微信端

# dev
yarn dev:mp-weixin

# prod
yarn build:mp-weixin
复制代码

图片

开发启动速度比使用HbuilderX启动项目要快不少

然后将编译结果dist/dev/mp-weixin导入微信开发者工具即可运行

图片

Sass支持

模板默认是没有支持Sass的

安装sass-loadernode-sass,需要指定版本,版本高了无法运行

yarn add sass-loader@10.0.1 node-sass@4 --dev
复制代码

compiler-sfc

emm 经过实验,目前编译到小程序端 还不支持,后续观望一下

Vant UI

微信小程序

开发微信小程序则选用Vant Weapp

yarn add @vant/weapp
复制代码

在 src目录下创建 wxcomponents 文件夹

拷贝node_modules/@vant 到 wxcomponents中

图片

src/App.vue中引入样式文件

<style>
    /*每个页面公共css */
    /* vant - weapp */
    @import '/wxcomponents/@vant/weapp/dist/common/index.wxss';
</style>
复制代码

src/pages.json中全局注册引用的组件

{
	"globalStyle": {
		"usingComponents": {
			"van-button": "/wxcomponents/@vant/weapp/dist/button/index"
		}
	}
}
复制代码

使用

 <van-button type="primary">测试</van-button>
复制代码

效果

图片

未完待续

  • eslint
  • vuex
  • axios
  • 。。。and more

资料汇总

文章分类
前端
文章标签