汕头网站建设怎么收费,站长工具源码,无棣网站建设,四川已经取消48小时核酸检测使用uniApp的cli模式安装#xff0c;可以使用vscode开发。不用再单独去下载HBuilderX.
1.基础安装 vue3tsuniapp
方法一#xff1a;
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project方法二#xff1a;可以去uni-preset-vue的vite分支下选择vite-ts直接下载zi…使用uniApp的cli模式安装可以使用vscode开发。不用再单独去下载HBuilderX.
1.基础安装 vue3tsuniapp
方法一
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project方法二可以去uni-preset-vue的vite分支下选择vite-ts直接下载zip包解压后粘贴到自己的项目中
2.安装依赖启动
pnpm install 或者 pnpm update
pnpm run dev:mp-weixin 或者 yarn run dev:mp-weixin启动起来后打开微信小程序IDE选择导入然后选择dist目录下dev文件夹下的mp-weixin导入
3.安装pinia
备注这里要指定版本太高了编译会出错
pnpm add pinia2.0.36在src目录创建store文件夹创建user.ts
import { defineStore } from piniaexport const useStore defineStore(main, {state() {return {userInfo: {username:username,phone:phone},}},actions: {setUserInfo(data) {this.userInfo data}}
})修改main.ts,全局引入pinia
import { createSSRApp } from vue;
import * as Pinia from pinia;
import App from ./App.vue;
export function createApp() {const app createSSRApp(App);const store Pinia.createPinia();app.use(store);return {app,Pinia};
}在页面使用pinia
templateview classcontentimage classlogo src/static/logo.png /view classtext-areatext classtitle{{ title }}-{{ userInfo.userInfo.username }}/text/view/view
/templatescript setup langts
import { ref } from vue
import { useStore } from /store/user
const userInfo useStore()
const title ref(Hello)
/script4.安装sass
pnpm i sass -D
pnpm i sass-loader10.1.1 -D页面添加sass标识
style langscss scoped
/style5.配置vue自动导入
安装unplugin-auto-import插件
pnpm add unplugin-auto-import -D修改vite.config.ts
import { defineConfig } from vite;
import uni from dcloudio/vite-plugin-uni;
import AutoImport from unplugin-auto-import/vite
export default defineConfig({plugins: [uni(),AutoImport({imports: [vue],dts: true})],
});修改tsconfig.json
{extends: vue/tsconfig/tsconfig.json,compilerOptions: {sourceMap: true,baseUrl: .,paths: {/*: [./src/*]},lib: [esnext, dom],types: [dcloudio/types]},include: [src/**/*.ts,src/**/*.d.ts,src/**/*.tsx,src/**/*.vue,./auto-imports.d.ts //加入这行代码]
}6.引入uview plus
pnpm add uview-plus2.修改main.ts
import { createSSRApp } from vue;
import * as Pinia from pinia;
import uviewPlus from uview-plus
import App from ./App.vue;export function createApp() {const app createSSRApp(App);const store Pinia.createPinia();app.use(store);app.use(uviewPlus);return {app,Pinia,};
}
3.引入uview-plus的全局SCSS主题文件 在项目根目录的uni.scss中引入此文件
/* uni.scss */
import uview-plus/theme.scss;4.App.vue引入uview-plus基础样式
style langscss/* 注意要写在第一行同时给style标签加入langscss属性 */import uview-plus/index.scss;
/style5.配置easycom组件模式 pages.json
{easycom: {// 注意一定要放在custom里否则无效https://ask.dcloud.net.cn/question/131175custom: {^u--(.*): uview-plus/components/u-$1/u-$1.vue,^up-(.*): uview-plus/components/u-$1/u-$1.vue,^u-([^-].*): uview-plus/components/u-$1/u-$1.vue}},// 此为本身已有的内容pages: [// ......]
}6.修改env.d.ts文件 注意 配置完后可以发现在mian.ts中引入uview-plus时会提示ts报错无法找到模块“uview-plus”的声明文件
/// reference typesvite/client /declare module *.vue {import { DefineComponent } from vue// eslint-disable-next-line typescript-eslint/no-explicit-any, typescript-eslint/ban-typesconst component: DefineComponent{}, {}, anyexport default component
}declare module uview-plus;7.uniapp px转rpx适配安装postcss-pxtorps-pro插件
pnpm add postcss-pxtorpx-pro --save-dev修改vite.config.ts文件
import { defineConfig } from vite;
import uni from dcloudio/vite-plugin-uni;
import AutoImport from unplugin-auto-import/vite;
// px转rpx
import PxToRpx from postcss-pxtorpx-pro;//引入// https://vitejs.dev/config/
export default defineConfig({plugins: [uni(),AutoImport({imports: [vue],dts: true}),],css: {//添加这个csspostcss: {plugins: [PxToRpx({unit: rpx,propList: [*],unitPrecision: 5,selectorBlackList: [no-px],replace: true,mediaQuery: false,minPixelValue: 0,transform: (x) 2 * x,})]},}
});
8.日期格式化工具安装dayjs工具
pnpm add dayjs页面使用具体查看官方文档
import dayjs from dayjs;
dayjs().format(); // 2024-1-26T13:42:3208:00
dayjs().format(YYYY-MM-DD); // 2024-1-26
dayjs().format(YYYY-MM-DD HH:mm:ss); // 2024-1-26 13:47:12
dayjs(1318781876406).format(YYYY-MM-DD HH:mm:ss); // 2014-1-26 00:17:56
