如何更有效率和质量地开发Vue项目

直接拉取git源：
当你修改了模板并上传了repo上，可执行以下命令行来初始化

vue init username/repo my-project

拉取本地的模板：
当你clone了官方模板在本地修改，可执行以下命令行来初始化

vue init ~/fs/path/to-custom-template my-project

vue init duosanglee/vuejs-custom-template

npm install -D sass-resources-loader

首先得找到项目里的build文件夹，找到util.js
添加一下代码

function resolveResouce(name) {
    return path.resolve(__dirname, '../src/style/' + name);
}
function generateSassResourceLoader() {
    var loaders = [
 cssLoader, 
 // 'postcss-loader',
 'sass-loader',
 {
     loader: 'sass-resources-loader',
     options: {
       // it need a absolute path
       resources: [resolveResouce('common.scss')]
     }
 }
    ];
    if (options.extract) {
 return ExtractTextPlugin.extract({
   use: loaders,
   fallback: 'vue-style-loader'
 })
    } else {
 return ['vue-style-loader'].concat(loaders)
    }
}

然后还是在当前文件里找到

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

替换成

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

代理到Vue的原型对象
由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此我们只要

Object.defineProperty(Vue.prototype, '$xxx', { value: xxx });

就可以在所有组件/实例中通过 this.$xxx: 的方式访问插件了~而不需要定义全局变量或者手动的引入了~
至于为什么要用Object.defineProperty这个方法，是因为通过Object.defineProperty绑定的属性是只读的，以防一起开发项目的协(zhu)作(dui)者(you)去重写或者覆盖该方法的值。

-- assets                      # 私有资源
-- common                      # 通用组件
-- components                  # 业务组件
-- api.js                      # 请求文件      
-- config                      # 环境变量配置
    -- env.js                  # 环境变量文件
    -- http.js                 # 封装axios文件
-- pages                       # 页面维度
    -- pageA                   # 页面A
        -- pageA.vue           # 页面A单文件
        -- pageA-components    # 页面A下的一个组件
        -- children            # 子页面
-- router                      # 路由
    -- index.js                # 路由入口
    -- routes.js               # 路由配置信息
-- store                       # vuex
    -- modules                 # vuex模块
    -- index.js                # vuex入口
-- utils                       # js通用方法
-- app.vue                     # 顶层单文件
-- main.js                     # 入口

var SpritesmithPlugin = require('webpack-spritesmith');
...
module.exports = {
  ...
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: './src/assets/sp/',
        glob: '*.png'
      },
      target: {
        image: './src/assets/sprite/sprite.png',
        css: './src/assets/sprite/sprite.css'
      },
      apiOptions: {
        cssImageRef: './sprite.png'
      },
      spritesmithOptions: {
        algorithm: 'top-down',
        padding: 100
      }
    })
  ]
}

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.autoFixOnSave": true,

proxyTable: {
  '/api': {
    target: '网站名',
    pathRewrite: {
      '^/api': ''
    }
  }
}

margin: 0 auto 0 0;
position: absolute;
background-color: #fff;