npm使用vue开发总结

常用命令：

1.编译 npm run bulid

2.启动 npm run dev

问题一：打包后，html文件没有引号

build目录webpack.prod.conf.js有一项配置：removeAttributeQuotes为false

如果是多页面配置：

是在build/utils.js中

问题二：

单页面配置：config目录下index.js修改assetsPublicPath: './'

如果是多页面配置：

build/webpack.prod.conf.js文件修改output选项

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

问题三：使用vux需要修改less变量

第一步下载less包

第二步修改webpack.base.conf.js文件

添加：
{name: 'less-theme', path: 'src/style/theme.less'},
如下：
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    'vux-ui',
    'progress-bar',
	{name: 'less-theme', path: 'src/style/theme.less'},
    {
      name: 'duplicate-style',
      options: {
        cssProcessorOptions : {
          safe: true,
          zindex: false,
          autoprefixer: {
            add: true,
            browsers: [
              'iOS >= 7',
              'Android >= 4.1'
            ]
          }
        }
      }
    }
  ]

第三步：放入less文件

问题四：vue调用路由组件的方法

父组件：

子组件：

问题五：封装组件使用v-model，封装方法 

父组件：

<form-search-pagination v-model="paginationForm" @search="a"></form-search-pagination>

子组件：

<script>

export default {
  props:['value'],
  components: {
  },
  created(){

  },mounted(){

  },
  methods:{
   parentSearch(){
         this.$emit('input', {
           paginationPageSize:this.value.pageSize,
           curPage:this.value.curPage,
           total:this.value.total,
           pageSize:this.value.pageSize,
           paginationCurPage:this.value.curPage
         });
        this.$emit('search',this.value);
      }
  },
  data () {
    return {
    }
  }
}
</script>