Vue从安装到运行报错汇总（踩坑）

目录

1、main.js里面data定义是json对象，不是函数

2、vm is not used  : 

3、 -- fix :    vue.config.js  添加   lintOnSave:false,

4、弹出页面IP为 0.0.0.0错误：​编辑

5、导入vue报错：（更改默认import Vue from “Vue”）

6、启动vue后 浏览器页面出现乱码问题：

7、-- export 'default' (imported as 'VueRouter') was not found in 'vue-router'        "vue-router": "^4.1.5"

 8、安装路由，安装animated.css，后面安装vuex等插件时，注意版本问题。

---

1、main.js里面data定义是json对象，不是函数

2、vm is not used  : 

 解决方案：

修改package.json 中的rules：

    "rules": {
      "no-unused-vars": 0,
      "no-console": 0
    }

3、 -- fix :    vue.config.js  添加   lintOnSave:false,

4、弹出页面IP为 0.0.0.0错误：

解决方案：

 vue.config.js  添加：
 devServer: {
        host: 'localhost',
        port: 8080
    }

5、导入vue报错：（更改默认import Vue from “Vue”）

为什么要更改默认import Vue from “Vue”？    不修改会发现视图中的数据不能更新。
因为默认的import导入的实际上是 vue.runtime.common.js，功能不完整，只提供了 runtime-only 的方式。
解决方案：
① 在main.js中直接import Vue from '../node_modules/vue/dist/vue
② import Vue from 'vue'   // 使用此种方式在vue.config.js中需配置 添加别名
具体配置如下:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: 'localhost',
    port: 8080
  },
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set("vue$", "vue/dist/vue.js")
  }
})

6、启动vue后 浏览器页面出现乱码问题：

  将vscode和vue的html中设置编码格式均为utf-8

7、-- export 'default' (imported as 'VueRouter') was not found in 'vue-router'        "vue-router": "^4.1.5"

解决方法：

回退到3.1.3以后再进行测试,可以运行了

npm install -g vue-router@3.1.3

报错原因：
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
当我们在官网中安装路由或者安装时不注明版本，即默认安装router4.X。
而我们创建的是vue2，只能结合 vue-router 3.x 版本才能使用。所以需要降低vue-router的版本。

 8、安装路由，安装animated.css，后面安装vuex等插件时，注意版本问题。

 用cnpm i 插件名 -S 

 安装默认会安装最新版本插件，如果有异常，就是版本兼容问题，需要降低插件版本

 如：
-- vue2.0使用animate.css(animate.css@^4.1.1)无效
    D:\vs-work\06-vueanimated> cnpm uninstall animate.css@^4.1.1
    npm install animate.css@3.5.1 --save