本篇是鄙人在vue开发中遇到的小问题

一. 使用sass/scss

    1.  npm install --save-dev node-sass sass-loader

    2.  在build文件夹找到webpack.base.conf.js

    3. 添加规则即可,如图



二.  关于axios + vue2.0   在ajax回调中,this指向问题

方法:

箭头函数



三 .  在vue 中引入第三方非模块化组件(以zepto为例)

需要借助两个 loader: script-loader 和 exports-loader。

script-loader可以在我们import/require模块时,在全局上下文环境中运行一遍模块 JS 文件(不管require几次,模块仅运行一次)。

exports-loader 可以导出我们指定的对象,作用就是在模块闭包最后加一句module.exports = window.Zepto来导出我们需要的对象,这样我们就可以愉快地import $ from 'zepto'了。

然后修改webpack.base.conf.js 和 xxx.vue文件使用方法

zepto-webpack-config

四. npm run dev 编译时报错 “ Couldn't find preset "es2015" relative to directory ”

1. npm install babel-preset-env --save-dev (已废弃:babel-preset-es2015、babel-preset-es2016、babel-preset-es2017 及 babel-preset-latest)

2. 在package.json中添加 


或者 在根目录下新建文件 .babelrc 

五.  mapState、mapMutations、mapActions使用对象展开运算符(...)报错问题

报错如图

解决办法: (babel官网文档链接

1. npm install --save-dev babel-plugin-transform-object-rest-spread

2. 文件 .babelrc  添加 "plugins":["transform-object-rest-spread"]

若在package.json中有 babel 参数, 同样是写  "plugins":["transform-object-rest-spread"]


.babelrc



六.  npm run dev  报错  “No PostCSS Config found in ...“ (webpack 3.0+)

解决: 在根目录创建 postcss.config.js 文件,添加如下代码:(即引入autoprefixer插件)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容