㈠ vue 怎么让路由做到按需加载相应的资源
css的话，可以通过scoped属性来限制它的作用域（单文件组件的）,js的话不清楚为什么会被载入，我刚才看了一下我这边vue-router的项目，不会，你在layout里有没有require或者import？
㈡ vue中静态js文件怎么打包
1.问题描述
在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入
的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！
2.解决方法之一
静态资源static存放位置放在src目录下
以上是一种解决图片失效问题的方法，当然，如果非要把static静态资源目录放在与src同级目录下，也是有解决方法，例如通过导入图片的方式（本人未实践），可以自行尝试！
㈢ vue-cli 静态html页面怎么加载
html静态页面中引用外部页面没那么方便，主要方法有：1.使用框架来实现，但是那样占用线程较多，速度慢；加上它的一些属性可以实现一些透明,无滚动条等具体的效果.大家可以html教程的相关介绍2.使用.js脚本来实现就是把相关的html文件转化
㈣ vue.js怎么在页面一开始加载数据
加载和显示新数据在vue里最简单了，往你的数据中添加新的值就可以了：methods:{loadMore:function(){yourAjaxMethod(function(moreData){this.items.push(moreData);}.bind(this));}}另外一个问题就是如何触发loadMore，这里像你说的，滚动。所以你需要监听下scroll事件或者使用其他滚动插件比如iscroll，在对应的回调里调用loadMore
㈤ 如何在vue中引入第三方jquery，swiper等库
一 .引入swiper(全局，局部)
方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）
- <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet"><script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>12
- _initSwiper() { const container = this.$refs.swiper; const config = {
- effect: 'coverflow',
- slidesPerView: 'auto',
- centeredSlides: true,
- initialSlide: this.activeIndex,
- loop: true,
- autoplay: 1000,
- speed: 1000,
- coverflow: {
- rotate: 0,
- stretch: -30,
- depth: 100,
- modifier: 0.7,
- slideShadows: false,
- },
- }; this.mySwiper = new Swiper(container, config);
- }
- import '../node_moles/swiper/dist/css/swiper.min.css';import 'swiper';12
- <section ref="swiper" class="swiper-container">
- <div class="swiper-wrapper">
- <div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"></div>
- </div></section><script>
- let swiperAsync = import('swiper') //引入的swiper.js（node_moles）的方法
- export default {
- data(){ return {
- colorList: ['red', 'yellow', 'gray', 'pink']
- }
- },
- methods: {
- async _initSwiper() { let Swiper = await swiperAsync; //异步加载的
- const container = this.$refs.swiper; //ref='swiper'
- const config = { //swiper的参数配置
- effect: 'coverflow',
- slidesPerView: 'auto',
- centeredSlides: true,
- initialSlide: this.activeIndex,
- loop: true,
- autoplay: 1000,
- speed: 1000,
- coverflow: {
- rotate: 0,
- stretch: -30,
- depth: 100,
- modifier: 0.7,
- slideShadows: false,
- },
- }; this.mySwiper = new Swiper(container, config);
- },
- },
- mounted(){ this._initSwiper();
- }
- }</script><style lang="scss" scoped>
- /*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/
- @import '../../node_moles/swiper/dist/css/swiper.min.css';</style>
全局的方法
- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>1
局部的方法：
- npm install jquery -D1
- import $ from 'jquery'1
组件中可以直接使用的swiper了
2.方法二：main.js 中
执行上面的_initSwiper()的方法 即可
3.方法三：局部的引入的，有时只想的单个组件中使用某一个的库，方法如下
二 引入的jquery的方法
组件中可以直接使用的 ‘$’的方法
需要使用的组件中引入
㈥ vue-cli build后编译出来的文件就放在express 静态资源吗
用vue-cli搭建的做法 1、npm run build 2、把dist里的文件打包上传至服务器 例 /data/www/，我一般把index.html放在static里 所以我的文件路径为： /data/www/static |-----index.html |-----js |-----css |-----images .... 3、配置nginx监听80...
㈦ webstorm的vue怎么引入静态资源
Mac端WebStorm用户。 command + , 打开偏好设置，选择plugins,，
㈧ vue中，图片<img src="path"/>如何加载绝对路径的图片例如：D:/photo/fileName
assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖
static：在这个目录下文件不会被webpack处理，简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]
根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件。