Vue项目中引入外部文件的方法(css, js,少) |
您所在的位置：网站首页 › vue项目中引入js文件 › Vue项目中引入外部文件的方法(css, js,少) |
Vue项目中引入外部文件的方法(css, js,少)
|
这两天学习了Vue。js,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记。 例子中css文件采用bootstrap.css, js文件采用jQuery,少文件用less.less(自定义文件) 步骤一:安装webpack 强> cnpm安装webpack - g步骤二:在src/资产下面新建css, js,少,字体文件夹,并放入对应文件。强> 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,字体字体放入字体目录下 步骤三:安装js依赖强> cnpm安装jquery——save-dev步骤四:安装css依赖强> cnpm安装style-loader——save-dev cnpm安装css-loader——save-dev cnpm安装file-loader——save-dev >之前步骤五:安装少依赖强> npm安装少less-loader——保存步骤六:修改构建/webpack.base.conf.js文件,强> (1)在开头引入webpack(后面的插件那里需要) var webpack=要求(webpack)(2)添加jquery插件, 在模块。={出口,条目:{应用:“。/src/main.js '}, 后面加 插件:[ 新webpack.ProvidePlugin ({ 美元:“jquery”, jQuery:“jQuery” }） ]， >之前(3)设置路径, 把解决里面的 代码如下: 别名:{“vue美元”:“vue/dist/vue.common.js”,“src”: path.resolve (__dirname,“. ./src”),“资产”:path.resolve (__dirname,“. ./src/资产”),“组件”:path.resolve (__dirname,“. ./src/组件”)} 改成 别名:{ “vue美元”:“vue/dist/vue.common.js”, “src”:路径。解决(__dirname“. ./src”), “资产”:路径。解决(__dirname“. ./src/资产”), “组件”:路径。解决(__dirname“. ./src/组件”), jquery:“jquery” } >之前(4)配置装载机加载依赖, 在修改模块里面 { 测试:/\ . js/美元, 装载机:“babel-loader”, 排除:/node_modules/}, { 测试:/\ . css/美元, 装载机:“style-loader ! css-loader”, }, { 测试:/\ .less/美元, 装载机:“style-loader css-loader ! less-loader”, }, >之前注意:如果utils.js文件里面已经添加少了,css这里不用添加上面后两个测试了,否则会报的错! ! ! ,(5)配置字体装入器加载依赖 {测试:/\ . (\ & # 63;v=\ d + \ \ d + \ \ d +) & # 63;美元/,装载机:“file-loader& # 63; mimetype=图像/svg + xml”}, {测试:/\ .woff (\ & # 63; v=\ d + \ \ d + \ \ d +) & # 63;美元/,装载机:“file-loader& # 63; mimetype=应用程序/font-woff "}, {测试:/\ .woff2 (\ & # 63; v=\ d + \ \ d + \ \ d +) & # 63;美元/,装载机:“file-loader& # 63; mimetype=应用程序/font-woff "}, {测试:/\ .ttf (\ & # 63; v=\ d + \ \ d + \ \ d +) & # 63;美元/,装载机:“file-loader& # 63; mimetype=应用程序/八进制"}, {测试:/\ .eot (\ & # 63; v=\ d + \ \ d + \ \ d +) & # 63;美元/,装载机:“file-loader”} >之前步骤六:接着修改src文件夹下面的main.js文件,打开文件之后在顶部加入强> 进口的。/资产/css/bootstrap.css” 进口的。/资产/js/bootstrap.min.js” 进口的。/资产/不/less.less” >之前现在就可使少用,jquery,如下图所示: |
【本文地址】
今日新闻 |
推荐新闻 |