VUE基础大结局-用vue-cli搭建一个简单的vue项目吧！

hh_xi

于 2024-09-11 14:57:03 发布

阅读量935

点赞数 29

分类专栏： VUE3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hh_xi/article/details/141930641

版权

VUE3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、vue-cli的安装和使用

vue-cli是vue官方提供的、快速生成vue工程化项目的工具

vue-cli官网 https://cli.vuejs.org/zh/

特点

开箱即用
基于webpack
功能丰富且易于扩展
支持创建vue2和vue3的项目

安装vue-cli

开始右键打开PowerShell窗口，运行命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完毕后可运行如下命令检查是否安装成功

vue --version

安装成功会提示对应的版本号

创建vue-cli项目

vue提供了如下创建项目的两种方式

#基于命令行方式创建
vue create my-project

# OR

#基于可视化面板创建
vue ui

1、基于vue ui

在终端运行vue ui，自动在浏览器中打开创建项目的可视化面板

选择“创建”tab页，点击“在此创建新项目”按钮

在详情页填写项目名称，点击下一步

在预设页面中选择手动配置项目，点击下一步

在功能页面中勾选需要安装的功能（Choose Vue Version 、Babel、CSS预处理器、使用配置文件），点击下一步

在配置页面勾选vue版本和需要的预处理器

将刚才所有的配置保存为预设模板，方便下一次创建项目时直接复用之前的配置

项目创建完成后，自动进入项目仪表盘，可进行安装依赖、安装插件等操作

2、基于命令行创建vue

在终端下运行vue create my-project命令

选择预设

选择要安装的功能（*为已经选中，空格可切换选中状态）

使用上下箭头选择vue版本，回车确定

使用上下箭头选择要使用的CSS预处理器，回车确定

使用上下箭头选择如何存储插件的配置信息，回车

选择是否将刚才的配置保存为预设

选择如何安装项目中的依赖包npm/yarn

开始创建项目并安装对应包

项目创建完成

切换至项目路径，运行yarn serve命令可启动项目

vue-cli项目基本结构

创建路由模块

详细路由相关操作可在vue基础（六）中查看

1、安装 vue-router

2、在src目录创建router->index.js路由模块

// 按需导入两个方法
// createRouter用于创建路由的实例对象
// createWebHashHistory用于指定路由的工作模式
import { createRouter, createWebHashHistory } from 'vue-router'

//导入需要使用路由控制的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'

// 创建路由对象
const router = createRouter({
    // 指定路由的工作模式为hash
    history: createWebHashHistory(),
    // 声明路由的匹配规则
    routes: [
        {path:'/', redirect:'/home'},
        { path: '/home', component: Home },
        { path: '/about', component: Movie },
    ],
})

// 导出路由对象
export default router

3、在main.js中导入并挂载路由模块

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

// 挂载路由模块
app.use(router)

app.mount('#app')

4、使用路由

<template>
  <div>
    <h1>APP根组件</h1>
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>

    <hr>

<!--    路由占位符-->
    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'MyApp',

}
</script>

<style lang="less" scoped>

</style>

二、vue组件库-Element UI

vue组件库

实际开发中，开发者可把自己封装的.vue组件整理打包发布为npm包，供他人下载使用

这种可直接下载并在项目中使用的现成组件，就叫做vue组件库

常用vue组件库

pc端：Element UI 、View UI
移动端：Mint UI、Vant

Element UI

vue2使用Element UI（Element - The world's most popular Vue UI framework）

vue3使用Element Plus(https://element-plus.org/zh-CN/)

1、安装

yarn add element-plus

2、在项目中完整引入方式

在main.js中

// main.js
import { createApp } from 'vue'
//引入ElementPlus 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3、在项目中按需引入方式(自动导入)

借助unplugin-vue-components 和 unplugin-auto-import这两款插件

yarn add -D unplugin-vue-components unplugin-auto-import

修改配置文件webpack.config.js的plugin选项

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

在需要引入组件的文件中按需导入

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

三、axios拦截器

拦截器：会在每次发起ajax请求得到相应数据的时候自动被触发

应用场景：实现Token认证、Loading效果...

配置axios

安装依赖包

yarn add axios -S

全局配置axios

import { createApp } from 'vue'
 
import App from './components/App.vue'
 
import './assets/css/bootstrap.css'
import './index.css'
 
import axios from 'axios'
 
const app = createApp(App)
// 为axios配置请求根路径
axios.defaults.baseURL = 'https://api.com'
// 将axios挂载为自定义属性后，每个组件可通过this直接访问的全局挂载的自定义属性
// $后的自定义属性名可自定义，此处为http
app.config.globalProperties.$http = axios
 
app.mount('#app')

发送get/post请求示例


methods: {
    async postInfo() {
      // 发起post请求this.$http.post(请求路径，请求数据)
      const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
      console.log(res)
    },
  async getInfo() {
      // 发起get请求this.$http.get(请求路径，{params:{请求数据}}})
      const { data: res } = await this.$http.get('/api/get', {
        params: {
          name: 'ls',
          age: 33,
        },
      })
    },

  },

配置请求拦截器

通过axios.interceptors.request.use(成功的回调，失败的回调)可配置请求拦截器

注：失败的回调函数可以被省略

axios.interceptors.request.use((config) => {
//...
//必须return config
return config
},(error)=>{
//...
return Promise.reject(error)
})

使用请求拦截器配置Token认证

main.js


// 配置请求根路径
axios.defaults.baseURL = 'https://api.com'

// 配置请求拦截器
axios.interceptors.request.use((config)=>{
    // 给请求头添加自定义属性,给Hader配置Token
    config.headers.Authorization = 'Bearer ' + getToken()
    console.log(config)
    return config
})
// 挂载
app.config.globalProperties.$http = axios

配置响应拦截器

通过axios.interceptors.response.use(成功的回调，失败的回调)可配置响应拦截器

注：失败的回调函数可以被省略

axios.interceptors.response.use((response) => {
//...
//必须return response
return response
},(error)=>{
//...
return Promise.reject(error)
})

四、proxy跨域代理

接口跨域问题

接口跨域问题：协议，域名，端口号不一致时会出现接口跨域问题

比如：

vue项目运行地址：http://localhost:8080/

ap接口地址：https://localhost:8000/api/users

此时接口不能请求成功

通过代理的方式解决跨域问题

proxy工作流程

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

在项目中配置proxy代理

1、在main.js入口文件中，把axios请求路径改造为当前web项目的根路径

// 配置请求根路径
axios.defaults.baseURL = ' http://localhost:8080/'

2、在项目根目录下创建vue.config.j的配置文件，并声明如下配置

module.exports = {
  devServer:{
    // 实际api接口地址
    proxy:'https://www.fc2.cn'
  }
}

注意：

devServer.proxy提供的代理功能，仅在开发调试阶段生效
项目上线发布时，依旧需要API接口服务器开启CROS跨域资源共享