❶ 一般vue项目中的src文件夹下的文件,都有什么用
这些文件夹本质是一样的,如果写得比较规范的话就能从名字中知道相应的功能。
common一般放全局静态变量或方法
router放路由
filters放过滤器
components放主要的页面和功能
excel放excel文件
directive放的是一些组件
assets放一些静态资源或css文件
❷ vue前端如何实现文件文件夹系统
文件上传页面的前端可以选择使用一些比较好用的上传组件,例如网络的开源组件WebUploader,泽优软件的up6,这些组件基本能满足文件上传的一些日常所需功能,如异步上传文件,文件夹,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,甚至是大文件断点续传,大文件秒传。
需求:
支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验;
内网百兆网络上传速度为12MB/S
服务器内存占用低
支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构。
支持PC端全平台操作系统,Windows,Linux,Mac
支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。
支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端文件夹层级结构与本地相同。
❸ vue开发中,登录注册页面用建文件夹吗 如果用的话文件夹是放到哪个目录里啊是src里吗
看个人习惯,放在src中的某个文件夹里,component一般用来放组件,可以新建一个文件夹pages或者views存放,只要用的时候路径对就可以
❹ vue2.0项目上线后,进去后变成如图所视,刷新没用,必须关掉移动端在进去才有用,怎么回事
一、前言
之前我们通过nodejs并利用vuecli来创建vue项目,非常方便的就实现了前后端一体化的操作。不过在项目开发的时候为了提高开发效率我们需要依赖于一些插件帮助我们提高开发效率,那么今天我们就来介绍一些优秀的vue插件并且学会如何制作属于自己的插件。
二、单文件组件
在我们之前讲到的 nodejs轻松创建第一个vue应用中篇,这篇文章的时候,我们创建了一个vue的原生应用,效果如图所示:
那么现在我们需要把默认的页面换成其它的vue组件来显示,首先我们创建一个几个js文件,如图:
然后创建一个vue组件并设置组件的属性,如图:
然后我们将组件添加到入口组件中,如图:
此时的test组件就能被应用到该项目的页面中了,我们来启动一下这个应用,如图:
此时就实现了页面内容的更新。其实这里是相当于把我们的vue做成了一个单文件组件,之前我们在学习vue的时候,一直都是依赖于html文件存在的,不过如果你是想要在nodejs上运行的话,还可以使用单文件组件,当然,单文件组件是我们极力提倡的写法。
三、UI组件
我们都知道,前端发展到现在,对于用户的体验和视觉感受都非常重视,因此就出现了很多的UI组件库,比如Elementui、vant、iview、Vuetify、 Mint UI、ant-design-vue等,下面我们将以pc端和移动端为主,分别介绍两款不同的UI组件库给大家认识并且简单的使用一下,来领略下UI组件的魅力吧。
1.PC端UI组件 1).ElementUi
由饿了么前端团队开源的UI框架,可以说是目前为止最好的桌面端UI组件库了,不仅界面美观,而且极易上手,下面我们来安装一下,首先在项目目录下打开cmd,然后输入命令:
npm i element-ui -S
静静的等着下载好这个组件库就好了。然后我们将组件引入vue组件中,并对组件的结构进行重构,如图:
这样就可以将一些花哨的元素添加进去了。
2).Ant Design Vue
旨在于开发后台管理系统界面,如下:
npm install iview --save
安装好了之后还是引入它,然后使用,如图:
可以看到,我们可以同时使用多个组件库。
3).iview
主要用于后端界面的开发,如下:
npm install iview --save
除此之外,iview weapp也是一款不错的ui框架,不过它主要用于微信小程序开发。
2.移动端组件 1).vuetify
最先将它是因为他不仅支持移动端而且还支持pc端,做到了多端兼容,而且无需写css就能实现非常美观的界面。首先下载,如下:
npm install --save vuetify
2).vant
下载安装,如下:
npm i vant -S
3).Mint UI
也是饿了么前端团队开发的基于移动端的组件库,首先来下载安装,如图:
npm i mint-ui --save
四、插件
可以看到,我们所使用的每个组件库要想使用,都必须下载,然后在主入口js文件main.js中导入并使用Vue.use这个方法来将该组件库加入到项目中去,已达到全局通用的效果。下面开始我们的插件编写之旅,首先创建一个放置插件的文件夹,然后建立如下文件,如图:
以上创建的便是一个插件目录和文件,然后我们来写单文件vue页面,如下:
然后我们以模块化的形式导出单页面文件,如图:
紧接着我们注册刚才写好的插件,如图:
最后我们将其应用在app.vue文件中,如图:
此时咱们写的插件就能应用到页面中了,如图:
五、总结
❺ 一般vue项目中所使用的外部插件都安装在开发环境就可以吗
仅在开发中使用到的包,例如:webpack、babel,只需要安装在开发环境即可
npm install packname --save-dev
在打包后要使用到的包,例如axios、vuex、element-ui,不要安装到开发环境。
npm install packname --save
❻ vue-cli 依赖包和插件有什么区别
1、一级目录:build和config文件夹是wbepack配置的文件夹;node_moles是在我npminstall后存放一些依赖和插件的文件夹;src是存放我们项目源码的文件,通常我们的vue组件就写在这里,其中main.js是页面的入口文件,初始化vue实例并使用需要的插件【插件router、resource等】,而App.vue看作是一个大组件,也就是整个页面的vue实例文件;static是存放第三方静态资源的,比如css的reset.css等等。
❼ vue-router,vue-loader,vue-cli分别是做什么用的
vue-cli相当于脚手架, 给你自动生成模板工程 ;vue-router是 vue路由插件, 支持你单页应用的 ;vue-loader是webpack下loader插件, 可以把.vue文件 输出成组件。
❽ vue文件上传插件有哪些
vue-upload-component - Vuejs文件上传组件
vue-core-image-upload - 轻量级的vue上传插件
vue-dropzone - 用于文件上传的Vue组件