grapewheel / avvw Goto Github PK
View Code? Open in Web Editor NEWApicloud + Vue2 + Vant(有赞前端)+ Webpack4打包,极速开发APP框架,将apicloud的渲染效率和vue数据绑定特性发挥极致!
Apicloud + Vue2 + Vant(有赞前端)+ Webpack4打包,极速开发APP框架,将apicloud的渲染效率和vue数据绑定特性发挥极致!
在调试的时候,有时候改动了一个文件,但是同步时还是需要全部同步一遍,是否有办法改进呢?
请问关于pages文件下vue文件过多的时候,dev编译很久都不动,有没有解决的办法呢?
tab1.vue中使用 Tabs,Tab时,会有警告产生,请问这个是怎么产生的呢?
window.tab1Vue = {
name: "tab1",
components: { Header,Tab, Tabs , List,Cell },
data() {
return {
dataSource: ['全部文件','待我签署','代他人签','已完成','我发起的','纸质文件'],
active:1,
list: [],
loading: false,
finished: false
};
},
mounted() {
let navHeight = apicloud.dom("#nav").offsetHeight;
apicloud.dom(".tabContent").style.cssText="margin-top:"+navHeight+"px;";
},
methods: {
onLoad() {
// 异步更新数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
}
}
};
export default window.tab1Vue;
</script>
home.vue自定义了一个header组件,头部组件可以动态显示当前页面名称,请问,头部下面的页面都是openFrameGroup打开的,怎么动态控制头部组件在不同页面动态显示不同的名称?
"dependencies": {
"core-js": "^3.3.2",
"vant": "^2.2.10",
"vue": "^2.6.10"
},
是否是多余的依赖呢?
C:\Users\Administrator\Desktop\avvw\avvw-master\avvw>npm run dev
[email protected] dev C:\Users\Administrator\Desktop\avvw\avvw-master\avvw
webpack-dev-server --open --config webpack.dev.js
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wdm」: wait until bundle finished: /
#FailureMessage Object: 000000CF278FDA50npm ERR! code ELIFECYCLE
npm ERR! errno 3221225477
npm ERR! [email protected] dev: webpack-dev-server --open --config webpack.dev.js
npm ERR! Exit status 3221225477
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2019-04-29T06_35_32_769Z-debug.log
今天测试在自定义loader,无法将代码同步成功。
如何使用其他vue 组件 和框架还有其他的开源框架 如何添加,如何引入其他cdn?望详细告知,感谢~
总感觉本地加载速度很慢,生产环境会好一些吗?
按照说明 步骤都走完,并且自定义loader也链接到wifi,但是一直没有更新代码。。
国际化无法实现,不生效
代码结构有点乱,可以考虑升级到cli3
/*
* webpack.dev.js
*/
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const base = require('./webpack.base')
const fs = require('fs')
const path = require('path')
// Collect the page's names
let files = [];
function getAllVueFile(path) {
let tempArr = fs.readdirSync(path);
tempArr.forEach(function(ele){
let isDirectory = fs.statSync(path + '/' + ele).isDirectory(); //当前文件是否为目录
if(isDirectory){
getAllVueFile(path + '/' + ele);
} else {
files.push({
path: path + '/' + ele,
name: ele.replace('.vue',""),
})
}
})
}
getAllVueFile('./src/pages'); //获取指定目录内所有.vue文件
let entry = {}, htmlWebpacks = [], filePath ='', jsPath = '';
for (let file of files) {
filePath = file.path.replace('.vue','').replace('./src/pages','');
jsPath = retPath((filePath.split('/')).length-2); //动态获取路径, 防止页面分目录后资源无法引用的问题
entry[file.name] = file.path;
htmlWebpacks.push(new HtmlWebpackPlugin({
name: file.name,
vue: jsPath + 'js/vue.js',
fastclick: jsPath + 'js/fastclick.min.js',
filename: `${filePath}.html`,
chunks: [file.name, 'runtime'],
template: './src/templates/page.ejs'
}))
}
function retPath(num){ // 多层文件夹获取资源路径
let path = './';
for (let idx = 0; idx < num; idx++) {
path += '../';
}
return path;
}
// Modify the index html for HMR!
htmlWebpacks.push(new HtmlWebpackPlugin({
env: 'development',
filename: `index.html`,
chunks: [],
template: './src/templates/index.html'
}))
/*
* page.ejs
*/
//如下更改
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.vue %>"></script>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.fastclick %>"></script>
请问下:比如需要热更新如何弄?目前如果需要实时的使用AppLoader调试的话 就得先npm run build才能更新?
这框架让我看到了apicloud的希望,谢啦!
我做页面的时候 body浏览器默认样式是margin:8px 想去掉这个默认样式,在index.html的head头里加了reset.css没有用 请问 如何解决这个问题?
第一次载入以后再APPloader 里面等一会儿才会显示出来页面是正常的吗?
有成功的案例可以看看嘛?
谢谢。
01-30 14:29:35.706 E/app3c (26041): Uncaught SyntaxError: Unexpected token ) at home.js : 1
01-30 14:29:35.752 E/app3c (26041): Uncaught SyntaxError: Unexpected token ) at tab1.js : 1
01-30 14:29:35.754 E/app3c (26041): Uncaught SyntaxError: Unexpected token ) at tab2.js : 1
01-30 14:29:35.756 E/app3c (26041): Uncaught SyntaxError: Unexpected identifier at tab3.js : 1
01-30 14:29:35.758 E/app3c (26041): Uncaught SyntaxError: Unexpected token ) at home.html : 35
现在用框架写了不少页面了,但是pages目录下不支持再新建目录,找起来有些麻烦。
看了下webpack的配置找到了关于pages目录,但是新手不知道要怎么改好,作者有时间看下能不能支持pages下新建目录,哪怕只有一级子目录也好。
配置代码如下:
// Collect the page's names
const files = readdirSync('./src/pages')
let entry = {}, htmlWebpacks = []
for (let file of files) {
let page = file.substr(0, file.indexOf('.'))
entry[page] = `./src/pages/${page}.vue`
htmlWebpacks.push(new HtmlWebpackPlugin({
name: page,
vuejs: 'vue.js',
filename: `${page}.html`,
chunks: [page, 'runtime'],
template: './src/templates/page.ejs'
}))
}
是什么原因呢
请问有微信群或者QQ群可以加入以下吗?
+ 搭配使用的时候, 下拉只能在展示的cell时下拉才有效果,如果cell只有一个,在空白区域下拉是没有效果的,只能在点击cell的时候下拉,请问这个有没有办法解决一下呢.?
我看框架用的是apicloud自带的网络请求啊,这个和axios有啥不同啊,axios好用啊
直接调用popup组件会出现
[Vue warn]: Error in nextTick: "TypeError: Cannot set property 'zIndex' of undefined"
vue.js:1841 TypeError: Cannot set property 'zIndex' of undefined
不知道有没有解决方案。
按说明真机同步后,显示404 Not found,不知道是什么原因?谢谢。
把打包后的widget上传到代码那边了,但是编译后还是以前的,并不是打包后的,这个要怎么处理的
这个项目挺好的,请问有讨论群吗
参考 vant 发现,在这里 需要 修改 page.ejs 这个文件,但是没有效果
我写了一个toast组件(类似此篇文章),现在需要全局注册此组件,避免反复注册。
但是我尝试了两种方法都没法实现,一在src目录下新建main.js,二在page.ejs中调用全局注册函数。
请指教如何处理呢?
另外请问如何不使用APICloud Studio来调用一些APICloud的模块呢?
类似 var UICityList = api.require('UICityList'); 这种引用官方模块写法是不是会被webpack解析掉,
是否就不能在用module store里的模块了呢?
npm run dev
[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
warn @ vue.js:616
validateComponentName @ vue.js:1397
Vue.extend @ vue.js:4870
createComponent @ vue.js:4305
_createElement @ vue.js:4536
createElement @ vue.js:4474
vm._c @ vue.js:4605
render @ home.vue?c09a:8
Vue._render @ vue.js:4649
updateComponent @ vue.js:2906
get @ vue.js:3274
Watcher @ vue.js:3263
mountComponent @ vue.js:2913
Vue.$mount @ vue.js:8629
Vue.$mount @ vue.js:11034
init @ vue.js:4239
createComponent @ vue.js:5683
createElm @ vue.js:5630
createChildren @ vue.js:5758
createElm @ vue.js:5659
patch @ vue.js:6219
Vue._update @ vue.js:2785
updateComponent @ vue.js:2906
get @ vue.js:3274
Watcher @ vue.js:3263
mountComponent @ vue.js:2913
Vue.$mount @ vue.js:8629
Vue.$mount @ vue.js:11034
Vue._init @ vue.js:4739
Vue @ vue.js:4805
setTimeout @ home.html:37
setTimeout (async)
(anonymous) @ home.html:35
vue.js:616 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src/pages/home.vue
warn @ vue.js:616
createElm @ vue.js:5643
patch @ vue.js:6180
Vue._update @ vue.js:2785
updateComponent @ vue.js:2906
get @ vue.js:3274
Watcher @ vue.js:3263
mountComponent @ vue.js:2913
Vue.$mount @ vue.js:8629
Vue.$mount @ vue.js:11034
init @ vue.js:4239
createComponent @ vue.js:5683
createElm @ vue.js:5630
createChildren @ vue.js:5758
createElm @ vue.js:5659
patch @ vue.js:6219
Vue._update @ vue.js:2785
updateComponent @ vue.js:2906
get @ vue.js:3274
Watcher @ vue.js:3263
mountComponent @ vue.js:2913
Vue.$mount @ vue.js:8629
Vue.$mount @ vue.js:11034
Vue._init @ vue.js:4739
Vue @ vue.js:4805
setTimeout @ home.html:37
setTimeout (async)
(anonymous) @ home.html:35
vue.js:616 [Vue warn]: Error in mounted hook: "ReferenceError: api is not defined"
found in
--->
at src/components/header.vuefound in
---> at src/pages/home.vue
warn @ vue.js:616
logError @ vue.js:1837
globalHandleError @ vue.js:1832
handleError @ vue.js:1821
callHook @ vue.js:3047
insert @ vue.js:4260
invokeInsertHook @ vue.js:6051
patch @ vue.js:6268
Vue._update @ vue.js:2785
updateComponent @ vue.js:2906
get @ vue.js:3274
Watcher @ vue.js:3263
mountComponent @ vue.js:2913
Vue.$mount @ vue.js:8629
Vue.$mount @ vue.js:11034
Vue._init @ vue.js:4739
Vue @ vue.js:4805
setTimeout @ home.html:37
setTimeout (async)
(anonymous) @ home.html:35
vue.js:1841 TypeError: Cannot read property 'winHeight' of undefined
at VueComponent.mounted (home.vue:32)
at callHook (vue.js:3045)
at Object.insert (vue.js:4260)
at invokeInsertHook (vue.js:6051)
at Vue.patch [as patch] (vue.js:6268)
at Vue._update (vue.js:2785)
at Vue.updateComponent (vue.js:2906)
at Watcher.get (vue.js:3274)
at new Watcher (vue.js:3263)
at mountComponent (vue.js:2913)
我在#10提到变相地实现真机实时预览的功能,然后我又在想能否通过VS Code去下断点来调试呢?
于是我找到了Debugger for Chrome,基于这个插件我们可以在Chrome中调试程序,但由于没有APICloud环境,我们还是需要到真机/模拟器上去调试。
于是我又找到了一个基于Debugger for Chrome可以实现在VS Code上调试远程设备上的WebView的插件——VS Code - Android WebView Debugging 。
我通过该插件确实可以附加在模拟器中的程序进行调试,HTML代码可以断下来,JS代码无法中断,且提示找不到xx.js。我看了webpack的dev配置,“devtool: 'inline-source-map',”也符合Vue官方文档关于调试的要求。
请作者有时间的时候可以帮我看看,一起实现更好的开发体验!
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.