㈠ 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放可能會變動的文件。