Vue2项目引入合集

1.引入elementplus-ui（npm i element-ui -S）

1.npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install element-plus --save

2.引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

¶完整引入

在 main.js 中写入以下内容：

// main.ts
import { createApp } from 'vue'
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')

2.引入vue-router

1.npm 安装

npm install vue-router -S

2.创建router文件夹

在index.js中进行配置

import {createRouter,createWebHashHistory} from 'vue-router'

const routes=[
	{
	  path:'/',
	  component:()=>import('../views/main.vue'),
	  children:[
		  {
			  path:'/',
			  name:'home',
			  component:()=>import('../views/home.vue'),
		  }
	  ]
    },
]

const router=createRouter({
	history:createWebHashHistory(),
	routes
})

export default router

3.在main.js中进行注册

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

3.安装vuex

1.npm 安装

npm install vuex@3.6.2

2.创建store文件夹

在index.js中进行配置

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
		num:5
	},
	mutations:{
		setname(state,newval){
			state.num=newval
		}
	},
	actions:{
		
	},
	getters:{
		
	},
	
	
	
})

export default store

3.在main.js中进行注册

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import store from './store'

Vue.use(ElementUI);

Vue.config.productionTip = false

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

4.使用axios

起步 | Axios中文文档 | Axios中文网

1.npm 安装

$ npm install axios

2.创建utils文件夹

创建request.js文件

import axios from 'axios'

const http= axios.create({
	 baseURL: '/api',// 通用请求地址前缀
	  timeout: 1000,//超时时间
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
export default http

3.创建api文件夹

创建index.js文件

import http from '../utils/request.js'

//请求首页数据
export const getData= () =>{
	//返回一个promise对象
	return http.get('/home/getData')
}

4.使用

在需要用到动态数据的文件中

import {getData} from '../api/index.js'
	export default {
	    mounted() {
	    	getData().then((response)=>{
				 console.log(response);
			})
	    }
	}

5.使用mock.js模拟数据

Mock.js

1.npm 安装

$ npm install mockjs

2.在api文件夹下新建mock.js

import Mock from 'mockjs'
import homeApi from './mockData/home.js'

//定义mock请求拦截
//第一个参数请求地址（api后面内容），第二个参数请求类型（get可以省略）

//直接使用
// Mock.mock('/api/home/getData',function(){
// 	//拦截到请求后的处理逻辑
// 	console.log(111)
// 	return  11
// })

//通过引用使用
Mock.mock('/api/home/getData',homeApi.getStatistcalData())

3.使用方法二

新建数据文件夹将数据放入

import Mock from 'mockjs'

//图表数据
let List=[]
export default{
	getStatistcalData(){
		//
		for(let i=0;i<7;i++){
			List.push(
			Mock.mock({
				苹果:Mock.Random.float(100,800,0,0),
				苹果:Mock.Random.float(100,800,0,0),
				苹果:Mock.Random.float(100,800,0,0),
				苹果:Mock.Random.float(100,800,0,0),
				苹果:Mock.Random.float(100,800,0,0),
			})
			)
		}
		return{
			code:2000,
			tableData:[
				{
					name:'oppo',
					todayBuy:500,
					monthBuy:3000,
					totaBuy:3500,
				},
				{
					name:'oppo1',
					todayBuy:500,
					monthBuy:3000,
					totaBuy:3500,
				},
				{
					name:'oppo1',
					todayBuy:500,
					monthBuy:3000,
					totaBuy:3500,
				},
				{
					name:'oppo1',
					todayBuy:500,
					monthBuy:3000,
					totaBuy:3500,
				}
			],
			countData:[
				{name:"今日支付订单",value:"￥123",color:"#ffb834"},
				{name:"今日收藏",value:"￥1234",color:"#ffb988"},
				{name:"本月收入",value:"￥1243",color:"#ffb988"},
				{name:"今日支付订单",value:"￥1423",color:"#ffb988"},
				{name:"本月支付订单",value:"￥4123",color:"#ffb988"},
				{name:"今年支付订单",value:"￥0123",color:"#ffb988"}
			]
		}
	}
}

6.安装less（根据npm查看下载哪个版本）

npm i less@4.1.2

npm i less@4.1.2 less-laoader@6.0.0

6.Echarts使用

1.npm安装

npm i echarts@5.1.2

2.使用方法

<el-card style="height: 280px;margin-bottom: 20px;">
					<div ref="echarts" style="width: 100%;height:280px;"></div>
				</el-card>

mounted() {
			getData().then((response) => {
				this.tableData = response.data.tableData
				this.countData = response.data.countData
				this.orderData = response.data.orderData				 
				console.log(response)
				console.log(this.orderData)
				// console.log(this.xAxis)
				const {orderData} = response.data.orderData
				const xAxis=Object.keys(this.orderData.data[0])//将数组中的key值提取出来
				
				// 基于准备好的dom，初始化echarts实例
				      var myChart = echarts.init(this.$refs.echarts)
				     
				      // 指定图表的配置项和数据
				      var option = {
				        title: {
				          text: 'ECharts 入门示例'
				        },
				        tooltip: {},
				        legend: {
				          data: xAxis
				        },
				        xAxis: {
				          data: this.orderData.date
				        },
				        yAxis: {},
				        series: [
				
				        ]
				      }
					  
					  xAxis.forEach(key =>{
					  	option.series.push(
					  	  {
					  		 name: key,
					  		 type: 'line',
					  		 data: this.orderData.data.map(item=>item[key]) 
					  	  }
					  	)
					  })
				      // 使用刚指定的配置项和数据显示图表。
				      myChart.setOption(option) 
			})
		}
	

7.cookie使用

1.npm安装

npm i js-cookie@3.0.1

import Cookies from 'js-cookie';'