记录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 hookscan't find .git directory, skipping Git hooks installationadded 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就能成功运行了。

感觉不错的话，麻烦动动小手关注一下小编啦

更多精彩请点击

1.删除SQL表数据时存在约束的解决方法

2.这几个 IntelliJ IDEA 高级调试技巧，用了都说爽！

3.GIT常用命令清单

4.如何快速的创建一个 SpringBoot 项目？

ITPub博客

VUE 使用中踩过的坑及问题，你遇到了哪几个？