uniapp+vue3+vite+ts+pinia 小程序框架搭建

2023-02-05 13:52| 来源: 网络整理| 查看: 265

创建项目通过 HBuilderX 创建安装HBuilderX：官方IDE下载地址参考：通过 HBuilderX 可视化界面通过 vue-cli 命令创建

全局安装 vue-cli

npm install -g @vue/cli 复制代码

使用Vue3/Vite版

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板） npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 复制代码

💡 Tips：

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效） HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径 HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径使用vscode开发安装插件

vue3 官方插件 Volar 进行语言支持

Eslint + Prettier 代码规范约束

uniapp 代码提示

一键创建页面、组件、分包

项目初始化安装pinia

在终端中输入：

npm install pinia 复制代码

接下来在 main.ts 中引入一下：

// main.ts import { createSSRApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' export function createApp () { const app = createSSRApp(App).use(createPinia()) return { app } } 复制代码 Eslint代码检查安装Eslint 依赖

在终端中输入：

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser -D 复制代码安装完依赖后，我们在根目录下新建 .eslintrc.js 文件，内容如下： // .eslintrc.js module.exports = { root: true, env: { browser: true, node: true, es6: true }, parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', ecmaVersion: 2020, sourceType: 'module', jsxPragma: 'React', ecmaFeatures: { jsx: true, tsx: true } }, plugins: ['@typescript-eslint', 'prettier', 'import'], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'prettier' ], overrides: [ { files: ['*.ts', '*.tsx', '*.vue'], rules: { 'no-undef': 'off' } } ], rules: { 'no-unused-vars': ['error', { varsIgnorePattern: '.*', args: 'none' }], '@typescript-eslint/no-unused-vars': 'off', 'vue/component-name-in-template-casing': [ 'error', 'kebab-case', { registeredComponentsOnly: false, ignores: [] } ], 'vue/prop-name-casing': ['error', 'camelCase'], 'vue/require-v-for-key': 'error', 'vue/no-use-v-if-with-v-for': [ 'error', { allowUsingIterationVar: false } ], 'vue/v-bind-style': ['error', 'shorthand'], 'vue/v-on-style': ['error', 'shorthand'], 'no-useless-escape': 0 } } 复制代码在根目录创建ESLint忽略文件配置 .eslintignore ，来指定我们不需要进行检查的目录或文件 node_modules dist *.md *.woff *.ttf .vscode .idea 复制代码在根目录创建 .prettierrc 文件 { "useTabs": false, "tabWidth": 2, "printWidth": 80, "singleQuote": true, "trailingComma": "none", "semi": false, "endOfLine": "auto" } 复制代码在根目录创建 .prettierignore 文件 **/*.svg **/*.ico package.json package-lock.json /dist .DS_Store .eslintignore *.png .editorconfig .gitignore .prettierignore .eslintcache *.lock yarn-error.log **/node_modules/** 复制代码路径别名设置

修改 vite.config.ts ，这里我们先设置两个别名，一个是针对 src 下代码文件，一个是针对图片静态文件，内容如下：

// vite.config.ts import path from 'path' import { defineConfig } from 'vite' import uni from '@dcloudio/vite-plugin-uni' // https://vitejs.dev/config/ export default defineConfig({ plugins: [uni()], resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@img': path.resolve(__dirname, 'src/static/images'), }, }, }) 复制代码

接着我们在 .vue 文件的 template 中可以这么写：

复制代码自动导入

自动导入vue方法

vue3 script setup 写法中，组件间通信有 defineProps 跟 defineEmits 这种编译器宏方法，无需导入就可以直接使用。而对于vue当中导出的代码，我们还是需要手动显示引入，如下：

import { computed, ref } from 'vue' const count = ref(0) 复制代码

那有没有办法像 defineProps 等编译器宏方法一样，无需手动导入就可以直接使用呢？对此，我们可以使用unplugin-auto-import npm包实现。

安装依赖包，在终端中输入：

npm i -D unplugin-auto-import 复制代码

在 vite.config.ts 中引入

// vite.config.ts import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ uni(), AutoImport({ include: [ /.[tj]sx?$/, // .ts, .tsx, .js, .jsx /.vue$/, /.vue?vue/, // .vue /.md$/ // .md ], dts: 'src/auto-imports.d.ts', // 安装好依赖后，重新运行编译即可自动在根目录下生成此声明文件 imports: ['vue', 'uni-app', 'pinia'], eslintrc: { enabled: true, // Default `false` filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json` globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable') } }), ] }) 复制代码

接着我们需要在 tsconfig.ts 文件 include 属性中引入声明文件，否则直接使用ts会报错。

"include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts" ] 复制代码

接着我们就可以直接在代码中无需导入直接使用vue中方法了：

// import { computed, ref } from 'vue' 这行代码不用写了 const count = ref(0) 复制代码运行、发布项目

对应的命令在 package.json 中，可以自行查看。

npm run dev:%PLATFORM% npm run build:%PLATFORM% 复制代码

在微信开发者工具导入打包出来的文件夹

然后，就可以愉快的写代码了。

💡 Tips：

VSCode跟Hbuilder x 不同的是，VSCode不会自动在微信开发者工具导入项目并打开，我们需要手动导入项目，只需要导入一次就行了，以后直接打开微信开发者工具就行了。需要注意的是，需要在 manifest.json 配置微信小程序appid，不然微信开发者工具会报错。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章