vue 2.0 从入门安装配置到学习遇到的问题

一.解决vue项目中,用submit等编辑器格式化后,因为缩进导致错误

原因:

• 因为在 package.json文件我们可以发现，在文件中默认安装了eslint-loader模块
• eslint-loader模块是目前相对比较流行的代码检测工具，可以检测书写的代码是否符合统一规范，可以在一些比较大型的项目开发中统一开发人员的代码风格（代码缩进不符合规范）。

解决方法:

• 一. 按照eslint-loader规则,严格书写代码,估计是2个缩进(如果习惯用4个空格缩进的 那就看看方法2了);

• 二.关闭 eslint-loader

  • 如果安装是 webpack-simple 即是普通项目,打开 webpack.config.js 去掉 eslint的配置即可;
  • 如果是vue项目里 直接安装 webpack的,需要在项目根目录下的build文件夹下找到webpack.base.conf.js文件,去掉eslint配置.

我是直接安装webpack的,直接生成的代码为

{
        test: /\.(js|vue)$/,
        // loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        // options: {
        //   formatter: require('eslint-friendly-formatter')
        // }
      },

去掉关于eslint的配置即可.

---

二. 引用外部文件

1.在index.html 引入文件

• 问题:
  一开始把外部的文件都放在src目录下,然后在index.html一直引入也一直找不到该路径,路径是对的,就是一直报404.

• 解决:
  上网找答案好久找, 原来在创建项目时会生成static文件夹,只需要把文件放在 static目录, index.html 按你摆放的路径就不会出错了
  ps: 因为我有一个写好的样式,想直接在index.html直接引用就好,如果不想引入可往下看

2.在vue引入文件

• 2.1 引入js文件

  • import ‘文件路径’
  • import 文件别名 from ‘文件路径’

• 2.2 引入css文件

  • @import ‘文件路径’,

  如果在style 写有scoped 说明该样式在此vue组件里调用样式,不会全局影响其他组件样式

遇到的坑:

• 问题一:

  • 配置sass/less文件会报错

  • 原因: 官网的配置并没有配置,需要手动配置
    npm install less sass-loader --save

并且在webpack.base.conf.js 配置文件下配置以下:
ps: 如果是普通项目,找到对应的webpack.base.js文件修改即可

{
  test: /\.css$/,
  loader:'style-loader!css-loader'
}

• 问题二

  • 如果引入js文件报以下错误

  Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

  在配置文件找到以下代码注释即可,原因可能是里面的js文件没有按es6规范写,研究好久才知道这问题,如果有知道可以和我说解决方案

  {
     test: /\.js$/,
     loader: 'babel-loader',
     include: [resolve('src'), resolve('test')]
   },
   注释即可

总体 vue 文件 结构 如下

<template>
    // 相当写html文件
</template>

<script>
    // 引入js文件
    import '文件路径'
    import 文件别名 from  '文件路径'
</script>

<style lang="sass" scoped>
    // 引入样式文件
     @import '文件路径'
</style>