搭建vue项目并引入基础组件

CQRNB

于 2024-05-11 15:33:28 发布

阅读量744

点赞数 13

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/CQRNB/article/details/138666726

版权

搭建vue项目并引入基础组件

介绍搭建完整的vue项目并引入基础组件
如：element ui，图标字体库，axios以及路由
给有一定基础的同学看的，可以照着本文一次性搭建项目
如果要系统学习可以去看官方文档：https://cn.vuejs.org/guide/introduction.html
或者网上搜索视频

文章目录

搭建vue项目并引入基础组件
一、项目准备
二.基础组件引入
三.使用组件
总结

一、项目准备

环境搭建和详细创建项目网上有详细的教程我就不在赘述了
我建简单的创建项目

使用npm安装Vue CLI：
npm install -g @vue/cli

创建一个新的Vue项目
vue create my-project
创建配置我选择的是默认vue2配置

进入项目文件夹：
cd my-project

运行项目：
npm run serve

创建启动项目后访问是这样的在这里插入图片描述

二.基础组件引入

1.引入element ui

element ui官网：https://element.eleme.cn/#/zh-CN/component/installation
npm i element-ui -S

全局引入组件

进入main.js文件引入element ui

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'	//引入依赖
import 'element-ui/lib/theme-chalk/index.css'	//导入样式

Vue.use(ElementUI)	//让Vue使用ElementUI
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

按需引入组件

npm install babel-plugin-component -D

进入babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [	//这一块代码可以直接从官网拷贝
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后创建element ui的配置文件
选择在src文件夹里创建plugins文件夹，再在plugins文件夹里创建element.js文件
在element.js里写代码

import Vue from 'vue'
//以后需要用什么组件就在花括号里加入组件
import { Button } from 'element-ui'

//并在这里Vue.use(组件)
Vue.use(Button)

进入main.js文件引入element.js

import Vue from 'vue'
import App from './App.vue'
//引入配置文件
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

全局引入和按需引入区别

全局引入方便快捷，一次引入终身享受 [dog]
而按需引入，我们可以只引入需要的组件，以达到减小项目体积的目的，就需要在配置文件里管理好组件
项目小用的组件少推荐按需引入，小而美嘛
项目大，基本上每个组件都用到了，虽然按需引入也行，‘只’ 需全部组件都在配置文件里面写一遍就行了，还不如全局引入一次搞定也不需要额外配置文件进行管理

2.图标字体库的引入

这里使用的Font Awesome
官网 https://fontawesome.dashgame.com/

npm i -D font-awesome

进入main.js文件引入图标字体库

import 'font-awesome/css/font-awesome.min.css'

其他的开源免费的图标字体库供选择

Font Awesome：这是一个非常流行的图标字体库，提供了大量的图标和字体，包括传统、现代、扁平等各种类型。它还支持Vue和React组件的形式安装使用。
Material Icons：专门为Android和iOS设备设计的图标字体库，包含了大量的图标和字体，适用于各种应用程序和网站。
Fontello：由Sketchup爱好者开发的免费字体库，提供了丰富的图标和字体选项。
IcoMoon：拥有高质量的图标库，并且引入了第一个自定义图标字体生成器，允许用户选择图标并将它们转换为字体。
阿里iconfont字库：由阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师可以将图标上传到iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
Remix Icon：一套开源免费可商用的图标库，图标风格是中性风格，适用于各种用户群体和风格的项目。每个图标都是按照24*24大小设计的，非常适合图标组件库的前期搭建。
IconPark：由字节跳动出品的图标库，以技术驱动可以随意更改图标的属性，线性，面性，甚至可以双色和多色填充。致力于构建高质量、统一化、可定义的图标资源。
Iconoir：简单高效的开源图标库，大概有900+的图标，大小为24*24，也是快速搭建组件库非常好用的图标库。
Feathericons：面向设计师和开发者的开源图标库，每个图标都设计在一个24×24的像素网格上，强调简单，一致性和易读性。

这些图标字体库都是开源免费的，可以根据项目需求选择适合的库来使用。请注意，虽然这些库是免费的，但在使用时仍然需要遵守它们的许可协议和使用条款。

3.引入axios

引入axios
npm i axios -S

简单使用

进入main.js文件引入axios

import axios from "axios";

Vue.prototype.axios = axios	//挂载到原型就可以在全局使用

在js代码里

this.axios
	.post("请求地址"，"参数")
	.then((res) => {
	//处理逻辑
})

这样就可以直接使用

配置使用

配置跨域请求
在src的vue.config.js文件中添加配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: '请求地址',
        changeOrigin: true, // 是否改变源地址
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
})

添加devServer: {xxxxxxx}代码即可
在src文件夹里新建service.js文件并编写代码

import axios from "axios";
// import { Message } from 'element-ui';
// import VueRouter from 'vue-router'

const service = axios.create({
	//如果配置了上面```vue.config.js```文件中的跨域，创建了'/api'参数可以这样使用
    baseURL: '/api',
    //如果没配置跨域，也可直接写请求地址
    //baseURL: '请求地址',
    timeout:3000,
})

//请求拦截器
service.interceptors.request.use((config) => {
    console.log("请求拦截器",config)
    // 在发送请求之前做些什么
    // 添加 token 到 headers
    // if (getToken()) {
    //     config.headers['X-Token'] = getToken();
    // }
    return config
}, error => {
    return Promise.reject(error)
})

//响应拦截器
service.interceptors.response.use((response) => {
    console.log("响应拦截器",response)
    // if (response.code !== 200) {
    //     Message({
    //         message: response.message || 'Error',
    //         type: 'error',
    //         duration: 5 * 1000
    //     });
    //     // 登陆问题
    //     if (response.code === '登陆问题的错误码') {
    //         // 清除 token 并跳转到登录页
    //         removeToken();
    //         VueRouter.push('/login');
    //     }
    //     return Promise.reject(new Error(response.message || 'Error'));
    // }
    return response
}, error => {
    return Promise.reject(error)
})

export default service

进入main.js文件引入axios

import service from "./service.js";

Vue.prototype.service = service	//挂载到原型就可以在全局使用

在js代码里

this.service 
	//由于配置了baseURL，这里就不用写一长串请求地址了，只需要写url后面的路径即可
	.post("路径"，"参数")
	.then((res) => {
	//处理逻辑
})

这样就可以直接使用
其实还应该创建api文件夹，在里面进行各个请求的封装

4.引入路由

引入路由，vue2推荐使用3.x版本路由，最新版可能报错
npm install vue-router@3 -S
配置路由，创建router的配置文件
在src里新建文件夹router，在router文件夹里新建index.js文件
编辑index.js文件

// 引入 Vue 和 VueRouter  
import Vue from 'vue'  
import VueRouter from 'vue-router'  

// 使用 VueRouter  
Vue.use(VueRouter)  

// 懒加载路由对应的组件  
const 视图名 = () => import('视图文件地址')  

// 定义路由  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: 视图名
  },  
  // ... 其他路由  
]  

// 创建并导出路由实例  
const router = new VueRouter({  
  mode: 'history', // 或者 'hash'  
  base: process.env.BASE_URL,  
  routes  
})  

export default router

进入main.js文件引入router的配置文件

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js' //引入配置文件
import 'font-awesome/css/font-awesome.min.css' //引入Font Awesome图标字体库
import axios from "axios";
import router from './router'

//挂载到原型就可以在全局使用
Vue.prototype.axios = axios
Vue.config.productionTip = false

new Vue({
  router, // 注入路由
  render: h => h(App),
}).$mount('#app')

三.使用组件

通过写一个视图一次性展示各个组件的使用方式
首先修改src文件下的app.vue文件

<template>
  <div id="app">
  	<!-- 删除不需要的代码 -->
  	<!-- 路由入口 -->
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>

在src文件下创建views文件夹，再在views文件下创建HomePage.vue文件
编辑HomePage.vue文件

<template>
  <div style="margin-top: 100px;">
    <!-- 测试图标库 -->
    <i class="fa fa-thumbs-o-up"></i>
    <br/>
    <!-- 如果element是按需引入组件，使用element的input和button组件，记得要去element.js配置文件里加上Input和Button组件 -->
    <el-input style="width: 500px" v-model="input" placeholder="请输入内容"></el-input>
    <!-- 测试axios-->
    <el-button type="primary" @click="getData()">发送请求</el-button>
    <br/>
    测试数据：{{data}}
  </div>
</template>

<script>

export default {
  name: "HomePage",
  data() {
    return{
      input: "",
      data : {},
    }
  },
  methods: {
    getData() {
      //get请求参数拼接
      //https://www.baidu.com/sugrec?prod=pc&wd=
      this.service.get("/sugrec?prod=pc&wd=" + this.input).then(res => {
        this.data = res;
      })
    }
  }
}
</script>

<style scoped>
</style>

配置路由，修改router/index.js文件

// 懒加载路由对应的组件  
const HomePage = () => import('@/views/HomePage.vue')

// 定义路由  
const routes = [
    {
        path: '/',
        name: 'HomePage',
        component: HomePage
    },
    // ... 其他路由
]