创建 vue3 + vite + uniapp 基础项目

一.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>

uni-app 项目支持 vue 3.0 介绍，及升级指南

二：引入scss样式

1.安装依赖包

npm install sass node-sass sass-loader -D

2.style设置

<style lang="scss" scoped>
</style>

三：语法糖插件

参考我之前的简书，vue3语法糖插件

四：解决@问题

参考我之前的简书，vue3解决@问题