uni-app preset for vue-cli
dcloudio / uni-preset-vue Goto Github PK
View Code? Open in Web Editor NEWuni-app preset for vue
License: Apache License 2.0
uni-app preset for vue
License: Apache License 2.0
需求来源:老项目是通过HBuilder 创建的,现在想改成vue-cli方式来管理项目,但是通过vue create -p dcloudio/uni-preset-vue
创建默认是下载最新版本,所依赖的包都是最新(v2.8)的版本的包,我想通过改package.json版本进行修改,但是之前通过HBuilder创建的项目没有package.json文件,请教这个该怎么处理
解决思路:
1、提供HBuilder 版本对应的资源包版本
2、dcloudio/uni-preset-vue提供一个参数可以选择对应HBuilder 版本进行创建项目
2.0.1-alpha-35120220706001
控制台报错如下:
gyp ERR! stack Error: Command failed: /usr/local/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "<string>", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (node:child_process:397:12)
gyp ERR! stack at ChildProcess.emit (node:events:390:28)
gyp ERR! stack at maybeClose (node:internal/child_process:1062:16)
gyp ERR! stack at Socket.<anonymous> (node:internal/child_process:448:11)
gyp ERR! stack at Socket.emit (node:events:390:28)
gyp ERR! stack at Pipe.<anonymous> (node:net:687:12)
gyp ERR! System Darwin 21.4.0
gyp ERR! command "/usr/local/Cellar/node/17.3.0/bin/node" "/Users/me/Workspace/android/hello-uniapp/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/vorbote/Workspace/android/hello-uniapp/node_modules/node-sass
gyp ERR! node -v v17.3.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
看报告推断是因为macOS 12系统移除了python2导致无法执行Python2的命令导致,建议官方引入新版本或者在原作者的版本上进行修改
拉取uni-preset-vue最新版vite分支代码,
"@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3021320211119002",
provide的第二个参数内如果存在函数类型会报 [vite:uni-mp-main-js] Unexpected token, expected "," (6:25)
加入// @ts-ignore后正常
// main.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.provide('UseRequestConfigContext', {
// @ts-ignore
requestMethod: (param: any) => {},
})
return {
app,
}
}
Syntax Error: ValidationError: Invalid options object. Sass Loader has been 怎么解决呀,安装了其他版本的sass-loader还是有问题
编译支付宝时,页面正常显示,无报错,但是绑定事件点击不起作用
uniapp类型@dcloudio/types
从tsconfig.json
的types放到env.d.ts
里;
// env.d.ts 文件
/// <reference types="vite/client" />
/// <reference types="@dcloudio/types" />
原因:指定types配置,失去了ts自动包含@types里的所有包的特性,导致使用其他包声明(如lodash、express)都得在types里配置
RT,注意到用cli模式运行APP,仅仅只是在dev目录下进行打包了源代码,并没有启动真机或者模拟器APP,求cli的解决方案。
其次HBuilder中打开项目,提示错误:
17:34:39.981 failed to load config from /Users/wanyun/easement/mini/vite.config.js
17:34:39.984 error during build:
17:34:39.986 Error:
17:34:39.986 You installed esbuild on another platform than the one you're currently using.
17:34:39.988 This won't work because esbuild is written with native code and needs to
17:34:39.990 install a platform-specific binary executable.
17:34:39.992 Specifically the "esbuild-darwin-arm64" package is present but this platform
17:34:39.992 needs the "esbuild-darwin-64" package instead. People often get into this
17:34:39.994 situation by installing esbuild on Windows or macOS and copying "node_modules"
17:34:39.996 into a Docker image that runs Linux, or by copying "node_modules" between
17:34:39.997 Windows and WSL environments.
17:34:39.998 If you are installing with npm, you can try not copying the "node_modules"
17:34:40.000 directory when you copy the files over, and running "npm ci" or "npm install"
17:34:40.001 on the destination platform after the copy. Or you could consider using yarn
17:34:40.003 instead which has built-in support for installing a package on multiple
17:34:40.003 platforms simultaneously.
17:34:40.005 If you are installing with yarn, you can try listing both this platform and the
17:34:40.007 other platform in your ".yarnrc.yml" file using the "supportedArchitectures"
17:34:40.008 feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
17:34:40.009 Keep in mind that this means multiple copies of esbuild will be present.
17:34:40.010 Another alternative is to use the "esbuild-wasm" package instead, which works
17:34:40.012 the same way on all platforms. But it comes with a heavy performance cost and
17:34:40.012 can sometimes be 10x slower than the "esbuild" package, so you may also not
然而我运行 npm i esbuild-darwin-arm64
,HBuilder也是不行的。
能不能tag一下跟hbx对应的版本,不然npm update 一升级就没有合适版本的基座调试了
操作步骤
按官网教程创建Vue3/Vite-ts版,
运行 npm run dev:mp-weixin --minify
报错
/Workspace/my-vue3-project/node_modules/cac/dist/index.js:404
throw new CACError(`Unknown option \`${name.length > 1 ? `--${name}` : `-${name}`}\``);
Error: Unknown option `--minify`
我通过 cli 创建 uni-app ,使用的是这个项目模板,我尝试自定义 vue.config.js 文件
但是好像没有解析。(vue.config.js 配置的内容在 其他vue-cli3创建的项目中可以正常使用,排除自己不会配置vue-cli3 的 vue.config.js文件,只是问问,在 uni-app项目里如何才能生效)
之前是慢但是不报错啊,现在根本没反应了
PS D:\SourceCodes\1test\uniapp> vue create -p dcloudio/uni-preset-vue my-project \ Fetching remote preset dcloudio/uni-preset-vue...
vite-ts分支
在3.0.0-alpha-3031120220208001以后的依赖版本,postcss配置失效了
在TypeScript模板项目中使用装饰器,编译不通过
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class App extends Vue {
mpType = 'app'
}
// import Vue from 'vue';
// export default Vue.extend({
// mpType: 'app',
// onLaunch() {
// console.log('App Launch')
// },
// onShow() {
// console.log('App Show')
// },
// onHide() {
// console.log('App Hide')
// }
// });
</script>
DevTools 无法加载 SourceMap: 无法加载 的内容HTTP 错误:状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE
安装tailwindcss
通过命令 vue create -p dcloudio/uni-preset-vue 创建项目时长时间没有完成.
猜测 是git 存储库中包含 node_modules, 导致下载时间过长.
不过也没有看到错误信息或日志,无法查明原因.
用vite官方脚手架没有问题
拉取uni-preset-vue最新版vite分支代码,
"@dcloudio/uni-h5": "^3.0.0-alpha-3021320211119002",
"@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3021320211119002",
安装AutoImport
// 页面代码
// 放开注释后正常
<script lang="ts">
// import { ref } from 'vue'
export default {
setup() {
const title = ref('Hello')
return {
title,
}
}
}
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
AutoImport({
/* options */
imports: ['vue'],
dts: 'src/auto-imports.d.ts',
}),
],
})
client.ts:22 [vite] connecting...
client.ts:52 [vite] connected.
App.vue:4 App Launch
App.vue:7 App Show
uni-h5.es.js:13934 [Vue warn]: Unhandled error during execution of setup functionundefined
at <Index>
at <AsyncComponentWrapper>
at <PageBody>
at <Page>
at <Anonymous>
at <Layout>
at <App>
warnHandler @ uni-h5.es.js:13934
uni-h5.es.js:13934 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-nextundefined
at <Index>
at <AsyncComponentWrapper>
at <PageBody>
at <Page>
at <Anonymous>
at <Layout>
at <App>
warnHandler @ uni-h5.es.js:13934
index.vue:14 Uncaught (in promise) ReferenceError: ref is not defined
at setup (index.vue:14)
at comp.setup (uni-h5.es.js:13955)
at callWithErrorHandling (vue.runtime.esm.js:7921)
at setupStatefulComponent (vue.runtime.esm.js:7528)
at setupComponent (vue.runtime.esm.js:7484)
at mountComponent (vue.runtime.esm.js:5330)
at processComponent (vue.runtime.esm.js:5305)
at patch (vue.runtime.esm.js:4894)
at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm.js:5519)
at ReactiveEffect.run (vue.runtime.esm.js:162)
DevTools failed to load source map: Could not load content for chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/js/commons.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/js/react.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/js/content.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
App.vue:10 App Hide
App.vue:7 App Show
请问一下,uni-app 通过vue-cli创建的vue3.0项目怎么设置环境变量呢?
之前在运行或者打包脚本添加cross-env NODE_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build就可以传入环境变量,现在咋都不行,cross-env NODE_ENV=test VUE_APP_ENV=test uni build -p mp-weixin这样不行,用vue3的那种方式添加.env.test文件也不行
Vue CLI v3.7.0
✨ Creating project in /Users/xx/cat/Project/xx.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
yarn install v1.15.2
info No lockfile found.
[1/4] 🔍 Resolving packages...
⠄ rc@^1.0.1(node:96182) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain
listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
⠄ which@^1.2.9(node:96182) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 dr
ain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Couldn't find package "copy-webpack-plugin@^4.6.0" required by "@dcloudio/vue-cli-plugin-uni@^2.0.0
-22420190823018" on the "npm" registry.
ERROR command failed: yarn
这样可以做一个 基于这个preset的 内部preset,想拿到generator和template的内容
vue create -p dcloudio/uni-preset-vue uni-app
npm i @dcloudio/uni-ui --save
npm i sass -D
npm i sass-loader -D
// index.vue
<template>
<view class="content">
<uni-list>
<uni-list-item v-for="(account, index) in accounts" :key="index" :note="account.nickname"/>
</uni-list>
</view>
</template>
<script>
import { uniList } from '@dcloudio/uni-ui'
export default {
components: { uniList },
data() {
return {
accounts: []
}
},
onLoad() {
this.getAccounts()
},
methods: {
getAccounts(){
this.accounts = [{ nickname: 1, nickname: 2, nickname: 3, }]
}
}
}
</script>
<style>
....
</style>
错误信息:
ERROR Failed to compile with 1 error 下午3:50:09
error in ./node_modules/@dcloudio/uni-ui/lib/uni-list/uni-list.vue?vue&type=style&index=0&lang=scss&
TypeError: this.getOptions is not a function
at runMicrotasks (<anonymous>)
@ ./node_modules/@dcloudio/uni-ui/lib/uni-list/uni-list.vue?vue&type=style&index=0&lang=scss& 1:0-747 1:763-766 1:768-1512 1:768-1512
@ ./node_modules/@dcloudio/uni-ui/lib/uni-list/uni-list.vue
@ ./node_modules/babel-loader/lib!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--12-1!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./src/pages/index/index.vue?vue&type=script&lang=js&
@ ./src/pages/index/index.vue?vue&type=script&lang=js&
@ ./src/pages/index/index.vue
@ ./src/main.js?{"page":"pages%2Findex%2Findex"}
目录结构
src
┣ hybrid
┃ ┗ html
┃ ┗ local.html
┣ pages
┃ ┣ index
┃ ┃ ┗ index.vue
┃ ┗ webview
┃ ┣ index.vue
┃ ┗ local.vue
┣ static
┃ ┗ logo.png
┣ App.vue
┣ env.d.ts
┣ main.ts
┣ manifest.json
┣ pages.json
┗ uni.scss
local.vue
<template>
<view>
<web-view src="/hybrid/html/local.html"></web-view>
</view>
</template>
运行yarn dev:h5
开发环境,访问/pages/webview/local控制台报错
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/hybrid/html/local.html
运行在app或者打包正式环境运行,一切可以正常显示
heightFix 用 hbuilderx 编译可以自动适应宽度,用cli 不可以。
问题描述
vue-cli安装脚手架,使用自定义模版 - uView,针对启动打包H5,启动以及打包的时候,都报 Failed to resolve loader: sass-loader;
预期结果
预期遍历安装,可以启动以及打包
实际结果
报错,无法安装 uView-ui 这个自定义模版下的依赖
补充信息
应该是在脚手架里直接引入 uView-ui 自定义模版,而该模版下的依赖无法在脚手架下直接安装导致的
vite 版本 resolve alias 失效
在vite.config 配置了
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
用@引用模块是就报错
[plugin:vite:load-fallback] Could not load
D:\code\projects>vue create -p dcloudio/uni-preset-vue uni-app
Vue CLI v4.4.5
? Target directory D:\code\projects\uni-app already exists. Pick an action: Overwrite
Removing D:\code\projects\uni-app...
Fetching remote preset dcloudio/uni-preset-vue...
Vue CLI v4.4.5
✨ Creating project in D:\code\projects\uni-app.
� Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.4
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...###############################################################################] 1063/1063
success Saved lockfile.
Done in 20.93s.
� Invoking generators...
Preset options:
? 请选择 uni-app 模板 默认模板(TypeScript)
� Installing additional dependencies...
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
error https://registry.npm.taobao.org/@types/istanbul-lib-report/download/@types/istanbul-lib-report-3.0.0.tgz?cache=0&sync_timestamp=1588204387374&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fistanbul-lib-report%2Fdownload%2F%40types%2Fistanbul-lib-report-3.0.0.tgz: Integrity check failed for "@types/istanbul-lib-report" (computed integrity doesn't match our records, got "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw== sha1-dRj+UupE3jcvRgp2tezan/tz2KY=")
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
ERROR command failed: yarn
有办法离线使用模板么?
使用cli创建的uni-app项目,选的是typescript模板,然后使用hbuilder3.23 运行在手机上,就提示了 版本不一致的弹窗:本应用使用HBuilderX3.2.2或对应的cli版本编译,而手机端SDK版本是3.2.3.
我更新了 vue/cli,并且重新create了一个 uniapp 项目,还是会出现这个弹窗
vue create -p dcloudio/uni-preset-vue xxx
安装了官方推荐的webpack4之后
npm run dev:h5
就会报错ERROR TypeError: Cannot convert undefined or null to object
想问下这个模板怎么添加windicss
使用此模板创建的项目,uni-ui组件无法使用。没有任何报错。但是自定义的组件是可以使用的。
vue create -p dcloudio/uni-preset-vue#vue3 uniapp-vue3
npm run serve 报错
vite-ts 版本 app端引入uni-ui出错 h5端正常
> cloned dcloudio/uni-preset-vue#vite to my-vue3-project
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@dcloudio%2funi-uts-vite - Not found
npm ERR! 404
npm ERR! 404 '@dcloudio/[email protected]' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/test/.npm/_logs/2022-08-01T16_26_44_978Z-debug-0.log
使用npm 创建项目, 报错了, 网上搜索, 自己看看代码, 没找到怎么解决这个问题.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.