VueCLI使用

怎样使用 @vue/cli创建并开发一个项目

不想每次都去翻视频，所以自己记录下

文章适用范围：使用纯粹的JavaScript进行开发的Vue项目

目录

• 准备工作
  • 安装@vue/cli
  • 新建项目
  • 导包
• 项目结构
  • package.json
  • main.js和index.html
• 覆盖默认样式
• 网络请求与跨域
  • 封装axios
  • 使用request
  • 跨域
  • 解决跨域
  • 如何理解跨域
• 组件
  • 组件定义
  • 导入组件
• 编写组件
  • script

准备工作

安装@vue/cli

vue项目的构建需要一个npm包，这个包叫做 @vue/cli，

可以通过 vue --version 检查自己是否已经安装了这个npm包。

如果没有安装这个包，通过 npm install -g @vue/cli安装这个包。

新建项目

安装好之后就可以创建项目了

vue create <project-name>

接下来会让我们选择需要的依赖，一般来说，vue版本选3.x，再勾选 babel，router和vuex即可。

然后 cd <project-name>，运行 npm run serve，就能让整个应用跑起来了。

导包

引入element-plus

1. 安装：https://element-plus.gitee.io/zh-CN/guide/installation.html
2. 导入：https://element-plus.gitee.io/en-US/guide/quickstart.html#full-import

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

项目结构

.
|-babel.config.js
|-package.json
|-package-lock.json
|-public
  |-index.html
  |-favicon.ico
|-src
  |-App.vue # 根组件
  |-main.js
  |-assets # 存放静态资源
  |-components # 存放组件
  |-router # 页面路由
  |-store # 项目变量
  |-views # 视图

package.json

这是npm的配置文件

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  },

在serve后面加上 --open，这样执行 npm run serve时候，就可以自动打开浏览器

至于 npm run serve这行命令背后的机理，可以参考npm run serve/build 背后的真实操作这篇文章。

main.js和index.html

在vue的教程里提到

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例

https://cn.vuejs.org/guide/essentials/application.html#the-app-instance

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

https://cn.vuejs.org/guide/essentials/application.html#the-root-component

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

https://cn.vuejs.org/guide/essentials/application.html#mounting-the-app

main.js中 createApp接收的参数来自 App.vue，挂载到了 public/index.html中 id为 app的 div中。

可以尝试修改 index.html，然后看看页面的变化。

覆盖默认样式

把 App.vue里的style都删了，加上这样

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

网络请求与跨域

封装axios

npm i axios -S安装axios

新建 src/utils/request.js，然后去博客复制代码

要使用的时候，import request from "@/utils/request";即可

使用request

如何使用request？

/*
  @parm: url{string}
  @parm: form{object}
*/
request.post(url, form);
 
/*
  @param: url{string}
  @param: params{object}
*/
request.get(url, params);

提供一个案例：

request
.get(`/${this.search_type}`, {
    keyword: this.keyword,
})
.then((res) => {
    console.log(res);
});

跨域

什么是跨域：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

vue如何解决跨域：https://cli.vuejs.org/config/#devserver

devServer参数什么意思：https://github.com/chimurai/http-proxy-middleware

解决跨域

项目根目录新建 vue.config.js，将下面的内容复制粘贴进去。

// vue.config.js
// 跨域配置
module.exports = {
  devServer: { //记住，别写错了devServer//设置本地默认端口  选填
    port: 9876,
    proxy: {  //设置代理，必须填
      '/api': { //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://127.0.0.1:4523/m1/1706029-0-default',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}

这里是 request.js，放在这里，方便后面的解释说明。

// src/ustils/request.js
import axios from 'axios'
 
const request = axios.create({
  baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
  timeout: 5000
})
...

根据上面几个链接，我讲解我的理解

比如请求 GET /user，

1. baseURL存在，导致请求链接为 api/user
2. 跑在9876端口，真正链接为 http://127.0.0.1:9876/api/user
3. devServer.proxy，把 *./api替换为 target，请求的链接就是 target/user
4. pathRewrite不起作用，因为替换的结果没有 "api"

如何理解跨域

这个文件里，定义一个服务器，原理是这个服务器和Vue项目跑在一个端口下的，这样chrome就不会拦截http请求，但是这个端口本身是没有提供http服务的，所以请求会失败，然后就会转交给代理服务器处理，下面是黑马教程的解释，可以参考这个B站视频

1. 把axios 的请求根路径设置为vue 项目的运行地址（接口请求不再跨域)
2. vue项目发现请求的接口不存在，把请求转交给proxy代理
3. 代理把请求根路径替换为devServer.proxy属性的值，发起真正的数据请求
4. 代理把请求到的数据，转发给axios

'/api'的意思是'api'开头的请求使用代理服务器，pathRewrite是因为真正的后端url没有api这个字符子串。

关于这个配置文件的解释，参考帮你解惑vue-cli代理问题 - 自由的囚徒的文章 - 知乎

组件

通常，头部、侧边栏这些小部分可以作为组件

组件是一个.vue文件

组件定义

在 component里编写一个组件，起名叫做 Header.vue，内容如下：

<template>
  <div style="height: 40px; border-bottom: 1px solid #ccc; display: flex"></div>
</template>
 
<script>
export default {
  name: 'Header',
}
</script>
 
<style scoped>
</style>

关键在于 <script>里的 export default

name属性就是给这组件起个名字，到时候在别的页面引入的时候就要用到这个名字

导入组件

我们希望Header组件能够一直在整个项目的页面上方出现，所以我们把Header组件引入 App.vue。

import 语句中，@表示的是 src文件夹

<template>
  <Header></Header>
  <router-view/>
</template>
 
<script>
import Header from '@/components/Header'
 
export default {
  name: 'Layout',
  components: {
    Header,
  },
}
</script>

编写组件

script

<script>
import request from "@/utils/request";
 
export default {
  name: "Home",
  components: {},
  data() {
    return {
      keyword: "",
      search_type: "question",
      radio: 1,
    };
  },
  methods: {
    search() {
      request.post("/user", {}).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

把我们要的东西都写到 export default里面

如果是数据，就是在 data函数里return一个对象，这个对象的属性可以放到 <template>中

data() {
  return obj;
}

如果是函数，就放到 methods这个对象里

---- 未完待续 -----

如果您有任何关于文章的建议，欢迎评论或在 GitHub 提 PR

作者：dutrmp19
本文为作者原创，转载请在 文章开头 注明出处：https://www.cnblogs.com/dutrmp19/p/16751532.html
遵循 CC 4.0 BY-SA 版权协议

---