小白学 VUE 系列vue 引入静态资源写法

URL 转换规则

  • 如果 URL 是一个绝对路径 (例如 /images/foo.png),它将会被保留不变。
  • 如果 URL 以. 开头,它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
  • 如果 URL 以 ~开头,其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源
  • 如果 URL 以 @ 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名

引入css,less,js等>

在vue界面的style标签内引入,要属性lang=less

<style lang="less">
  @import './base.less';
    //或
     @import url("./login.less");
     //如果npm引入的
      @import '~normalize.css';
</style>

script标签内引入

import 'normalize.css';

import '@/assets/css/base.less';

引入jquery

先安装jquery

npm install jquery

配置引入插件,vue.config.js,插件里面引入 jquery

const webpack = require("webpack");

module.exports={
    ......,
    configureWebpack:{
        devtool:'source-map', //配置开发者环境的sourceMap用于代码调试
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    },

}

引入main.js jquery

import $ from 'jquery'

在生命周期 mounted 写脚本

mounted() {
 console.log('html');
    $("#logo").click(function () {
            alert('33');
    })
}

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
黑白课堂

黑白课堂 · 技术专家

专业PHP开发

年度VIP 站长创业者玉树凌风每天醒来0收入
查看更多

最新视频课程

钻级赞助商