一.cli 创建 vue3 + uni-app + vite项目
1.创建vue3+vite
# 创建以 javascript 开发的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
# 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
2.进入目录
cd my-vue3-project
3.安装依赖
npm i
4.运行
# 运行到 h5
npm run dev:h5
# 运行到 app
npm run dev:app
# 运行到 微信小程序
npm run dev:mp-weixin
5.打包
# 打包到 h5
npm run build:h5
# 打包到 app
npm run build:app
# 打包到 微信小程序
npm run build:mp-weixin
6.创建完成后,打开index.vue页面
- 将原先代码删除
- 选项式 API (Options API) 写法:
- <script>
- export default {
- data() {
- return {
- title: 'Hello',
- }
- },
- onLoad() {},
- methods: {},
- }
- </script>
+ 替换成
+ 组合式 API (Composition API) 写法:
+ <script setup>
+ import { ref } from 'vue'
+ const title = ref("我是首页内容")
+ </script>
二:引入scss样式
1.安装依赖包
npm install sass node-sass sass-loader -D
2.style设置
<style lang="scss" scoped>
</style>