vue学习笔记

 以后都从上往下加了

---

 vue cli2.9配置全局变量 该方法适用于改变整个项目的通用名称，还可以在vuex里配置全局变量，两个全局变量使用的意义不同。

 

 

 

 

 

 vue cli3.0配置全局变量

 

 

---

 

1、  cnpm run dev之后希望自动打开浏览器地址

        将config下index.js的autoOpenBrowser改为true

 　　

 

---

 2、项目中配置的config/index.js，有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解

 

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
var projectName = 'dist';
module.exports = {
  build: {
    // webpack的编译环境
    env: require('./prod.env'),
    // 编译输入的index.html文件
    // __dirname代表当前的目录，config, path.resolve拼接起来就是
    // 从config返回上一级，然后进入${projectName}目录，比如dist，然后输出为dist下的index.html
    index: path.resolve(__dirname, `../${projectName}/index.html`),
    // 编译完成的项目根目录
    assetsRoot: path.resolve(__dirname, `../${projectName}`),
    // 静态文件目录
    assetsSubDirectory: 'static',
    // 引入css,js时的路径，相对于html页面，为空，所以打包以后路径为：static/js/xxx.js
    // 这样项目内部都是相对路径，项目文件夹改名不需要重新打包。
    assetsPublicPath: '',
    productionSourceMap: true,
    // 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,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8989,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/map': {
          target: "http://172.11.11.111:8080/",
          changeOrigin: true
        },
        '/web/': {
            target: 'http://172.22.22.22:8080',
            changeOrigin: true
        }
    },
    // 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
  }
}

　　

vue中的build/webpack.base.conf.js（这里需要配置）

 

/* 
1 配置 webpack 编译入口
2 配置 webpack 输出路径和命名规则
3 配置模块 resolve 规则
4 配置不同类型模块的处理规则
*/
var path = require('path')
var utils = require('./utils')
var config = require('../config') // 获取配置
// vue-loader 配置文件
var vueLoaderConfig = require('./vue-loader.conf')
// 给出正确的绝对路径
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

module.exports = {
    // 配置 webpack 编译入口
    entry: {
        app: './src/main.js'
    },
    // 配置 webpack 输出路径和命名规则
    output: {
        // webpack 输出的目标文件夹路径（例如：/dist）
        path: config.build.assetsRoot,
        // webpack 输出 bundle 文件命名格式
        filename: '[name].js',
        // webpack 编译输出的发布路径
        publicPath: process.env.NODE_ENV === 'production' ?
            config.build.assetsPublicPath :
            config.dev.assetsPublicPath
    },
    externals: {                                                         // 如果需要依赖jquery，这里要配置下
        jquery: 'jQuery'
    },
    // 配置模块 resolve 的规则,当省略文件后缀名时按配置的后缀顺序查找文件
    resolve: {
        extensions: ['.js', '.vue', '.json'], //自动解析确定的拓展名,使导入模块时不带拓展名
        // 创建路径别名，一些常用的，路径长的都可以用别名，有了别名之后引用模块更方便，例如
        // import Vue from 'vue/dist/vue.common.js'可以写成 import Vue from 'vue'
        alias: {                                                               
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'example': resolve('example'),
            'components': '@/components',                       //从这往下对应src里的文件夹，这里需要配置
            'common': '@/common',
            'router': '@/router',
            'store': '@/store',
            'api': '@/api',
            'assets': '@/assets',
            'constant': '@/constant',
            'views': '@/views',
            'utils': '@/utils'
        }
    },
    module: {
        rules: [{
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [resolve('src'), resolve('test')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    }
}

　　

webpack.prod.conf.js 生产环境下的配置文件（看看就行，不用配置）

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')     // 一个可以合并数组和对象的插件
const baseWebpackConfig = require('./webpack.base.conf')
  // 用于从webpack生成的bundle中提取文本到特定文件中的插件

  // 可以抽取出css，js文件将其与webpack输出的bundle分离

const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')  //如果我们想用webpack打包成一个文件，css js分离开，需要这个插件
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')
// 合并基础的webpack配置
const webpackConfig = merge(baseWebpackConfig, {
  // 配置样式文件的处理规则，使用styleLoaders
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,// 开启source-map，生产环境下推荐使用cheap-source-map或source-map，后者得到的.map文件体积比较大，但是能够完全还原以前的js代码
  output: {
    path: config.build.assetsRoot,// 编译输出目录
    filename: utils.assetsPath('js/[name].[chunkhash].js'),// 编译输出文件名格式
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')// 没有指定输出名的文件输出的文件名格式
  },

　// 重新配置插件项
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
　　// 位于开发环境下
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),// 抽离css文件
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
　　// filename 生成网页的HTML名字，可以使用/来控制文件文件的目录结构，最终生成的路径是基于webpac配置的output.path的
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
　　　 // 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
　　　 // 源文件，路径相对于本文件所在的位置
      template: 'index.html',
      inject: true,  // 要把<script>标签插入到页面哪个标签里(body|true|head|false)
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file  
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({  // 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})
// gzip模式下需要引入compression插件进行压缩
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

　　

 

vue 中build/build.js页（看看就行，基本不用配置）

require('./check-versions')() // 检查 Node 和 npm 版本
// 标明现在是生产环境
process.env.NODE_ENV = 'production'

var ora = require('ora')       // 一个很好看的 loading 插件
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')  
var webpack = require('webpack')
var config = require('../config')  // 加载 config.js
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('开始打包生产环境代码，请稍后...')       // 使用 ora 打印出 loading + log
spinner.start()   // 开始 loading 动画
// 首先删除 打包后文件夹的内容,然后回调函数里面调用 webpack 开始打包
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {  //  开始 webpack 的编译
　　// 编译成功的回调函数
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    if (stats.hasErrors()) {
      console.log(chalk.red('  构建失败，出现错误！\n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  打包完成！！！.\n'))
    console.log(chalk.yellow(
      '  文件需要在服务端打开。\n' +
      '  以file:// index.html这种形式打开不起作用\n'
    ))
  })
})

　

---

　

 3、vue 中 BEM样式失效

 

发现是postcss.js没有配置，需要这样配置下

 

// https://github.com/michael-ciniawsky/postcss-load-config
var salad = require('postcss-salad')
module.exports = {
  "plugins": [
    // to edit target browsers: use "browserlist" field in package.json
    salad({
        browser: ['ie > 9', 'last 2 version'],
        features: {
            'bem': {
                'shortcuts': {
                    'component': 'b',
                    'modifier': 'm',
                    'descendent': 'e'
                },
                'separators': {
                    'descendent': '__',
                    'modifier': '--'
                }
            }
        }
    })
  ]
}

 

还需要在package.json里安装       

"postcss": "^5.2.17",   

"postcss-salad": "^1.0.8",

 

 

---

4、一些语法的使用

 

 

 

 

---

5、各css背景图片

BEM

 

 postcss

 

 less

 

 

module

 

 

 

---

 

6、自定义点击事件

 

 

 

 

---

7、自定义字体

注入css

 

@font-face {
    font-family: 'lcdD';
    src: url('~assets/fonts/lcdD.eot');
    src: url('~assets/fonts/lcdD.eot?font-spider') format('embedded-opentype'),
        url('~assets/fonts/lcdD.woff') format('woff'),
        url('~assets/fonts/lcdD.ttf') format('truetype'),
        url('~assets/fonts/lcdD.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}