Vue中遇到的一些小问题

记录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,运行时，浏览器就会有一个警告：
Vue中遇到的一些小问题
原因是那么值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>

我们可以看到浏览器访问时出现了跨域：
Vue中遇到的一些小问题
出现这种情况，我们可以修改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***
Vue中遇到的一些小问题
.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...


> [email protected] 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中的一些问题

问题一：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文件

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