Vue中遇到的一些小问题

记录Vue中的一些问题记录Vue中的一些问题问题一记录Vue中的一些问题在学习和使用中难免会遇到一些问题，很多次，有些问题当时查资料解决了，下次又遇到的时候就忘了，所以这里对日常遇到的关于Vue.js相关的问题做一下记录，以备日后查阅。问题一问题描述：Do not use built-in or reserved HTML elements as component id: xxx不要使...

黄小鸭吖

6203人浏览 · 2018-11-20 13:28:46

黄小鸭吖 · 2018-11-20 13:28:46 发布

记录Vue中的一些问题

记录Vue中的一些问题

记录Vue中的一些问题

在学习和使用中难免会遇到一些问题，很多次，有些问题当时查资料解决了，下次又遇到的时候就忘了，所以这里对日常遇到的关于Vue.js相关的问题做一下记录，以备日后查阅。
（.gitkeep：如果是一个空的文件夹，这个文件夹会被git忽略，但是在文件夹下面创建一个.gitkeep文件，就不会出现文件夹被忽略的问题…）

问题一：Do not use built-in or reserved HTML elements as component id: xxx

不要使用内置或者保留的HTML元素作为组件(component)id：xxx，意思就是，我有一个组件的name属性值为xxx，但是这个值式html定义的元素。举个例子：

这个组件中，我们定义的这个组件的***name***属性为***header***

<template>
  <header>
  </header>
</template>

<script>
  export default {
  	// 这里得而header是html元素
    name: "header"
  }
</script>

<style scoped>

</style>

这里，我们Header组件的name属性为header,运行时，浏览器就会有一个警告：
在这里插入图片描述
原因是那么值header是html标签存在的元素。只要改成别的名字就没有这个警告了。

<template>
  <header>
   
  </header>
</template>

<script>
  export default {
    name: "Header"
  }
</script>

<style scoped>

</style>

问题二：Vue中处理跨域请求

vue遇到跨域接口，可以通过配置proxyTable属性来解决。

<script>
export default {
  name: 'App',
  created() {
  	// 调用接口，出现跨
    fetch("http://192.168.1.35:8083/user", {
      method: "GET"
    }).then(result => {
      console.log(result);
    })
  }
}
</script>

我们可以看到浏览器访问时出现了跨域：
跨域接口的调用
出现这种情况，我们可以修改conifg/index.js中的proxyTable属性来解决跨域问题：

 proxyTable: {
 		// 定义一个标识
      "/apis": {
      	 // target地址跨域接口地址 ip+端口或者域名
        target: "http://192.168.1.35:8083", 
        // 配置是否跨域
        changeOrigin: true,
        // 重写以/api开头的请求
        pathRewrite: {
          '^/apis': ''
        }
      }
    },

改变请求地址：

export default {
  name: 'App',
  created() {
  	// 原来请求地址中的http://192.168.1.35:8083变成我们定义的标识/apis，以api开头的请求都会被重写
    fetch("/apis/user", {
      method: "GET"
    }).then(result => {
      console.log(result);
    })
  }
}

以上就是vue中解决跨域的具体方式。

问题三：在axios中使用请求头

方式一：全局配置

导入axios：

import axios from 'axios'

配置请求头：

// 全局配置，所有请求都能使用
axios.defaults.headers.common["token"] = "12344";
// post请求头配置，所有post都能使用
axios.defaults.headers.post["Content-Type"] = "application/json";

配置好后，配置vue使用axios

Vue.prototype.$axios =  axios;

方式二：在单独请求中设置请求头（get)：

this.$axios.get("/apis/user",{
		// 设置请求头
      headers: {token: "12334"},
      params: {
        name: "zs"
      }
    }).then(data => {console.log(data)})

方式三：在单独请求中设置请求头（post)：

// 第三个参数中设置请求头
 this.$axios.post("/apis/user", "", {
      headers: {
        token: "12345"
      }
    }).then(data => console.log(data));

问题四：使用axios传递表单参数

方式一：URLSearchParams对象

var param = new URLSearchParams();
param.append("username", "zhangsan");
param.append("age", "18");
param.append("password", "12323");
this.$axios.post("/apis/user", param).then(data => console.log(data));

方式二：qs模块

安装qs

npm install qs --save

引入qs模块

import Qs from 'qs'
Vue.prototype.$qs = Qs;

使用qs模块处理参数

 this.$axios.post(
 		"/apis/user",
 		// 参数通过qs处理
	   this.$qs.stringify({username: "zhangsan", age: "22"})
  )
  .then(data => console.log(data));

方式三：拼接字符串

this.$axios.post(
		"/apis/user", 
		// 这里使用拼接字符串的方式传值,每个参数间使用&符连接，key1=value1&key2=value2&...
		"username=zhangsan&password=12345&age=10"
	)
.then(data => console.log(data));

vue-cli 3.0自定义脚手架

在搭建脚手架之前，我们先看看系统用户家目录的一个隐藏文件***.vuerc***
在这里插入图片描述
.vuerc文件中的内容是：

{
  "useTaobaoRegistry": true
}

现在我们通过命令行创建一个项目：

> vue create vue_demo

执行上面的命令得到如下所示内容：

Vue CLI v3.1.3
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

我们通过方向键移动箭头>到Manually select features并回车来手动选择要安装的功能：

>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择Manually select features后出现如上内容，我们同样的方式移动>到要使用的功能上，并按下空格来确定安装的功能，选择完所有你需要的功能后按回车确定：

? Check the features needed for your project: Babel, PWA, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

回车后得到如上内容，让你检查你选择的功能对不对，并且问你是否使用router的history mode。此时等待输入y或者n表示是或者否。

? Check the features needed for your project: Babel, PWA, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

当我们对上一步做出选择后，会出现上面的内容，让我们选择ESLint的配置，我们可以通过移动>到自己需要的配置上回车，完成选择：

? Check the features needed for your project: Babel, PWA, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

完成ESLint配置选择后，会显示如上页面，提示选择Lint功能，同样移动>到想要的功能上回车以选择。

? Check the features needed for your project: Babel, PWA, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

完成lint功能选择后，显示如上页面，通过移动箭头>选择配置文件类型。

? Check the features needed for your project: Babel, PWA, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

配置文件类型选择后，会提示你是否把这个保存为一个预置的项目，也就是之后通过脚手架来创建的模板。这里N是大写，即默认是不设置。所以我们输入y来确定这个选项。

? Check the features needed for your project: Babel, PWA, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as:

此时提示我们为这个模板取一个名字，我们在Save preset as:后面输入我们想要为这个模板取的名字后回车即可。

? Check the features needed for your project: Babel, PWA, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as:MyVueCli

这里我为这个脚手架命名为MyVueCli，回车确定后，就开始初始化安装了：

Vue CLI v3.1.3
✨  Creating project in E:\vscode\vue_demo.
⚙  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install E:\vscode\vue_demo\node_modules\yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation
added 1145 packages from 748 contributors in 78.759s
?  Invoking generators...
?  Installing additional dependencies...

added 55 packages from 31 contributors, updated 2 packages and moved 5 packages in 20.711s
⚓  Running completion hooks...

?  Generating README.md...

?  Successfully created project vue_demo.
?  Get started with the following commands:

 $ cd vue_demo
 $ npm run serve

根据上面的提示，我们cd进入刚才创建的项目，然后运行npm run serve就可以运行当前项目了。

此时我们在看看我们自定义的脚手架的情况，我们在创建一个项目：

> vue create vue_demo01

回车后我们就能看到我们自定义的模板的选项了：

Vue CLI v3.1.3
? Please pick a preset: (Use arrow keys)
> MyVueCli (vue-router, babel, pwa, eslint)
  default (babel, eslint)
  Manually select features

> MyVueCli (vue-router, babel, pwa, eslint) 这就是我们创建的脚手架内容。选择这个，直接回车就开始根据这个模板设定的内容开始创建工程了。

此时在看看系统用户家目录下的隐藏文件**.vuerc**文件中的内容：

{
  "useTaobaoRegistry": true,
  "presets": {
    "MyVueCli": {
      "useConfigFiles": false,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": true
    }
  }
}

这就是脚手架配置内容，如果要删除这个模板，就删除这个文件中MyVueCli对应的json数据就好了。

这样一个自定义脚手架就完成了，自定义脚手架的删除也完成了！

六、设置环境变量

在项目根目录下新建一个.env文件,并键入一下内容(VUE_APP_是固定的后面的值是自定义的)：

VUE_APP_URL=http://dev.api.com

在data中引入环境变量，供组件访问：

export default {
  name: 'App',
  data () {
    return {
      url: process.env.VUE_APP_URL
    }
  }
}

为不同的开发环境设置不同的变量

在项目根路径下新建两个文件，分别是：.env.development和env.production
两个文件中都引入以下内容：

VUE_APP_URL=http://dev.api.com

在组件中引入：

export default {
  name: 'App',
  data () {
    return {
      url: process.env.VUE_APP_URL
    }
  }
}

此时，如果运行npm run serve 就会使用.env.development（开发环境）中设置的值，如果运行的是npm run build就会使用.env.production（正式环境）中设置的值。（.env/.env.production/.env.development三个文件可以同时存在）

七、运行单独的vue文件

进入要运行的vue文件所在目录，执行vue serve 文件名：

$ vue serve Test.vue

  Command vue serve requires a global addon to be installed.
  Please run npm install -g @vue/cli-service-global and try again.

如果没有安装vue serve这个命令会提示你安装：

npm install -g @vue/cli-service-global

提示：如果在npm安装时出现如下提示：

npm ERR! Unexpected end of JSON input while parsing near '....0"},"_hasShrinkwrap"'

可以清除缓存试下，命令：

npm cache clean --force

安装好后，在执行命令vue serve vue文件运行单vue文件

vue serve Test.vue

此时单文件vue就能成功运行了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...