vue2.0脚手架

基本搭建环境

基本搭建环境可以参考攻略,本篇文章主要是介绍项目基本搭建之后其他工具的搭建攻略。

其他工具的搭建

注意:搭建环境基于vue-cli2.x来搭建单页应用，本教程使用less，使用sass可自行修改

• 使用less或者sass

LESS
npm install less  less-loader  --save-dev
SASS
npm install node-sass  sass-loader --save-dev

在build/webpack.base.conf中module.rule数组中加入

LESS
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
SASS
{
  test: /\.s[a|c]ss$/,
  loader: 'style!css!sass'
}

• 使用雪碧图

npm install webpack-spritesmith --save-dev

在build/webpack.base.conf文件的module.exports对象里加入

plugins: [
    new SpritesmithPlugin({
      // 目标小图标
      src: {
          cwd: path.resolve(__dirname,'../src/assets/sprite'),
          glob: '*.png'
      },
      // 输出雪碧图文件及样式文件
      target: {
          image: path.resolve(__dirname, '../src/assets/sprite.png'),
          css: [[path.resolve(__dirname, '../src/utils/sprite.less'),{format:'function_based_template'}]]
      },
      customTemplates: {
        'function_based_template': path.resolve(__dirname, '../src/utils/my_handlebars_template.handlebars')
      },
      // 样式文件中调用雪碧图地址写法
      apiOptions: {
          cssImageRef: '../assets/sprite.png'
      },
      spritesmithOptions: {
          algorithm: 'binary-tree',
          padding:10
      }
    })
  ]

其中my_handlebars_template.handlebars的代码如下：

{{#spritesheet}}
[class^="icon-"],
[class*=" icon-"]{
    background-image: url({{{escaped_image}}});
    background-size:{{px.width}} {{px.height}};
}
{{/spritesheet}}
{{#sprites}}
.icon-{{name}}{
    background-position:{{offset_x}}px {{offset_y}}px;
    width:{{width}}px;
    height:{{height}}px;
}

{{/sprites}}

这是我的文件目录：

详细教程可以参考攻略，如果移动端需要是rem怎么设置？下面将说下移动端需要配置的步骤。

• 配置rem

详细教程可以参考攻略
需要注意的是：在App.vue引入sprite.less，如下图，但是在页面的css中使用sass或者less继承class会提示class不存在，解决方法在需要继承sprite.less的class时候前面加上:

@import (reference) "../utils/sprite.less";

解决方案可以参考教程。

撒花，结束~~~

github

欢迎加star~~~
https://github.com/ymblog/vue