vue基础

vue文件组件也支持CSS预处理语言，比如scss或者less。如需使用scss，定义lang属性即可：

<style lang="scss" scoped>...</style>

webpack.config中需要加载vue-loader来解析.vue文件（下面配置支持在vue组件中使用scss语法）。

module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            ......
        ]
    },

引用组件时，名称可以自定义，如下，导入时我将child组件命名为c：

import c from './child'
    export default {
        name: "father",
        components:{'child-com':c},
      data(){
          return {text:"this is  father  components"}
      }

}