VueCLI使用
怎样使用 @vue/cli创建并开发一个项目
不想每次都去翻视频，所以自己记录下
文章适用范围：使用纯粹的JavaScript进行开发的Vue项目
准备工作
安装@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
- 安装：https://element-plus.gitee.io/zh-CN/guide/installation.html
- 导入：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，
baseURL存在，导致请求链接为api/user- 跑在9876端口，真正链接为
http://127.0.0.1:9876/api/user devServer.proxy，把*./api替换为target，请求的链接就是target/userpathRewrite不起作用，因为替换的结果没有"api"
如何理解跨域
这个文件里，定义一个服务器，原理是这个服务器和Vue项目跑在一个端口下的，这样chrome就不会拦截http请求，但是这个端口本身是没有提供http服务的，所以请求会失败，然后就会转交给代理服务器处理，下面是黑马教程的解释，可以参考这个B站视频
- 把axios 的请求根路径设置为vue 项目的运行地址（接口请求不再跨域)
- vue项目发现请求的接口不存在，把请求转交给proxy代理
- 代理把请求根路径替换为devServer.proxy属性的值，发起真正的数据请求
- 代理把请求到的数据，转发给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这个对象里
---- 未完待续 -----
浙公网安备 33010602011771号