vue 学习使用总结

学习资料:

前端开发环境搭建和VSCode插件配置超详细图解

官网

vue全家桶

1.环境配置

1.1 项目构建

vue init webpack 构建项目时，项目名称不能有大写字母,否则构建失败

1.2 ico 添加

1.2.1 build/webpack.dev.conf.js

devWebpackConfig.plugins 添加：

 new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon:'src/assets/logo.ico',//关键语句
      inject: true
    }),

1.2.2 build/webpack.prod.conf.js

webpackConfig.plugins 添加

 new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      favicon:'src/assets/logo_zj.ico', //关键部分
      ...
})

1.3 vue-cli脚手架关闭 eslint

编译报错 Expected space or tab after ‘//’ in …

原来eslint是一个语法检查工具，但是限制很严格，在我的vue文件里面很多空格都会导致红线(红线可以关闭提示)，虽然可以关闭，但是在编译的时候老是会跳出来，所以能关闭是最好的了。
关闭方法：在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则：

1.打开 build文件夹下面的webpack.base.conf.js;
2.找到下面这段代码，并将它注释掉：

const createLintingRule = () => ({
  // test: /\.(js|vue)$/,
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

1.4 sass引入

1.4.1 sass 安装使用 参考资料

npm install -s sass-loader
npm install -s node-sass

打开build文件夹下的 webpack.base.conf.js,在module.exports里的module，在rules添加如下配置：

{
  test:/\.sass$/,
  loaders:['style','css','sass']
}

在.vue文件中，修改style标签

<style lang="scss" scoped>

</style>

1.4.2 sass 使用报错 解决方案

scss-loader 用最新版本会打包失败，卸载uninstall重装仍无效，将版本调整至7.3.1 //“sass-loader”: “^7.3.1”

Module build failed: TypeError: this.getResolve is not a function at Object.loader 
//安装node-sass运行报错

“sass-loader”: “^8.0.0”，更换成了 “sass-loader”: “^7.3.1”

1.4.3 sass 使用

& 表示嵌套的上一级,示例：

ul{
    margin-bottom: 20px;
    & >li {
        margin-bottom: 0;
    }
  }

1.5 vue 打包图片路径不对问题