vue之js、css等靜態文件的引入(vue路徑篇)

1、如何引入如js，css等文件？
比如我們想引入jQuery文件或者依賴
   
若是已下載好的jQuery文件，則這樣引入。
打開webpack.base.conf.js，在relove加入這段代碼

// 在開頭引入webpack，後面的plugins那裏需要
var webpack = require('webpack')
// resolve

module.exports = {
   // 其他代碼...
   resolve: {
      extensions: ['', '.js', '.vue'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components'),

          // webpack 使用 jQuery，如果是自行下載的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安裝的jQuery
          'jquery': 'jquery' 
      }
   },

   // 增加一個plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其他代碼...
}

這樣子就可以正確使用jqeury了。
引入jQuery後，比如我們想要引入boostrap，在main.js文件開頭加入

import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

也不一定是引入在main.js文件，也可以引入到你想要引用到的組件中。

！！！有一點需要注意的是經過嘗試，要把js、css文件等放在src文件夾中。

jQuery用依賴來引入方法：
1、首先在pakage.json里加入

dependencies:{
 "jquery" : "*"//*爲號爲最新版
}

然後在打開這個文件夾中的命令行 npm install 下載依賴。

2、在webpack.base.conf.js里加入

var webpack = require("webpack")

3、在module.exports的最後加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
 })
]

4、然後重啓

npm run dev

5、在main.js 引入

import $ from 'jquery'

那麼，爲什麼必須要把這些文件放在src中呢？
且聽下回分解！