配置vue的jsx写法以及postcss

最新推荐文章于 2024-11-10 09:00:00 发布

道雄

最新推荐文章于 2024-11-10 09:00:00 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/qq_36836277/article/details/88646985

Vue.js 专栏收录该内容

23 篇文章

订阅专栏

博客介绍了Vue项目开发的相关配置。首先需安装postcss-loader、autoprefixer等必要插件，在根目录创建.babelic和postcss.config.js文件。接着安装指定插件，在webpack.config.js中配置处理jsx文件的插件，还需在配置stylus文件处添加对象处理sourceMap生成的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue官方学习网站： https://cn.vuejs.org/

1.安装必要的插件

安装 postcss-loader autoprefixer babel-loader babel-core

cnpm install postcss-loader autoprefixer  babel-loader babel-core

2.在根目录下创造两个文件

.babelic和postcss.config.js

//postcss.config.js
const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer()
  ]
}

上面代码的作用：经过stylus预处理css后，postcss用一系列的组件来优化，autoprefixer就是其中之一进行后处理
注：给一些需要自动加浏览器前缀的css属性加前缀
如：webkit（谷歌，Safari）-moz-（火狐），-ms-（IE）,-o-（Opera）
常见浏览器前缀

//.babelic 文件
{
  "presets":[
    "env"
  ],
  "plugins":[
    "transform-vue-jsx"
  ]
}

注："transform-vue-jsx"用来转化vue里面的jsx代码，因为vue和jsx支持的jsx代码有一定的区别，所以需要转换

3.安装上面提到的三个插件

命令行输入

cnpm install babel-preset-env babel-plugin-transform-vue-jsx autoprefixer --save

4.在webpack.config.js中配置jsx文件需要的插件

     {
      test:/\.jsx$/,
          loader: 'babel-loader'
      },

注：babel-loader用来处理jsx文件

5.在wbpack.config.js中配置stylus文件的地方加入一个新的对象，用来处理sourceMap生成的数据

{
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    //这里是新加进来的对象
                    {
                       loader: 'postcss-loader',
                       options: {
                           sourceMap: true,
                       }
                    },
                    'stylus-loader'
                ]
            },