使用Vue3 + Vite 创建uni-app项目（vscode）使用vscode 创建nui-app vite+vue

根据uni-app官方的文档指示构建工程

根据uni-app官方的文档指示，我们目前可以使用以下方式创建vue3 + vite 的uni-app工程项目

使用Vue3/Vite版

# 创建以 javascript 开发的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

下载好后，进行以下操作

cd ./vue3-vite-uniapp
yarn install

然后运行h5模块

yarn dev:h5

成功运行

微信截图_20220517170013.png

安装sass或less样式处理器

npm i -D sass

因为我们是使用Vite进行开发，所以只需要安装一下sass就可以了，不需要额外配置，比如像webpack那样安装loader

配置 ESLINT

npm i -D eslint

初始化配置EsLint

npx eslint --init

选择模式： To check syntax, find problems, and enforce code style 严格模式
选择语言模块：选择Javascript
选择语言框架选择vue.js
是否使用ts，视自己情况而定，我这里不用选择的No
代码在哪里运行使用空格键全选浏览器+node
选择一个风格：选择流行的即可
你想遵循哪一种风格指南? 选择 Standard
您希望您的配置文件是什么格式? 选择Javascript即可
可能会出现下面的提示，选择yes即可
会问你是用npm安装还是yarn安装，视自己情况而定，我这里选择的yarn(yes)

安装完成后，在项目根目录会出现.eslintrc.js文件

继续安装vite-plugin-eslint、@babel/eslint-parser

npm i -D vite-plugin-eslint
npm i -D @babel/eslint-parser

配置vite.config.js文件

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import eslintPlugin from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    // 添加下面这块
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ],
}]

设置别名、路径

vite.config.js

resolve: { // 解析
  alias: { // 重命名路劲
    // 设置路径
    '~': path.resolve(__dirname, './'),
    // 设置别名
    '@': path.resolve(__dirname, './src')
  }
},

配置vuex

目录结构

微信截图_20220517174656.png src\store\modules\user

const user = {
  state: {
    token: ''
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },
  actions: {
    // 登录异步更新
  }
}
export default user

src\store\getters.js

const getters = {
  token: state => state.user.token,
}
export default getters

src\store\index.js

import { createStore } from 'vuex'
import user from './modules/user'
import getters from './getters'

const store = createStore({
  modules: {
    user,
  },
  getters
})

export default store

vuex使用示例

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
      <button @click="setToken">Login</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
const title = ref('Hello')
const store = useStore()
const setToken = () => {
  store.commit('SET_TOKEN', 'token')
  title.value = store.getters.token
}
</script>

多环境配置

分别在根目录下创建文件 .env.development、.env.production、.env.staging 文件内容

# 开发环境配置
VITE_APP_ENV = 'development'

# 接口地址/开发环境
VITE_APP_BASE_API = 'dev-api'

packeage.json

"dev:h5": "uni --mode development",
"build:stage:h5": "uni build --mode staging",
"build:h5": "uni build --mode production",

使用Vue3 + Vite 创建uni-app项目（vscode）