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中呢?

且听下回分解!

猜你喜欢

转载自blog.csdn.net/qq_40421277/article/details/79323252