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/user
pathRewrite
不起作用,因为替换的结果没有"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
这个对象里
---- 未完待续 -----