uni-app 使用编辑器创建vue3 项目并且运行的操作方法

1. 安装编辑器和uni-app
2. 首先需要安装编辑器，比如VS Code、Sublime Text、Atom等，这里以VS Code为例。

3. 接下来需要安装并配置uni-app，可以使用以下命令：npm install -g @vue/cli和vue create -p dcloudio/uni-preset-vue my-project进行安装和初始化。

4. 创建vue3项目并运行

5. 在VS Code中，打开文件夹my-project，进入到uni-app的项目根目录。
6. 打开命令面板，可以使用快捷键Ctrl+Shift+P或者点击左下角的按钮，输入npm:install对应的命令是npm install，运行后会安装依赖。

7. 安装完成后，输入npm run serve，即可运行uni-app项目，通过浏览器访问http://localhost:8080即可看到效果。

8. 示例说明1

9. 假设现在需要在项目中添加一个页面，首先需要创建一个vue组件，比如在my-project/src/pages目录下创建一个名为test.vue的组件，内容如下：

<template>
  <view class="container">
    <text class="text">{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
  color: #333;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

• 接下来需要在my-project/src/pages目录下的index.js文件中添加路由信息，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Test from './test.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'test',
      component: Test
    }
  ]
})

• 运行项目后，使用浏览器访问http://localhost:8080，即可看到添加的页面。

• 示例说明2

• 假设现在需要在项目中使用uni-ui组件库中的按钮组件，首先需要安装uni-ui组件库，可以使用命令npm install uni-ui -S进行安装。
• 然后在my-project/src/pages/test.vue文件中添加如下代码：

<template>
  <view class="container">
    <text class="text">{{ message }}</text>
    <uni-button type="primary">按钮</uni-button>
  </view>
</template>

<script>
import uniButton from '@/components/uni-button/uni-button.vue'

export default {
  components: {
    uniButton
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
  color: #333;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

• 运行项目后，使用浏览器访问http://localhost:8080，即可看到添加的按钮组件。