����λ�ã���ҳ > �����̳� > �̳� > ʹ��VSCode�UniApp + TS + Vue3 + Vite��Ŀ

ʹ��VSCode�UniApp + TS + Vue3 + Vite��Ŀ

��Դ������������|��ʱ�䣺2024-09-11 10:11:44 |���Ķ���99��|�� ��ǩ�� Te a T cod SC v ��Ŀ VSCO S C VUE app E3 �� |����������

`uniapp`��һ��ʹ��Vue.js��������ǰ��Ӧ�õĿ�ܣ������߱�дһ�״��룬�ɷ�����iOS��Android���Լ�����С�������ܹ��ǰ�˿����ߵ�ϲ����`uniapp`�ٷ�Ҳ�ṩ���Լ���IDE����`HBuilderX`�����Կ��ٿ���`uniapp`��Ŀ�����Ǻܶ�ǰ�˵�ͬѧ�Ѿ��Ƚ�ϰ��ʹ��`VSC

uniapp ��һ��ʹ��Vue.js��������ǰ��Ӧ�õĿ�ܣ������߱�дһ�״��룬�ɷ�����iOS��Android���Լ�����С�������ܹ��ǰ�˿����ߵ�ϲ���� uniapp �ٷ�Ҳ�ṩ���Լ���IDE���� HBuilderX �����Կ��ٿ��� uniapp ��Ŀ�����Ǻܶ�ǰ�˵�ͬѧ�Ѿ��Ƚ�ϰ��ʹ�� VSCode ȥ������Ŀ��Ϊ�˿��� uniapp ��Ŀ��ȥ�л��������ߣ����Ҷ��µĿ�������ҲҪ��һ������Ӧ���̣������ǰ�˵�ͬѧ�϶��Dz�Ը��ġ��������ǾͿ����� VSCode ��δ uniapp ��Ŀ��

��װnode��pnpm

node �İ�װ�ҾͲ���˵�ˣ�ȥ�������أ�ֱ�Ӱ�װ�Ϳ����ˡ�node��װ���Ժ�����������װ pnpm ���ף� node ��װ�겻���Դ� npm ����� pnpm ����ɶ������򵥽���һ�� npm �� pnpm �����𣬲����ص㡣ʹ�� npm ʱ������ÿ�α���ͬ����Ŀʹ�ã������ظ���װһ�Ρ� ����ʹ�� pnpm ʱ�������ᱻ�洢��һ�����������򣬲�ͬ����Ŀ��������ͬ������ʱ����ӹ�������ȥ���룬��ʡ�˿ռ䡣

pnpm ����ֱ��ȫ�ְ�װ�Ϳ����ˣ�ִ�����µ����

npm install -g pnpm

��װ���Ժ�������������ִ�� pnpm -v ���ܹ������汾�ž�˵����װ�ɹ��ˡ�

����uniapp��Ŀ

��������Ҫʹ�� VSCode ȥ������Ŀ��������ĿҪʹ�� Vue3 �� TypeScript ����������Ҫʹ��������ȥ���� uniapp ��Ŀ���Ƚ������Ǵ�� VSCode ����ĿĿ¼���ҵ���ĿĿ¼�� D:\VSProjects �������ִ���������£�

npx degit dcloudio/uni-preset-vue#vite-ts ��Ŀ����

��Ŀ���� д���Լ���ʵ����Ŀ���ƾͿ����ˣ��ҵ���Ŀ���� my-vue3-uniapp ����������ѹٷ��ṩ��ʹ���� TypeScript �� Vite �� uniapp ��Ŀģ������������Ȼ�����ǾͿ���ȥ���� uniapp ��Ŀ�ˡ�

����ʹ�� VSCode ����Ŀ����Ŀ��Ŀ¼���£�

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

���ǿ��Կ��� src Ŀ¼����ļ����� uniapp ��Ŀ���ļ�������ҳ�桢��ʽ����̬�ļ��ȣ� src Ŀ¼����������Ŀ���ļ����磺 vite.config.ts �� tsconfig.json �ȡ�Ȼ�����Ǵ��նˣ�ʹ�� pnpm ���װһ��������ִ���������£�

pnpm i

ִ����ɺ�������Ϥ�� node_modules Ŀ¼����������Ŀ�У���ͼ��

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

Ȼ������������Ŀ��ִ���������£�

pnpm run dev:mp-weixin

��������������ǵĴ�������΢��С������룬��ͼ��

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

������ɺ����ǵ���Ŀ�г����� dist Ŀ¼�����Ŀ¼���DZ��������Ŀ¼��Ȼ�����Ǵ�΢��С���򿪷����ߣ�Ŀ¼ѡ�� /dist/dev/mp-weixin ����ͼ��

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

AppIDд�����Լ���С�����AppID�����ȷ����

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

����������棬˵�����ǵ� uniapp ��Ŀ��ɹ��ˣ����ҿ���ͨ��΢��С���򿪷�����ȥԤ�������ǿ���ͨ�� VSCode ��ҳ��������Щ���֣�����΢��С���򿪷����ߵĻ����Ƿ��иı䡣����Ͳ��������ʾ�ˡ�

����uni-ui��չ���

�����ǿ�����Ŀʱ�����õ��������������ʹ��uniapp�����������ԶԶ�����ģ����ǻ��谲װ�ٷ��ṩ����չ���uni-ui����ô��װ�أ�����ͬ��ʹ�� pnpm ����ȥ��װ���ھ��尲װuni-ui��չ���֮ǰ����������Ҫ��װ sass �� sass-loader ��

��װsass

 pnpm i sass -D

��װsass-loader

pnpm i [email protected]

�������ڵ�node�汾���Ǵ���16�ģ����ԣ����Ǹ���uniapp�ٷ��Ľ��飬��װ v8.x �İ汾��

������ǰ�װuni-ui�����£�

pnpm i @dcloudio/uni-ui

uni-ui��װ��ɺ����������� easycom �� easycom �ĺô��ǣ������Զ�����uni-ui��������������ֶ� import ����������ǿ�����Ŀ��˵�dz��ķ��㣬���Ǵ� src Ŀ¼�µ� pages.json ������ easycom �ڵ㣺

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui ������������
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// ��������
	pages:[
		// ...
	]
}

����uni-ui��չ��������ӵ����ǵ���Ŀ���ˡ�

Json�ļ���ע��

���������� easycom ��ʱ�򣬷��� pages.json �ļ��е�ע�����д�����ʾ�ģ���������Json�ļ��п�����ע�ͣ����� pages.json �� manifest.json �����ļ����ֿ�����ע�ͣ����������Ҫ�� VSCode ������һ�£��� �ļ�->��ѡ��->���� ����ͼ��

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

Ȼ�������� �ı��༭�� ���ҵ� �ļ� ������ Associations ����������£�

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

Ȼ�����ǻص� pages.json �� manifest.json �������ļ���һ�£�ע�;Ͳ������ˡ�

VSCode�����װ

������Ϊֹ�����ǵ�uniapp��Ŀ�Ѿ�������ˣ������Ѿ��������������ˣ������Ƚ���Ҫ��json�ļ��У�ע������Ҳ�������ˡ�����������������������ܶ࣬������ʹ��uniapp�����ʱ��û����ʾ����ʹ�����DZ�д����ܲ����㣬���ǿ��԰�װ����uniapp��������Щ���⡣������ VSCode ����չ�̵�������һ��uniapp��������Ҫ��װ3�������

  • uniappС������չ
  • uni-create-view
  • uni-helper

��װ��֮�������ڱ�дҳ��ʱ��������ʾ��

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

���½�ҳ��ʱ������uniapp��ص�ѡ�

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

��Щ��������ʵ�ʿ����Ƿdz��ɰ����ġ�

��װuniapp��types

���ǿ��Կ���vue�ļ��У�uniapp�������û�б��̣�˵��ts��û����Ч�ģ������Ȱ�uniapp�������ļ���װһ�£����£�

pnpm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types

������ʹ��pnpm��װʱ���ᱨ�������Ǹ���uni-helper�Ĺٷ��ĵ��е���ʾ���� shamefully-hoist Ϊ true �������Ҫ�����ҵ���Ŀ¼�µ� .npmrc �ļ�����ͼ��

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

Ȼ�����ļ������ӣ�

registry=http://registry.npm.taobao.org
shamefully-hoist=true

Ȼ��������ִ��pnpm���װ�����ļ�����װ��ɺ�����Ŀ��Ŀ¼�£��� tsconfig.json �ļ����� types ���������ǰ�װ�����ͣ�

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    ����
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  }
	����
}

������ɺ����Ƿ��� compilerOptions ���б����ģ������ͣ��ȥ���֣�

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

������ʾ����ѡ�Ҫ����������Ҫ�����������ʾȥ�����������ļ������� "ignoreDeprecations": "5.0", ��

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
   ����
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

���� compilerOptions �Ͳ������ˡ�Ȼ�����Ǵ�vue�ļ�������uniapp�ı�ǩ�������ˣ����ǻ��б�������� VSCode �IJ��֮���г�ͻ��ɵģ����ǿ����������½�����ο��ٷ��ĵ���

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

{
  ����
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  ����
}

Ȼ������ VSCode ��������Ƿ���vue�ļ���uniapp��ǩ�����ˣ�����û�б�����

ʹÓÃVSCode´î½¨UniApp + TS + Vue3 + ViteÏîÄ¿

��� tsconfig.json �������������£�

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  },
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

���

��������ǵ�uniapp��Ŀ�ʹ����ˣ�������ʹ�����Ƿdz���Ϥ�� VSCode ����Ŀ�л������� Vue3 �� Typescript �� Vite ����װ�IJ��Ҳ�Ѿ�װ���ˣ������ͣ��������������ʾ�������������ǵĿ���Ч�ʡ�OK�ˣ�ȥ�������ǵ���ĿӦ�ð�~~~

С���Ƽ��Ķ�

�������������Ľ�Ϊ������Ϣ����������������ͬ���޹۵��֤ʵ��������

Te v1.4
Te v1.4
���ͣ���������������Ӫ״̬����ʽ��Ӫ�������ԣ����� ����

��Ϸ����

��Ϸ���

��Ϸ��Ƶ

��Ϸ����

��Ϸ�

TeChewingum��������һ��ģ�ⴥ�ֽ�����������Ϸ����Ϸ�����������ɰ���СŮ������ҿ��Բ������ֶ���
a 1.0
a 1.0
���ͣ���������������Ӫ״̬����ʽ��Ӫ�������ԣ����� ����

��Ϸ����

��Ϸ���

��Ϸ��Ƶ

��Ϸ����

��Ϸ�

��alittletotheleft������������һ��ܻ�ӭ����������������Ϸ����ҵ������Ƕ��ճ������еĸ���������

�����Ƶ����

����

ͬ������

����

ɨ��ά�����������ֻ��汾��

ɨ��ά����������΢�Ź��ںţ�

��վ�������������������ϴ��������ַ���İ�Ȩ���뷢�ʼ�[email protected]

��ICP��2022002427��-10 �湫��������43070202000427��© 2013~2025 haote.com ������