Vue中遇到的一些小问题

不念不忘少年蓝@ 2024-02-19 13:36 92阅读 0赞

#### 记录Vue中的一些问题 ####

*  记录Vue中的一些问题
 *   *  问题一：Do not use built-in or reserved HTML elements as component id: xxx
     *  问题二：Vue中处理跨域请求
     *  问题三：在axios中使用请求头
     *   *  方式一：全局配置
         *  方式二： 在单独请求中设置请求头（get)：
         *  方式三：在单独请求中设置请求头（post)：
     *  问题四：使用axios传递表单参数
     *   *  方式一：URLSearchParams对象
         *  方式二：qs模块
         *  方式三：拼接字符串
     *  vue-cli 3.0自定义脚手架
     *  六、设置环境变量
     *   *  为不同的开发环境设置不同的变量
     *  七、运行单独的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,运行时，浏览器就会有一个警告：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTIyNTE2OTAy_size_16_color_FFFFFF_t_70]  
原因是那么值header是html标签存在的元素。只要改成别的名字就没有这个警告了。

<template>
      <header>
       
      </header>
    </template>
    
    <script>
      export default {
        
        name: "Header"
      }
    </script>
    
    <style scoped>
    
    </style>

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

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

我们可以看到浏览器访问时出现了跨域：  
![跨域接口的调用][20181121103005274.png]  
出现这种情况，我们可以修改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\*\*\*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTIyNTE2OTAy_size_16_color_FFFFFF_t_70 1]  
.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就能成功运行了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTIyNTE2OTAy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d58a12709c3a435a89a2e70d60018f5c.png
[20181121103005274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/01c5c1b54ac141ef82052e4bcd5a46b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTIyNTE2OTAy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/69edd24f4e804cf38dc6729b70fa3560.png