vue-cli+webpack项目总结

关于项目中src/config配置

src/config/index 目录拆分，使用node进行模块加载、抛出、默认抛出，合并调用。

src_config.png

关于项目中config/index配置

var path = require('path');

module.exports = {
   build: { // production 环境
       env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
       index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文 
       assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
       assetsSubDirectory: 'static', // 编译输出的二级目录
       assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
      productionSourceMap: true, // 是否开启 cssSourceMap
      // Gzip off by default as many popular static hosts such as
      // Surge or Netlify already gzip all static assets for you.
      // Before setting to `true`, make sure to:
      // npm install --save-dev compression-webpack-plugin
      productionGzip: false, // 是否开启 gzip
      productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
    }
dev: { // dev 环境
      env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
      port: 8080, // 运行测试页面的端口
      assetsSubDirectory: 'static', // 编译输出的二级目录
      assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
      proxyTable: {// 需要 proxyTable 代理的接口（可跨域,vue的插件http-proxy- 
                           middleware）
        "/mapi": {
          target: "http://localhost:8887",
          changeOrigin: true,
          pathRewrite: {
            "^/mapi": ""
          }
      },
      "/api": {
          // target: "https://www.chspu.com/api",
          target: "http://192.168.1.134:8176/api",
          // target: "http://192.168.5.164:8090",
          changeOrigin: true,
          pathRewrite: {
            "^/api": ""
          }
      }
   }, 
      // CSS Sourcemaps off by default because relative paths are "buggy"
      // with this option, according to the CSS-Loader README
      // (https://github.com/webpack/css-loader#sourcemaps)
      // In our experience, they generally work as expected,
      // just be aware of this issue when enabling this option.
      cssSourceMap: false // 是否开启 cssSourceMap
    }
 }

config2.png

]

postcss.png

关于vue 文件配置autoprefixer css3后缀名自动补全

在项目中需要安装插件 npm install --save-dev postcss
项目中我们这样使用：

postcss.png

postcss2.png

vue中父组件使用#深度作用选择器#控制子组件样式
父组件影响子组件，你可以使用 >>> 或者 /deep/操作符（一些预处理器（如SASS）可能无法>>>正确解析。可以使用/deep/组合器）
父组件使用组件名作为样式
<style scoped>
.a >>> .b {
  /* ... */
}
</style>

vue 过滤器注册 
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

最后编辑于：2018.11.28 11:00:20