码迷,mamicode.com
首页 > 其他好文 > 详细

VUE项目注意点

时间:2019-01-07 17:40:02      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:sdn   stat   targe   标签   int   resource   dir   http   ack   

1.vue组件中img标签的src属性绑定数据:

<img :src="img" alt="图片" />

//script
data() {
  img: require(‘../../static/img/name.png‘)
}

2.mint-ui的样式文件要在router路由之前引入,否则样式无效

 技术分享图片

 3.vue项目中使用sass 链接

  安装组件依赖:

npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev

//全局引入scss
npm install sass-resources-loader --save-dev

  编辑build下的utils.js文件:(全局引入)

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders(‘less‘),
    sass: generateLoaders(‘sass‘, { indentedSyntax: true }),
    scss: generateLoaders(‘sass‘).concat(
      {
        loader: ‘sass-resources-loader‘,
        options: {
          resources: path.resolve(__dirname, ‘../src/common/style/index.scss‘)
        }
      }
    ),
    stylus: generateLoaders(‘stylus‘),
    styl: generateLoaders(‘stylus‘)
  }

 

打包:

修改config文件夹下的index.js文件:(两处)

技术分享图片

修改build文件夹下的utils.js文件:

技术分享图片

 修改build文件夹下的webpack.prod.conf.js文件

技术分享图片

 

VUE项目注意点

标签:sdn   stat   targe   标签   int   resource   dir   http   ack   

原文地址:https://www.cnblogs.com/lianchenxi/p/10231455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!