TOMMYHU

May 30

webstorm vuejs文件模板

tommyhu , 14:23 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(755) , Via Original

May 30

前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器

tommyhu , 13:36 , 大前端 , Comments(0) , Trackbacks(0) , Reads(997) , Via Original

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script>
        function upload(input) {
            //支持chrome IE10
            if (window.FileReader) {
                var file = input.files[0];
                filename = file.name.split(".")[0];
                var reader = new FileReader();
                reader.onload = function() {
                    console.log(this.result)
                    alert(this.result);
                }
                reader.readAsText(file);
            }
            //支持IE 7 8 9 10
            else if (typeof window.ActiveXObject != 'undefined'){
                var xmlDoc;
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = false;
                xmlDoc.load(input.value);
                alert(xmlDoc.xml);
            }
            //支持FF
            else if (document.implementation && document.implementation.createDocument) {
                var xmlDoc;
                xmlDoc = document.implementation.createDocument("", "", null);
                xmlDoc.async = false;
                xmlDoc.load(input.value);
                alert(xmlDoc.xml);
            } else {
                alert('error');
            }
        }
    </script>
    <title>file upload</title>
</head>
<body>
<input id='file' type="file" onchange="upload(this)" />【注意，参数传的是这个input的html元素,若是jquery，此参数是$('#file')[0]】
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 171 ms, 7 Queries.</span>";
//]]>
</script></body>
</html>

Tags: 前台js（type=‘file’）读取本地文件的内容，兼容各种浏览器 , js读取文件

May 30

$mount()手动挂载

tommyhu , 13:28 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(797) , Via Original

$mount()手动挂载
当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：

或者

Tags: $mount()手动挂载

May 30

vuex最简单、最详细的入门文档

tommyhu , 13:26 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(961) , Via Original

https://segmentfault.com/a/1190000009404727
vuex最简单、最详细的入门文档

Tags: vuex最简单、最详细的入门文档

May 29

Vant is not defined

tommyhu , 15:05 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(2301) , Via Original

按官网

报错
Vant is not defined

按需引入后解决

问题：
见官方文档https://youzan.github.io/vant/#/zh-CN/quickstart “快速上手--方式三”，另外github的基于step的说明的确很坑爹，已提交commit了
方式三. 导入所有组件
配置 babel-plugin-import 插件后将不允许导入所有组件的方式

Tags: vant , is , not , defined

May 29

vuejs项目打包

tommyhu , 07:58 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(786) , Via Original

Vue 项目中使用 webpack 将多个组件合并打包并实现按需加载 https://segmentfault.com/a/1190000008376183

Tags: vuejs项目打包

May 28

vue.js报Module build failed: Error: No parser and no file path given, couldn't infer a parser错误的解决方法

tommyhu , 17:51 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(1069) , Via Original

今天VUE的脚手架工具出问题了

ERROR  Failed to compile with 2 errors                                                                       3:41:32 PM

error  in ./src/components/HelloWorld.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at UndefinedParserError.Wrapper (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:1948:14)
    at new UndefinedParserError (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:2055:83)
    at normalize (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:7051:13)
    at formatWithCursor (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:10370:12)
    at C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:31115:15
    at Object.format (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:31134:12)
    at Object.module.exports (C:\Users\Administrator\Desktop\vue\my-project\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./src/components/HelloWorld.vue 11:0-366
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?<a href="http://localhost:8080" target="_blank">http://localhost:8080</a> webpack/hot/dev-server ./src/main.js

error  in ./src/App.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at _construct (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:1928:21)
    at UndefinedParserError.Wrapper (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:1948:14)
    at new UndefinedParserError (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:2055:83)
    at normalize (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:7051:13)
    at formatWithCursor (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:10370:12)
    at C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:31115:15
    at Object.format (C:\Users\Administrator\Desktop\vue\my-project\node_modules\prettier\index.js:31134:12)
    at Object.module.exports (C:\Users\Administrator\Desktop\vue\my-project\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./src/App.vue 11:0-354
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?<a href="http://localhost:8080" target="_blank">http://localhost:8080</a> webpack/hot/dev-server ./src/main.js

解决方法：

运行：
npm i [email protected]~1.12.0
重新运行：

npm run dev

Tags: vue.js报module , build , failed: , error: , no , parser , and , file , path , given, , couldn't , infer , a , parser错误的解决方法

May 27

Vue.js插件开发

tommyhu , 23:09 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(836) , Via Original

Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛，从全局组件，到为应用添加一些额外的功能、如路由(Vue Router)，存储在应用程序里的不可变数据(Vuex)。

一般来说，Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数：Vue 构造器和一个可选的选项对象。尽管，插件系统看起来十分简单，但其仍然可以产生相当大的作用。

你的第一个插件
为了打开vue插件开发的大门，下面我们将先实现一个最简单的插件。这个插件的功能是：当组件被挂载到DOM后，控制台输出Mounted!。

现在，你的插件便可以使用了。你可以通过导入并用Vue.use来显式调用你的插件：Vue.use(MyPlugin)

你可能会奇怪，为什么我不能直接在main.js中调用Vue.mixin()来实现这一点呢？其原因就是：我们向Vue添加全局功能，而没有直接修改应用逻辑。拆分模块这种做法总是极好的，你可以随时添加或移除一个单独的模块。同时，这也使得插件非常容易分发。

添加一些其他的功能
安装应用范围的组件和指令

如果你想把组件或指令打包为一个插件来进行分发，可以这样写：

修改Vue构造器

你可以在插件中以你期待的方式来修改Vue构造器(全局Vue对象)。下面的代码在Vue构造器中添加了一个属性myAddedProperty和一个方法myAddedMethod。

修改Vue实例

不需要任何注入机制便可以将属性或方法直接添加到组件实例，你可以这样来修改Vue构造器的prototype：

这些属性将会被加到所有的组件和Vue实例中。

社区里公认的做法是：添加在Vue prototype里的任何属性都要以美元符$作为其前缀

添加组件的生命周期钩子或属性

如上文中“你的第一个插件”示例所示，你可以通过Mixin添加生命周期钩子对Vue组件进行修改。

Mixin是一个相当重要的话题，但不在本文的讨论范围之内。目前，可以肯定的是，Mixin是一种灵活的分布式复用 Vue 组件的方式，Mixin可以包含任意组件选项并可以混合进其他组件之中。

自动安装插件
对于那些没有在应用中使用模块化系统的用户，他们往往将通过

Tags: vue.js插件开发

webstorm vuejs文件模板

前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器

$mount()手动挂载

vuex最简单、最详细的入门文档

Vant is not defined

vuejs项目打包

vue.js报Module build failed: Error: No parser and no file path given, couldn't infer a parser错误的解决方法

Vue.js插件开发

Categories

热门围观排行榜：

Latest Entries

Latest Comments

最新留言

Archive

这些词比较火爆

新浪微博

Links