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

且听下回分解!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值